1. 安装
npm install tinymce@5.1.0 -S
npm install @tinymce/tinymce-vue@3.0.1 -S // 指定该版本
2. 导入、注册
<script>
import Editor from '@tinymce/tinymce-vue'
export default {
components: {
Editor
},
}
</script>
3. 使用
<template>
<div>
<Editor v-model="content" :init="init" api-key="" />
</div>
</template>
4. 完整配置
<script>
import Editor from '@tinymce/tinymce-vue'
export default {
name: 'Editor',
components: {
Editor
},
data() {
return {
init: {
height: 400,
min_height: 400,
max_height: 600,
language_url: '/tinymce/langs/zh_CN.js',
language: 'zh_CN',
skin_url: '/tinymce/skins/ui/oxide',
toolbar_mode: 'wrap',
plugins: 'preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code',
toolbar: 'code undo redo restoredraft | cut copy paste pastetext image | forecolor backcolor bold italic underline strikethrough link anchor codesample | alignleft aligncenter alignright alignjustify outdent indent lineheight formatpainter | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | table media charmap hr pagebreak insertdatetime | fullscreen preview',
content_style: 'p {margin: 5px 0;}',
fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
font_formats:
'宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
branding: false,
init_instance_callback: editor => {
editor.on('input', e => {
this.xxx()
}),
},
images_upload_handler: (blobInfo, succFun, failFun) => {
let xhr, formData;
const file = blobInfo.blob()
const {size, type} = file
xhr = new XMLHttpRequest()
xhr.widthCredentials = false,
xhr.open('post', 'url')
xhr.setRequestHeader('Authorization', 'Your Token')
xhr.onload = function() {
let res;
if (xhr.status !== 200) {
failFun('xxx')
return
}
res = JSON.parse(xhr.responseText);
if (!res || typeof res.url !== 'string') {
failFun('xxx')
return
}
succFun(`baseURL + ${res.url}`)
}
formData = new FormData()
formData.append('file', file, file.name)
xhr.send(formData)
}
},
content: 'hello tinymce'
}
}
</script>
5. 最终效果
![效果图](https://img-blog.csdnimg.cn/e78b2ca523784a4fb46680ecd71270a9.png)
6. 优化
- 将node_modules文件夹下的 tinymce 文件全部复制到 public 文件下;
- 在文件夹下创建 langs 以用来存放中文包;
- 具体结构:
![文件结构](https://img-blog.csdnimg.cn/a41971e20d0c4fb7b0d318b7663d92d6.png)
- index.html 中引入 tinymce
<script src="/tinymce/tinymce.min.js"></script>
- 把插件全部手动导入
import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/silver';
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/autoresize';
import 'tinymce/plugins/autosave';
import 'tinymce/plugins/charmap';
import 'tinymce/plugins/code';
import 'tinymce/plugins/codesample';
import 'tinymce/plugins/colorpicker';
import 'tinymce/plugins/directionality';
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/hr';
import 'tinymce/plugins/image';
import 'tinymce/plugins/imagetools';
import 'tinymce/plugins/insertdatetime';
import 'tinymce/plugins/link';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/media';
import 'tinymce/plugins/nonbreaking';
import 'tinymce/plugins/preview';
import 'tinymce/plugins/searchreplace';
import 'tinymce/plugins/table';
import 'tinymce/plugins/template';
import 'tinymce/plugins/textcolor';
import 'tinymce/plugins/textpattern';
import 'tinymce/plugins/visualblocks';
import 'tinymce/plugins/visualchars';
import 'tinymce/plugins/wordcount';
更多插件配置参考 tinymce 官网或中文网
最后:加载速度会明显提升。