vite+vue2项目中使用tinymce的记录

vite+vue2项目中使用tinymce的记录

安装依赖

首先,使用pnpm安装了tinymce和@tinymce/tinymce-vue的特定版本,用来搭配vue2.7.16和vite:

bash 复制代码
pnpm install "@tinymce/tinymce-vue": "3.2.6" "tinymce": "5.1.1"

复制tinymce到public文件夹

为了确保tinymce的资源文件(如皮肤、插件等)能够正确加载,将tinymce从node_modules中复制一份到public文件夹。

创建tinymce-editor组件

创建了一个名为tinymce-editor的Vue组件,并在其中引入了必要的tinymce插件和主题。组件代码如下:

html 复制代码
<template>
    <div class="tinymce-editor">
        <Editor api-key="gjt7ov81xak1la48n91n9jiskcuny5ka65kq24uzxp058rum" v-model="myValue" :init="init" :disabled="disabled"></Editor>
    </div>
  </template>
  <script>
import tinymce from 'tinymce/tinymce' //tinymce默认hidden,
import Editor from '@tinymce/tinymce-vue' //编辑器引入
import 'tinymce/themes/silver/theme' //编辑器主题
// import 'tinymce/icons/default/icons' //引入编辑器图标icon 

// import 'tinymce/models/dom/model'

// import 'tinymce/plugins/textcolor'//颜色
import 'tinymce/plugins/advlist' //高级列表
import 'tinymce/plugins/autolink' //自动链接
import 'tinymce/plugins/link' //超链接
import 'tinymce/plugins/image' //插入编辑图片
import 'tinymce/plugins/lists' //列表插件
import 'tinymce/plugins/charmap' //特殊字符
import 'tinymce/plugins/media' //插入编辑媒体
import 'tinymce/plugins/wordcount' // 字数统计
import 'tinymce/plugins/table'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/preview'

// import 'tinymce/plugins/imagetools' ;
export default {
    components: {
      Editor
    },
    props: {
    //内容
    value: {
      type: String,
      default: '',
    },
    //是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    //插件
    plugins: {
      type: [String, Array],
      default: 'advlist autolink link image lists charmap table fullscreen  preview',
    },
    //工具栏
    toolbar: {
      type: [String, Array],
      default:
        'undo redo |  formatselect | forecolor backcolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent lists image | fullscreen | preview',
    },
},
    
    
    data() {
      return {
        init: {
            //以css文件方式自定义可编辑区域的css样式,css文件需自己创建并引入
        content_css: 'tinymce/skins/content/default/content.css',
        selector: '#tinymce',
        language_url: 'tinymce/langs/zh_CN.js', //汉化路径是自定义的,一般放在public或static里面
        language: 'zh_CN',
        skin_url: 'tinymce/skins/ui/oxide', //皮肤
        plugins: this.plugins, //插件

        menubar: 'edit insert view format table ', //menubar(1级菜单)
        //工具栏
        toolbar: this.toolbar,
        toolbar_location: '/',
        fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', //字体大小
        // font_formats: fonts.join(';'),//引入字体如['宋体=宋体','微软雅黑=微软雅黑'],
        height: 500, //高度
        placeholder: '请输入内容',
        branding: false, //隐藏右下角技术支持
        
        // 图片上传
        paste_data_images: true, // 允许粘贴图像
        images_reuse_filename:false, //使用图像的实际文件名
        automatic_uploads: true,
        file_picker_types: "image",
        images_upload_handler: (blobInfo, success, failure) => {
          // 调用了一个公共函数,会返回上传好的图片地址
          uploadFile({ filename: blobInfo.filename(), blob: blobInfo.blob() })
            .then((res) => {
              success(res);
            })
            .catch((err) => {
              console.debug(err);
              failure(err);
            });
        },
      },

        myValue: this.value,
      };
    },
    mounted() {
      tinymce.init({});
    },
    methods: {
      calcWidth() {
        return document.body.clientWidth / 2 + "px";
      },
      
    },
    watch: {
      //监听内容变化
    value(newValue) {
      this.myValue = newValue || ''
    },
    myValue(newValue) {
        this.$emit("input", newValue);
      }
      
    }
  }
  </script>

在组件中,您使用了v-model来绑定编辑器的内容,:init属性用于传递编辑器的配置,包括插件、工具栏、语言等设置。此外,您还定义了一个images_upload_handler函数来处理图片上传。

在页面中使用tinymce-editor组件

在您的页面中,您使用了el-form组件来构建表单,并在其中使用了editor-vue组件(假设这是您对tinymce-editor组件的局部注册名称)来集成tinymce编辑器。您通过:value属性绑定表单数据,并使用@input事件监听编辑器内容的变化,以更新表单数据。

html 复制代码
<el-form :model="addform" :rules="rules" ref="addform">
  <!-- ... 其他表单字段 -->
  <el-form-item label="工作内容" :label-width="formLabelWidth" prop="situationText">
    <editor-vue class="editor" :value="addform.situationText" @input="(res)=> addform.situationText = res"></editor-vue>
  </el-form-item>
  <!-- ... 其他表单字段 -->
</el-form>
相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
nihui1237 小时前
Uniapp 实现顶部标签页切换功能?
javascript·vue.js·uni-app
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
shengmeshi8 小时前
vue3项目img标签动态设置src,提示:ReferenceError: require is not defined
javascript·vue.js·ecmascript
BillKu8 小时前
vue3中<el-table-column>状态的显示
javascript·vue.js·elementui
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
*TQK*10 小时前
✨1.HTML、CSS 和 JavaScript 是什么?
前端·javascript·css·html
优联前端10 小时前
DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方DeepSeek接入)
javascript·pycharm·ai编程·前端开发·优联前端·deepseek
萧大侠jdeps10 小时前
el-select 添加icon
前端·javascript·vue.js