如何让tinymce能够在vue js中上传图片

Question

我在我的 vue js 应用程序中使用 tinymce，但它不允许我上传图片。

我正在使用这个包import Editor from '@tinymce/tinymce-vue' 我想我缺少任何插件或工具栏

组件

  

     <editor
                      apiKey="API_KEY"
    
                      :init="{
                       height: 200,
                       menubar: true,
                       plugins: [
                         'advlist autolink lists link image charmap print preview anchor',
                         'searchreplace visualblocks code fullscreen',
                         'insertdatetime media table paste code help wordcount '
                       ],
                        file_picker_types: 'image',
                       toolbar:
                         'undo redo | formatselect | bold italic backcolor| link image| \
                         alignleft aligncenter alignright alignjustify | \
                         bullist numlist outdent indent | removeformat | help | image code'
                     }"
    
                    />

Answer 1

您必须在初始化对象中添加一个选项 image_upload_url 或 image_upload_handler

文档参考：tinymce image upload options

首先，您必须创建一个 API 端点，该端点应以 json 对象响应，该对象包含 location 键中的图像路径，例如 { location: 'path/to/filename.jpg' }

然后，

如果您使用 URL 选项，则必须提供该端点字符串，如 http://example.com/api/image_upload。您必须创建该路由处理程序。（我可以使用 express 向您展示演示）
如果使用处理程序选项，需要提供this function，使用那个API端点，并且函数应该return相同JSON 对象类型。（这是为了在 return 之前提前修改对象）

为简单起见，您可以使用 image_upload_url 选项。

我在自己的项目中使用 tinymce 和 express。

让我知道您在 back-end 中使用什么，以便我进一步提供帮助。

如何让tinymce能够在vue js中上传图片

How make tinymce able to upload image in vue js

javascript

tinymce

vue.js

vue-component

vuejs2