富文本插件tinymce使用Ctrl+V粘贴图片上传到远程服务器

原创

已于 2022-09-16 09:13:51 修改 · 1.4k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

于 2022-09-15 18:17:23 首次发布

该博客介绍了如何在Vue项目中集成TinyMCE编辑器，包括安装、引入相关模块和自定义配置。详细讲解了图片上传的处理，通过自定义上传函数实现图片粘贴和上传功能，并展示了相关配置选项，如语言、皮肤、插件、工具栏等设置。

tinymce使用

安装@tinymce/tinymce-vue、tinymce

引入插件


//引入tinymce编辑器
import Editor from "@tinymce/tinymce-vue";
//引入node_modules里的tinymce相关文件文件
import tinymce from "tinymce/tinymce"; //tinymce默认hidden，不引入则不显示编辑器
// 编辑器插件
import "tinymce/plugins/image"; //插入编辑图片
//其余插件省略....，可根据实际自行引用
// 自定义上传图片到远程服务器的方法
import {
   
    UploadFile } from '@/util/uploadFiles';

初始化插件配置

data() {
   
   
    const DEPLOYURL = location.origin;
    return {
   
   
      init: {
   
   
        // 微服务下需要处理资源文件路径
        language_url: `${
     
     DEPLOYURL}/tinymce/langs/zh_CN.js`, //引入语言包文件
        language: "zh_CN", //语言类型
        skin_url: `${
     
     DEPLOYURL}/tinymce/skins/ui/oxide