Nuxt集成tinymce-editor5.2.0富文本编辑器引入

引入方式跟VUE的其实差不多,关键在于 Nuxt是服务端刷新页面 所以拿不到引入的文件导致NUXT报错。

插件安装:

1.安装tinymce-vue

npm install @tinymce/tinymce-vue -S

2.下载tinymce

npm install tinymce -S

3.下载的时候可以先在static下面建个目录tinymce,下载tinymce完成后在node_modules 中找到 tinymce/skins目录,将其复制到static\tinymce目录

4.下载中文语言包:tinymce提供了很多的语言包,这里我们下载中文语言包 (进去后找到 Chinese下载)然后解压文件将文件放入tinymce目录

Nuxt集成tinymce-editor5.2.0富文本编辑器引入_第1张图片


5.新建一个目录 tinymce-editor 组件(这里我封装了一个组件,方便以后直接调用)

Nuxt集成tinymce-editor5.2.0富文本编辑器引入_第2张图片

直接附上代码:这是封装的 Editor 组件 (只适用于 5.2.0版本,低版本的 需要改一些 地址路径 其他应该没区别)。


6.这样调用上面的组件 就可以了。如下图:

Nuxt集成tinymce-editor5.2.0富文本编辑器引入_第3张图片

7.封装完后在引用 页面就出来了 很完美。


Nuxt集成tinymce-editor5.2.0富文本编辑器引入_第4张图片

你可能感兴趣的:(Nuxt集成tinymce-editor5.2.0富文本编辑器引入)