1.安装
# npm install tinymce -S
2.把node_modules\tinymce里面的文件 包括tinymce文件夹 全部复制到static文件夹下面
3.在mian.js中引入tinymce(也可以在组件中引入)
import Tinymce from 'tinymce'
Vue.prototype.$tinymce = Tinymce;
4.完整代码
<template>
<div class="SEditor">
<textarea class="my_editor" id="Editor" v-model="Editortext"></textarea>
</div>
</template>
<script>
export default {
data() {
return {
Editortext:'',
}
},
mounted() {
this.tinymce();
},
beforeDestroy() {
//这个必须要加,不然初始化的时候会有问题
this.$tinymce.remove()
},
methods: {
tinymce() {
let _this = this;
//这一句代码是重点 不写会报错theme.js:1 Uncaught SyntaxError: Unexpected token <
_this.$tinymce.baseURL = '/static/tinymce'
_this.$tinymce.init({
selector: "#Editor",
language_url: '../../../../static/tinymce/zh_CN.js',//设置中文
language: 'zh_CN',
plugins: [ //配置插件:可自己随意选择,但如果是上传本地图片image和imagetools是必要的
'advlist autolink link image lists charmap preview hr anchor pagebreak ',
],
//工具框,也可自己随意配置
toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image ',
image_advtab: true,
table_default_styles: {
width: '100%',
borderCollapse: 'collapse'
},
image_title: false, // 是否开启图片标题设置的选择,这里设置否
automatic_uploads: true,
// 图片异步上传处理函数
images_upload_handler: (blobInfo, success, failure) => {
var formData;
formData = new FormData();
formData.append('images',blobInfo.blob(), blobInfo.filename());
// _this.$api.uploadScenicFace这个是我调用后台图片上传接口的函数
_this.$api.uploadScenicFace(formData, _this.token, function(data) {
// 图片上传成功以后调用success,图片就可以在富文本编辑器中显示了
success(data.url);
});
},
init_instance_callback: function(editor) {
editor.on('keyup', () => {
// 获取富文本编辑器里面的内容
_this.Editortext = editor.getContent();
});
}
}).then(resolve => {
// 初始化富文本编辑器里面的内容
resolve[0].setContent(_this.Editortext)
});
},
}
}
</script>
5.纠错
theme.js:1 Uncaught SyntaxError: Unexpected token <
设置一下baseURL
_this.$tinymce.baseURL = '/static/tinymce'
更多功能配置可以到官方网站上进行查看https://www.tiny.cloud/docs/api/tinymce/root_tinymce/
完整实例:https://gitee.com/songtaohong/tinymce.git
新封装的vue-tinymce
传送门:https://blog.csdn.net/vipsongtaohong/article/details/118755976