vue 引入tinymce编辑器

新来一需求 说要在后台管理里添加富文本 之前用了百度富文本 打包失败boss这么跟我说的 开始pingvue 富文本 这里需要提到的是 富文本会将上传的图片转成base64 保存时数据库压力太大 所以建议写成我这样 先上传到服务器然后生成个标签写进去 这样最好

tinymce 有vue组件 果断用起来
github - vue-tinymce

基本步骤

建议一步一步来 别直接粘贴代

1. 安装 一下两个包

    "@tinymce/tinymce-vue": "^2.0.0"
    "tinymce": "^5.0.6"

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

2. 下载中文包

语言设置链接

3. 将node_moudles里面tinymce里的skins文件复制
   

   

   皮肤引入

4. 将上述上个操作文件 放入一个目录下 我这里是public根据你的项目文件结构来定

我的中文包是在tinymce里跟skins一个层级

请注意上下层结构

组件内容

设置内容基本都在备注里

5. 引入

import TinymceEditor from '@/components/tiny-editor'

6. 使用

 //事件

最终界面

界面 - 工具栏可以自己引入插件

• 与这篇无关 如果有同学跟我一样是新手 在组件引入的时候因为相对绝对路径想死的 请看这个webpack配置 在webpack.config.js里改路径

 alias: {
    "@src":path.resolve("src"),
    "@component":path.resolve("src/component"),
    "@pages":path.resolve("src/pages"),
    "@utils":path.resolve("src/utils"),
    }

从此没遇到过任何引入相关的问题 开心

这篇没看明白的可以看一下链接 我也是从这里学习到很多

-作者直接打包 看的明明白白

-codesandbox 案例

遇到问题或卡住 请指出