富文本 tinymce 和 Vue.2.x

512 阅读1分钟

富文本插件tinymce

1. 删除package-lock.json(先从2开始执行,有如下报错再来这里)

- npm install一直失败,告知使用root/administrator权限操作,删除package-lock.js就好了。

2. npm install tinymce --S

- 可以用CDN,我的是局域网,生产环境可能没有外网环境。

3. npm install @tinymce/tinymce-vue@3

- 集成的Vue,可以直接使用Editor组件,否则就要用textarea标签

4. 将node_modules中的tinymce文件拷贝到public中

- 配置中的lang的URL啥的路径都是/tinymce/...

5. 去tinymce下载汉化包放到public/tinymce/lang/ch_CN.js

6. 创建tinymce.vue组件(最后一部,待更新,我先去刷牙洗脸···)

<template>
    <div id="tinymceId"></div>  
</template>
<script>
    import 'tinymce' from 'tinymce/tinymce'
</script>