参考TinyMce中文文档
因为要使用TinyMce图片批量上传插件,如果使用npm导入tinyMce会无法使用,所以得另外导入应用
1.下载tinyMce 放入 assets文件夹中
2.新建公用组件tinymce.vue
//views/Public/tinymce.vue
<template>
<div class="tinymce-box">
<div id="tinymce" :key="tinymceFlag"></div>
</div>
</template>
<script>
export default {
name: 'tinymce',
props: {
value: {
type: String,
default: '',
},
height: {
type: Number,
default: 900,
},
},
data() {
return {
tinymceFlag: 1, //是防止组件缓存导致编辑器不能正常使用,每次切换来都更改key,使其重新渲染
};
},
mounted() {
this.init();
},
created() {},
methods: {
init() {
tinymce.init({
selector: '#tinymce',
language: 'zh_CN',
paste_data_images: false,
paste_enable_default_filters: false,
convert_fonts_to_spans: false, // 转换字体元素为SPAN标签,默认为true
lineheight_val: '1 1.5 1.6 1.75 1.8 2 3 4 5',
language_url: 'tinymce/langs/zh_CN.js',
language: 'zh_CN',
skin_url: 'tinymce/skins/ui/oxide',
// skin_url: 'tinymce/skins/ui/oxide-dark',//暗色系
font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
height: this.height,
forced_root_block: 'p',
plugins: 'lists image axupimgs media table wordcount axupimgs lineheight hr link anchor pagebreak emoticons code preview paste ',
toolbar: 'code preview paste formatselect fontselect | undo redo | fontsizeselect | lineheight | bold italic underline strikethrough subscript superscript forecolor backcolor blockquote bullist numlist | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat hr link anchor pagebreak lists image axupimgs media table formatpainter ',
branding: false,
fontsize_formats: '10px 11px 12px 14px 15px 16px 18px 24px 36px',
menubar: 'file edit insert view format table tools help',
//清除格式
paste_auto_cleanup_on_paste: true,
paste_remove_styles: true,
paste_remove_styles_if_webkit: true,
paste_strip_class_attributes: true,
// 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
images_upload_handler: (blobInfo, success, failure) => {
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', '接口地址');
formData = new FormData();
formData.append('upfile', blobInfo.blob());
formData.append('type', 'image');
xhr.onload = function (e) {
var json;
if (xhr.status != 200) {
failure('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(this.responseText);
if (!json || typeof json.url != 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
success(json.url);
};
xhr.send(formData);
},
});
//解决渲染速度快慢
setTimeout(() => {
tinymce.editors['tinymce'].setContent(this.value);
}, 1000);
},
getData() {
let data = tinymce.editors['tinymce'].getContent();
this.$emit('data', data);
},
},
watch: {
value(val) {
tinymce.editors['tinymce'].setContent(val);
},
},
activated() {
// 每次都给编辑器改变不同的key值使其每次切换页面都重新加载
this.tinymceFlag++;
},
beforeDestroy() {
tinymce.editors['tinymce'].destroy();
},
};
</script>
<style scoped></style>
3.使用多图片批量上传
[图片批量上传](http://tinymce.ax-z.cn/more-plugins/axupimgs.php)
4. public下面也塞一下tinymce