Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table issue - The cursor type change and cell highlighting features aren't working #559

Open
loveloper-dev opened this issue Oct 30, 2024 · 0 comments

Comments

@loveloper-dev
Copy link

loveloper-dev commented Oct 30, 2024

Hello.
Thank you for providing great Editor.

What is the current behavior?
demo: https://www.tiny.cloud/docs/tinymce/latest/full-featured-open-source-demo/
On the demo page, when I resize cell's width or height, cursor type is changed to be col-size or row-size.
And cell's background color is changed to blue color when I drag cells.

However, on my react demo project, that doesn't work.
My cursor is always default and background color of cells is always white although the react demo project doesn't have any css files.
=>
I faced same MIME type error: tinymce/tinymce-angular#30
Image

I think this issue is caused by loading skin issue.
Because it works well if I copied css and the write the path on skin_url in init options.

Answers said only solution is copying css and writing the path on skin_url value.
I think it is not so good way. Is there any other way to solve it?

Please provide the steps to reproduce and if possible a minimal demo of the problem via codesandbox.io or similar.
Here is code:

// TinyMCE so the global var exists
// eslint-disable-next-line no-duplicate-imports
import 'tinymce/tinymce';
// DOM model
import 'tinymce/models/dom/model';
// Theme
import 'tinymce/themes/silver';
// Toolbar icons
import 'tinymce/icons/default';
// Editor styles
import 'tinymce/skins/ui/oxide/skin';

// importing the plugin js.
import 'tinymce/plugins/code';
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/help';
import 'tinymce/plugins/help/js/i18n/keynav/en';
import 'tinymce/plugins/image';
import 'tinymce/plugins/link';
import 'tinymce/plugins/media';
import 'tinymce/plugins/table';

// Content styles, including inline UI like fake cursors
import 'tinymce/skins/content/default/content';
import 'tinymce/skins/ui/oxide/content';

<Editor
        licenseKey="gpl"
        disabled={false}
        onEditorChange={onChange}
        value={value}
        init={{
          plugins:
            'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons accordion',
          editimage_cors_hosts: ['picsum.photos'],
          menubar: 'file edit view insert format tools table help',
          toolbar:
            'undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat | charmap emoticons | code fullscreen preview | save print | pagebreak anchor codesample | ltr rtl',
          autosave_ask_before_unload: true,
          autosave_interval: '30s',
          autosave_prefix: '{path}{query}-{id}-',
          autosave_restore_when_empty: false,
          autosave_retention: '2m',
          image_advtab: true,
          link_list: [
            { title: 'My page 1', value: 'https://www.tiny.cloud' },
            { title: 'My page 2', value: 'http://www.moxiecode.com' },
          ],
          image_list: [
            { title: 'My page 1', value: 'https://www.tiny.cloud' },
            { title: 'My page 2', value: 'http://www.moxiecode.com' },
          ],
          image_class_list: [
            { title: 'None', value: '' },
            { title: 'Some class', value: 'class-name' },
          ],
          importcss_append: true,
          file_picker_callback: (callback, value, meta) => {
            /* Provide file and text for the link dialog */
            if (meta.filetype === 'file') {
              callback('https://www.google.com/logos/google.jpg', { text: 'My text' });
            }

            /* Provide image and alt text for the image dialog */
            if (meta.filetype === 'image') {
              callback('https://www.google.com/logos/google.jpg', { alt: 'My alt text' });
            }

            /* Provide alternative source and posted for the media dialog */
            if (meta.filetype === 'media') {
              callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.google.com/logos/google.jpg' });
            }
          },
          height: 600,
          image_caption: true,
          quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
          noneditable_class: 'mceNonEditable',
          toolbar_mode: 'sliding',
          contextmenu: 'link image table',
          skin: 'oxide',
          content_css: 'default',
          content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
        }}
      />

What is the expected behavior?
Expected 1:
Image
Happened 1:
Image

Expected 2:
Image
Happened 2:
Image

Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE or tinymce-react?
Package versions:
"tinymce": "^7.2.0",
"@tinymce/tinymce-react": "^5.1.1"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant