& # 65279;最近在vue项目中需要使用富文本编辑器,于是将Ueditor集成进来,作为公共组件。
项目地址:https://github.com/suweiteng/vue2-management-platform
<强> 1。放入静态资源并配置
首先把官网下载的Ueditor资源,放入静态资源src/静态中。
,修改ueditor.config.js中的window.UEDITOR_HOME_URL配置,如下图:
<强> 2。引入
在主要。js中引入
导入“. ./静态/问题/ueditor.config.js”
导入“. ./静态/问题/ueditor.all.min.js”
导入“. ./静态/问题/lang/应用/zh-cn.js '
导入“. ./静态/问题/ueditor.parse.min.js”
<强> 3。开发公共组件
开发公共组件,可设置填充内容defaultMsg,配置信息配置(宽度和高度等),并提供获取内容的方法。
& lt; template>
& lt; div>
& lt;脚本id="编辑" type=" text/plain”祝辞& lt;/script>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
名称:“问题”,
数据(){
返回{
编辑:零
}
}，
道具:{
defaultMsg: {
类型:字符串
}，
配置:{
对象类型:
}
}，
安装(){
const _this=;
这一点。编辑=问题。getEditor(“编辑器”,this.config);//初始化问题
this.editor。addListener(“准备好”,函数(){
_this.editor.setContent (_this.defaultMsg);//确保问题加载完成后,放入内容。
});
}，
方法:{
getUEContent(){//获取内容方法
返回this.editor.getContent ()
}
}，
摧毁了(){
this.editor.destroy ();
}
}
& lt;/script>
之前
<>强4。使用
当我们需要使用富文本编辑器时,直接调用公共组件即可
& lt; template>
& lt; div类=癱omponents-container”比;
& lt; div类="信息"祝辞问题编辑器示例& lt; br>需要使用编辑器时,调用问题公共组件即可。可设置填充内容defaultMsg,配置信息配置(宽度和高度等),可调用组件中获取内容的方法。;/div>
& lt;按钮@click=" getUEContent()在获取内容& lt;/button>
& lt; div类=癳ditor-container”比;
& lt;问题:defaultMsg=defaultMsg:配置=配置ref=拔侍狻痹? lt;/UE>
& lt;/div>
& lt;/div>
& lt;/template>
& lt; style>
info {
border - radius: 10 px;
行高:20 px;
填充:10 px;
保证金:10 px;
background - color: # ffffff;
}
& lt;/style>
& lt; script>
从“. ./. ./组件进口问题/问题/ue.vue”;
出口默认{
组件:{问题},
数据(){
返回{
defaultMsg:“这里是问题测试的,
配置:{
initialFrameWidth:空,
initialFrameHeight: 350
}
}
}，
方法:{
getUEContent () {
让内容=Ｃ涝猺efs.ue.getUEContent ();
通知({美元。
标题:“获取成功,可在控制台查看!’,
信息:内容,
类型:“成功”
});
console.log(内容)
}
}
};
& lt;/script>
之前
效果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
