vue 2.0使用tinymce-vue富文本

原创

已于 2022-10-19 11:12:36 修改 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-10-19 11:04:49 首次发布

这篇博客详细介绍了如何在Vue3.0和Vue2.0项目中集成TinyMCE富文本编辑器。首先，针对不同Vue版本提供了具体的npm安装步骤，包括复制皮肤文件到public目录及加载中文语言包。然后，展示了如何在组件中封装并使用TinyMCE，包括引入各种插件和设置编辑器配置。最后，给出了组件在页面中的使用示例，便于其他开发者快速理解和应用。

npm下载，如果是vue3.0版本执行以下代码

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

vue2.0使用以下npm安装

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

安装完成后需要把node_modules下的tinymce下的skins文件夹复制粘贴到与node_modules同级 public 文件夹下备用。

因为富文本默认是英文的，所以需要去官网下载对应语言包,里面包含了大部分国家的语言，下载完成后是一个js文件，中文包名是zh_CN.js

官网下载 https://www.tiny.cloud/get-tiny/language-packages/

目录如图：
在这里插入图片描述

准备一份TinyMce 中文资源包
链接：

https://blog.youkuaiyun.com/zqlbanzhuan/article/details/127403277?spm=1001.2014.3001.5502

之后在vue项目中封装页面使用：

<template>
  <div class="tinymce-editor">
    <editor :id="randonId" v-model="editorContent" :init="init"></editor>
  </div>
</template>

最低0.47元/天解锁文章