tinymce / tinymce-vue

Official TinyMCE Vue component
MIT License
2.04k stars 205 forks source link

Can't resize images by dragging mouse #318

Closed hmingv closed 1 month ago

hmingv commented 2 years ago

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>
exalate-issue-sync[bot] commented 2 years ago

Ref: INT-2917

hmingv commented 2 years ago

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

tiny-stale-bot commented 1 month ago

This issue is stale because it has been open 30 days with no activity. Please comment if you wish to keep this issue open or it will be closed in 7 days.

tiny-stale-bot commented 1 month ago

This issue was closed because it has been stalled for 7 days with no activity.