vue3中使用富文本编辑器tinymce

 

目录

• 下载安装
• 准备工作
• 组件引用

 

下载安装

npm i tinymce @tinymce/tinymce-vue -S

准备工作

在node_modules中找到文件夹tinymce/skins，将它复制到项目目录中（新建一个存放该文件的目录static）；
然后去官网下载中文包zh_CN.js，并保存到目录static/langs中。

组件引用

在vue组件中引用tinymce

<template>
<div>
  <editor v-model="content" :init="init"/>
</div>
</template>

<script>
import { ref, watch, onMouted } from 'vue'
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'; // 引用主题文件
import 'tinymce/icons/default'; // 引用图标文件
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
export default {
  components: {
    'editor': Editor
  },
  setup() {
    const content = ref('');
    const init = {
      language_url: require("./static/langs/zh_CN.js"), // 中文语言包路径
      language: "zh_CN",
      skin_url: require("./static/skins/ui/oxide/skin.css"), // 编辑器皮肤样式
      menubar: false, // 隐藏菜单栏
      height: 320,
      toolbar_mode: "none",
      plugins: 'image link code table lists', // 插件需要import进来
      toolbar: 'fontselect fontsizeselect | link lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image quicklink h2 h3 blockquote table numlist bullist preview fullscreen',
      content_style: "p {margin: 5px 0; font-size: 14px}",
      fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
      font_formats: "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
      branding: false,
      elementpath: false,
      resize: false, // 禁止改变大小
      statusbar: false, // 隐藏底部状态栏
    };
    
    // 监听编辑器内容变化，自定义处理内容
    watch(() => content.value, (value) => {
      // TODO
    })

    onMounted(() => {
      tinymce.init(); // 初始化
    })

    return {
      content,
      init,
    }
  }
}
</script>