tinymce-react: 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.

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 17 (4 by maintainers)

Most upvoted comments

@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

SimonFc on Sep 30, 2019

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'),
        }}
      />
    );
  }

tiny-james on Apr 30, 2021

you should add a parameter: object_resizing: 'true'

GalensGan on May 22, 2020

when initialise tinymce.init than you need to change css in content_style as given below content_style: .mce-content-body div.mce-resizehandle { background-color: #4099ff; border-color: #4099ff; border-style: solid; border-width: 1px; box-sizing: border-box; height: 10px; position: absolute; width: 10px; z-index: 1298 } .mce-content-body .mce-clonedresizable { cursor: default; opacity: .5; outline: 1px dashed #000; position: absolute; z-index: 10001 },

gajanandsb on Jan 11, 2023

@tiny-james Thanks .finally fixed

https://webpack.js.org/loaders/raw-loader/

It should be

npm install raw-loader --save-dev

–save-dev installing.

codetestmg on Apr 30, 2021

Thank you so much @SimonFc, its work for me… i added your code (https://cdn.tiny.cloud/1/no-api-key/tinymce/5.0.14-54/skins/ui/oxide/content.min.css) to my public content css and yeah… image can resized now.

almazary on Sep 30, 2019

This seems like an issue with tinymce and not the tinymce-react wrapper. See if you’re able to reproduce the issue here: http://fiddle.tinymce.com/

If you are then please open up an issue at tinymce, and provide information about what browser/OS you’re experiencing this issue with together with a fiddle.

Thanks!

SimonFc on Mar 22, 2019