效果:能够实现上传图片等功能
第一步:引入vue和tinymce
-
tinymce需要从官网上下载到本地,官网地址
http://tinymce.ax-z.cn/download-all.php
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src='./lib/tinymce/js/tinymce/tinymce.min.js'></script>
第二步:封装组件
components: {
tinymce: {
props: ['value'],
data() {
return {
flag: true
}
},
watch: {
value(val) {
if (this.flag) {
tinyMCE.activeEditor.setContent(val);
console.log('val', val);
}
this.flag = true;
}
},
mounted: function () {
var component = this;
tinymce.init({
target: this.$el.children[0],
language: "zh_CN",//汉化版,需要先下载插件
menubar: false,//隐藏菜单栏
branding: false,
forced_root_block: '',//不默认添加p标签
// elementpath: false,//隐藏底栏的元素路径
// 允许使用的标签,不要设置,太坑了
// valid_elements: "p[style],span[style],ul,ol,li,strong/b,em,h1,h2,h3,h4,h5,h6,img[style]",
// // 允许使用的css,不要设置,太坑了
// valid_style: {
// "*": "color,font_size,text-align,line-height,src,width,height"
// },
// lineheight 行高设置 ,使用前需要先引用插件
plugins: "code,textcolor,lists,fullscreen,image,searchreplace,table,charmap,hr",
toolbar: [
'undo redo | formatselect | charmap bold italic forecolor fontsizeselect | alignleft aligncenter alignright | bullist numlist lineheightselect | code removeformat | image searchreplace table hr | fullscreen '
],
// removeformat 删除格式 searchreplace 查找替换
images_upload_handler: function (blobInfo, succFun, failFun) {
var xhr, formData;
var file = blobInfo.blob();//转化为易于理解的file对象
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
//上传图片的路径,需要后端提供结构
xhr.open('POST', '/admin/ExamUpload/imageUp.php');
xhr.onload = function () {
var json;
json = JSON.parse(xhr.responseText);
succFun(json.data.src);
};
formData = new FormData();
formData.append('file', file, file.name);//此处与源文档不一样
xhr.send(formData);
},
setup: function (editor) {
editor.on('change input undo redo execCommand image', function (e) {
component.flag = false;
component.$emit('input', editor.getContent());
})
},
});
},
template: `<div><textarea style="height:300px;width:800px" v-model="value"></textarea></div>`
}
}
第三步:使用组件
<div class="demo">
<tinymce v-model="question_title">请填写试题标题</tinymce>
</div>
版权声明:本文为qdcainiao原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。