tinymce-vue icon indicating copy to clipboard operation
tinymce-vue copied to clipboard

Can't resize images by dragging mouse

Open hmingv opened this issue 3 years ago • 2 comments

What is the current behavior?

Can't resize images by dragging mouse

Tinymce-vue version: 5.0.0 Tinymce version: 6.0.3

Mirror problem: https://github.com/tinymce/tinymce-react/issues/56

I have set the content_style but I still can't resize the image using mouse drag.

<script setup>
import Editor from '@tinymce/tinymce-vue'
import { upload } from '@/api/common'

/* Import TinyMCE */
import tinymce from 'tinymce';

/* Default icons are required. After that, import custom icons if applicable */
import 'tinymce/icons/default';

/* Required TinyMCE components */
import 'tinymce/themes/silver';
import 'tinymce/models/dom';

/* Import the skin */
import 'tinymce/skins/ui/oxide/skin.css';

/* Import plugins */
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/table'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/emoticons'
import 'tinymce/plugins/emoticons/js/emojis'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/autoresize'

import contentUiCss from 'tinymce/skins/ui/oxide/content.min.css';
import contentCss from 'tinymce/skins/content/default/content.min.css';

const handleImageUpload = (blobInfo, progress) => new Promise((resolve, reject) => {
    const formData = new FormData()
    formData.append('file', blobInfo.blob(), blobInfo.filename())

    upload(formData).then(response => {
        resolve(response.data.attachment.path)
    }, error => {
        reject(error)
    })
})

const editorInit = {
    plugins: 'lists link image fullscreen table emoticons wordcount searchreplace autoresize',
    indentation: '20pt',
    toolbar: 'undo redo | insert | styles | emoticons bold italic fullscreen | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
    browser_spellcheck: true,
    contextmenu: false,
    file_picker_types: 'image',
    image_title: true,
    automatic_uploads: true,
    images_file_types: 'jpg,png,svg,webp',
    images_upload_handler: handleImageUpload,

    skin: false,
    content_css: false,
    content_style: [contentCss, contentUiCss].join("\n"),

    // Element path
    elementpath: false,
}

defineProps({
    modelValue: String,
})

defineEmits(['update:modelValue'])
</script>

<template>
    <Editor
        :init="editorInit"
        :modelValue="modelValue"
        @update:modelValue="$emit('update:modelValue', $event)"
    />
</template>

hmingv avatar Jun 10 '22 07:06 hmingv

Ref: INT-2917

exalate-issue-sync[bot] avatar Jun 10 '22 07:06 exalate-issue-sync[bot]

Supplementary case: https://codesandbox.io/s/distracted-cray-kprrbp

hmingv avatar Jun 11 '22 02:06 hmingv