tinymce-vue
tinymce-vue copied to clipboard
Can't resize images by dragging mouse
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>
Ref: INT-2917
Supplementary case: https://codesandbox.io/s/distracted-cray-kprrbp