Can't resize images by dragging mouse

import React from 'react';
import { Editor } from '@tinymce/tinymce-react';

import 'tinymce';
import 'tinymce/skins/ui/oxide/skin.min.css';
import 'tinymce/themes/silver';
import 'tinymce/plugins/code';
import 'tinymce/plugins/paste';
import 'tinymce/plugins/emoticons';
import 'tinymce/plugins/image';
import 'tinymce/plugins/imagetools';
import './tinymce.scss';

class TinyMCE extends React.Component {
  handleEditorChange = (e) => {
    console.log('Content was updated:', e.target.getContent());
  };

  render() {
    const { editorContent } = this.props;
    return (
      <div>
        <Editor
          initialValue={editorContent.value}
          init={{
            skin: false,
            content_css: false,
            paste_data_images: true,
            plugins: 'link image code paste emoticons imagetools',
            image_title: true,
            automatic_uploads: true,
            toolbar:
              'undo redo | bold italic | alignleft aligncenter alignright | code image emoticons',
          }}
          onChange={this.handleOnChange}
        />
      </div>
    );
  }
}

export default TinyMCE;

I can drag and drop images, insert them, and etc. The advance tools also show up but I’m not able to resize the images with my mouse (clicking on image and dragging on sides/corners).

Am i just missing a plugin or concept? Thanks.

[SimonFc]

@christiannguyen @almazary I see what’s going on now - the issue is due to some CSS not loading. There’s a certain kind of CSS which we call content UI CSS which provides things like resizebars within the iframe. This is not anything which can be bundled like the UI CSS by importing it like import 'tinymce/skins/ui/oxide/skin.min.css'; since it must be available within the iframe.

By default, given that the skin option hasn’t been set, TinyMCE will attempt to load and inject the content UI CSS from the path skins/ui/oxide/content.min.css (relative to skin_url) which is non-existent if you self host and doesn’t provide it. This is why it worked for you @christiannguyen when you were using Cloud.

I can’t think of any other way to solve this than to make sure that the CSS is avaiable at the expected path 🤔 Here’s an updated fiddle where I have placed the missing css in the public folder.

You can see the latest version of that CSS here: https://cdn.tiny.cloud/1/no-api-key/tinymce/5.0.14-54/skins/ui/oxide/content.min.css

[tiny-james]

Just in case more people stumble across this. You must load the tinymce/skins/content/default/content.min.css and tinymce/skins/ui/oxide/content.min.css as a string and provide it to the editor in the content_style option.

This is documented in the quick-start guide.

Here’s the full example from the quick-start guide:

  import { Editor } from '@tinymce/tinymce-react';

  // TinyMCE so the global var exists
  // eslint-disable-next-line no-unused-vars
  import tinymce from 'tinymce/tinymce';

  // Theme
  import 'tinymce/themes/silver';
  // Toolbar icons
  import 'tinymce/icons/default';
  // Editor styles
  import 'tinymce/skins/ui/oxide/skin.min.css';

  // importing the plugin js.
  import 'tinymce/plugins/advlist';
  import 'tinymce/plugins/autolink';
  import 'tinymce/plugins/link';
  import 'tinymce/plugins/image';
  import 'tinymce/plugins/lists';
  import 'tinymce/plugins/charmap';
  import 'tinymce/plugins/hr';
  import 'tinymce/plugins/anchor';
  import 'tinymce/plugins/spellchecker';
  import 'tinymce/plugins/searchreplace';
  import 'tinymce/plugins/wordcount';
  import 'tinymce/plugins/code';
  import 'tinymce/plugins/fullscreen';
  import 'tinymce/plugins/insertdatetime';
  import 'tinymce/plugins/media';
  import 'tinymce/plugins/nonbreaking';
  import 'tinymce/plugins/table';
  import 'tinymce/plugins/template';
  import 'tinymce/plugins/help';

  // Content styles, including inline UI like fake cursors
  /* eslint import/no-webpack-loader-syntax: off */
  import contentCss from '!!raw-loader!tinymce/skins/content/default/content.min.css';
  import contentUiCss from '!!raw-loader!tinymce/skins/ui/oxide/content.min.css';

  export default function TinyEditorComponent(props) {
    // note that skin and content_css is disabled to avoid the normal
    // loading process and is instead loaded as a string via content_style
    return (
      <Editor
        init={{
          skin: false,
          content_css: false,
          content_style: [contentCss, contentUiCss].join('\n'),
        }}
      />
    );
  }