vue项⽬中使⽤tinymce编辑器的步骤详解Tinymce富⽂本也是⼀款很流⾏编辑器
把⽂件放在static下，然后在index.html⽂件中引⼊这个⽂件
<script src="static/tinymce/tinymce.min.js"></script>
<tinymce :height=200 ref="editor" v-model="editForm.fdcNote"></tinymce>
在其他⼦⽂件中引⼊这个
import tinymce from '../components/Tinymce';
components: {
tinymce
},
然后就可以调⽤起这个组件了。
下⾯看下vue项⽬中使⽤tinymce编辑器的⽅法，具体内容如下所⽰：
第⼀步：npm install tinymce -S
第⼆步：创建组件
//增加模版
<template>
<div>
<textarea :value="value"></textarea>
</div>
</template>
//在script中引⼊
import tinymce from "tinymce/tinymce";
import "tinymce/themes/modern/theme";
import "tinymce/plugins/paste";//这个到最下⾯那个为需要使⽤的⼯具栏模块
import "tinymce/plugins/link";
import "tinymce/plugins/lists";
import "tinymce/plugins/image";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
优秀的富文本编辑器
import "tinymce/plugins/textcolor";
import "tinymce/plugins/media";
第三步：对tinymce进⾏个性化配置
tinymceinit() {
const _this = this;
const setting = {
selector: "#tinymce",
language: "zh_CN",//语⾔设置中⽂
menubar: false,//去除⽂件栏
branding: false,//去除右下⾓的'由tinymce驱动'
elementpath: false,//左下⾓的当前标签路径
content_css: ["css⽂件路径"],//对编辑器内部需要的⼀些样式
language_url: "zh_CN.js⽂件的路径",//导⼊中⽂语⾔⽂件
skin_url: "../../../static/skins/lightgray",//在node_modules中tinymce⽂件夹中
setup: function(editor) {//设置⾃定义功能的按钮
editor.addButton("uploadimg", {//单个按钮，此处的uploading是该按钮的名称
icon: "image",  //显⽰的图像
tooltip: "上传图⽚",//⿏标放上去后现在是内容
onclick: function() {}
});
editor.addButton("geshi", {//按钮列表，此处的geshi是该按钮的名称
text: "格式",  //显⽰的⽂字
type: "menubutton",
menu: [
{
text: "标签",
onclick: function() {}
}
]
});
},
plugins:
"lists paste link image contextmenu wordcount colorpicker textcolor media imagetools",//对应上⽅import引⼊的⽂件，下⾯toolbar需要使⽤到
toolbar:
"geshi bold bullist numlist | uploadimg | alignleft aligncenter alignright alignjustify outdent indent"//定义⼯具栏
};
Object.assign(setting, _this.setting);
tinymce.init(setting);
},
第四步：在watch中监听传⼊的value，并修改tinymce的内容
value(newV, oldV) {
tinymce.activeEditor.setContent(newV);
},
其他：设置图⽚
第⼀种：使⽤tinymce提供的接⼝
images_upload_handler: function (blobInfo, success, failure) {
//blobInfo图⽚对象
uploadimg(){ //上传图⽚(⾃⼰写的⽅法)
success('图⽚的路径')
failure('错误提⽰')
}
}
第⼆种：我⾃⼰使⽤的⽅法，简单说⼀下思路
1.使⽤setup⾃定义⼀个按钮，按钮的点击事件就是选择图⽚(参考input,type=file)，并上传
2.将服务器返回的路径包装成<img src='返回的路径'>
3.将⾃⼰包装的img标签放⼊⿏标当前指针处
let dom = tinymce.activeEditor.dom;
总结
以上所述是⼩编给⼤家介绍的vue项⽬中使⽤tinymce编辑器的步骤详解，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。