vue3 中使用tinymce

详细配置,请参考tinymce中文文档

1. 安装相关依赖

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

2. 汉化编辑器

前往此地址下载中文汉化包:
https://www.tiny.cloud/get-tiny/language-packages/
vue3 中使用tinymce_第1张图片

3. 引入皮肤和汉化包

  • 在项目public文件夹下新建tinymce文件夹,
  • 将下载的汉化包解压到此文件夹
  • 然后在node_modules/tinymce中找到skins文件夹,也复制到public/tinymce
    vue3 中使用tinymce_第2张图片

4. 封装组件:在src/components下新建TEditor.vue,并写入以下代码






5. 注册及使用组件

// 引入
import TEditor from '@/components/TEditor.vue';
// 注册
components: {
    TEditor,
  },
// 使用

vue3 中使用tinymce_第3张图片
补充:
我下载的版本是

 "@tinymce/tinymce-vue": "^4.0.5",
"tinymce": "^5.10.2",

不同版本下plugins中的内容有所不同

你可能感兴趣的:(vue,JavaScript,前端,vue.js,编辑器,javascript)