vue2/vue3使用tinymce封装富文本_tinymce 二次封装-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43216105/article/details/120017788

本文介绍了如何在Vue2和Vue3项目中使用Tinymce进行富文本编辑器的封装。针对Vue2，讲解了安装、配置静态资源、组件页面的创建以及调用页面时的注意事项，特别提醒了防止ID冲突的问题。对于Vue3，文章同样阐述了安装步骤、配置静态资源以及组件封装和页面调用的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

tinymce官网：http://tinymce.ax-z.cn/

vue2语法

前期准备

npm/cnpm/yarn install tinymce vue @tinymce/tinymce-vue -S

{
   
  "@tinymce/tinymce-vue": "^3.0.1",
  "tinymce": "^5.8.2",
  "vue": "2.6.10",
}

配置页面 - 项目public公共部分存放tinymce的中英翻译，皮肤等静态资源；

从node_model中直接赋值到项目中
在这里插入图片描述

组件页面

<template>
  <div class="tinymce-editor">
    <Editor
      :id="tinymceId"
      v-model="myValue"
      :init="init"
      :disabled="disabled"
      @onClick="onClick"
    />
  </div>
</template>

<script>
import axios from 'axios'
import tinymce from 'tinymce/tinymce' // tinymce默认hidden，不引入不显示
import Editor from '@tinymce/tinymce-vue' // 编辑器引入
import 'tinymce/themes/silver/theme' // 编辑器主题
import 'tinymce/icons/default' // 引入编辑器图标icon，不引入则不显示对应图标

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/axupimgs'

const fonts = [
  '宋体=宋体',
  '微软雅黑=微软雅黑',
  '新宋体=新宋体',
  '黑体=黑体',
  '楷体=楷体',
  '隶书=隶书',
  'Courier New=courier new,courier',
  'AkrutiKndPadmini=Akpdmi-n',
  'Andale Mono=andale mono,times',
  'Arial=arial,helvetica,sans-serif',
  'Arial Black=arial black,avant garde',
  'Book Antiqua=book antiqua,palatino',
  'Comic Sans MS=comic sans ms,sans-serif',
  'Courier New=courier new,courier',
  'Georgia=georgia,palatino',
  'Helvetica=helvetica',
  'Impact=impact,chicago',
  'Symbol=symbol',
  'Tahoma=tahoma,arial,helvetica,sans-serif',
  'Terminal=terminal,monaco',
  'Times New Roman=times new roman,times',
  'Trebuchet MS=trebuchet ms,geneva',
  'Verdana=verdana,geneva',
  'Webdings=webdings',
  'Wingdings=wingdings,zapf dingbats'
]
export default {
     
  components: {
     
    Editor
  },
  props: {
     
    // 内容
    value: {
     
      type: String,
      default: ''
    },
    tinymceId: {
     
      type: String,
      default: 'tinymce'
    },
    // 是否禁用
    disabled: {
     
      type: Boolean,
      default: false
    },
    // 插件
    plugins: {
     
      type: [String, Array],
      default: 'advlist autolink link image lists charmap  media wordcount'
    },
    // 工具栏
    toolbar: {
     
      type: [String, Array],
      default:
        'undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table'
    }
  },
  data() {
     
    return {
     
      myValue: this.value,
      init: {
     
        selector: '#tinymce',
        language_url: process.env.VUE_APP_BASE_PUBLIC_URL + '/tinymce/langs/zh-cn.js', // 汉化路径是自定义的，一般放在public或static里面
        language: 'zh_CN',
        skin_url: process.env.VUE_APP_BASE_PUBLIC_URL + '/tinymce/skins/', // 皮肤
        plugins: this.plugins, // 插件
        toolbar: this.toolbar,// 工具栏