本篇文章给大家分享的是有关wangEditor怎么在vue中使用,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
& lt; template>
& lt;才能div>
,,,& lt; div id=癳ditor",类=癳ditor"祝辞& lt;/div>
& lt;才能/div>
& lt;/template>
& lt; script>
import E 得到& # 39;wangeditor& # 39;
export default {
,,名字:& # 39;编辑# 39;
mounted 才能;(),{
,,,var editor =, new E(& # 39; #编辑# 39;)
,,,editor.customConfig.onchange =, (html),=祝辞,{
,,,,,this.formArticle.content =, html
,,,}
,,,editor.create ()
,,}
}
& lt;/script> 效果如图
& lt; template>
& lt;才能div>
,,,& lt; div id=癳ditorMenu",类=癳ditorMenu"祝辞& lt;/div>
,,,& lt; div id=癳ditor",类=癳ditor"祝辞& lt;/div>
& lt;才能/div>
& lt;/template> & lt; script>
import E 得到& # 39;wangeditor& # 39;
export default {
,,名字:& # 39;编辑# 39;
mounted 才能;(),{
,,,var editor =, new E (& # 39; # editorMenu& # 39;,, & # 39; #编辑# 39;)
,,,editor.customConfig.onchange =, (html),=祝辞,{
,,,,,this.formArticle.content =, html
,,,}
,,,editor.create ()
,,}
}
& lt;/script> & lt; style scoped>
.editorMenu {
,边界:1 px solid # ccc;
}
.editor {
,margin-top: 1 px;//将多出来的一像素边框隐藏
,边界:1 px solid # ccc;
,最低高度:400 px;//编辑框最小高度
,高度:汽车;//编辑框高度超过最小高度会根据内容高度自适应
}
& lt;/style> <强> 3,上传图片
(1) editor.customConfig。uploadImgShowBase64=true ,//使用base64保存图片
(2) editor.customConfig。uploadImgServer=& # 39;/上传# 39;//上传服务器端地址
/上传是上传图片的服务器端接口,接口返回的数据格式如下(固定的,否则会取不到图片地址! ! !):
{//才能,errno 即错误代码,0,表示没有错误。//,,,,,,如果有错误,errno !=, 0,可通过下文中的监听函数,fail 拿到该错误码进行自定义处理
“errno"才能:,0,//才能,data 是一个数组,返回若干图片的线上地址
“data"才能:,
,,,“图1片地址“,
,,,“图2片地址“,
,,,,……“
,,)
} 这些基本就够用了。官网也写得很详细滴
<强> wangeditor3 + vue2.0简单例子
把wangeditor作为组件的形式使用
子组件中
& lt; template>
& lt;才能div id=皐angeditor"比;
,,,& lt; div ref=癳ditorElem",祝辞& lt;/div>
& lt;/div>才能,
& lt;/template>
& lt; script>
,import E 得到& # 39;wangeditor& # 39;
,export default {
,,,的名字:& # 39;editorElem& # 39;
,,data (), {
,,,return {
,,,,editorContent:, & # 39; & # 39;
,,,}
,,},
,,道具:[& # 39;catchData& # 39;],,,//接收父组件的方法
,才能安装(),{
,,,,var editor =, new E(这一点。refs.editorElem美元),,,,//创建富文本实例
,,,,editor.customConfig.onchange =, (html),=祝辞,{
,,,,,,this.editorContent =, html
,,,,,,this.catchData (html),//把这个html通过catchData的方法传入父组件
,,,,}
,,,,editor.customConfig.uploadImgServer =, & # 39;你的上传图片的接口& # 39;
,,,,editor.customConfig.uploadFileName =, & # 39;你自定义的文件名& # 39;
,,,,editor.customConfig.uploadImgHeaders =, {
,,,,,,& # 39;接受# 39;:,& # 39;*/* & # 39;
,,,,,,& # 39;授权# 39;:& # 39;Bearer & # 39;, +, token ,//头部令牌
,,,,}
,,,,editor.customConfig.menus =,(,,,,//菜单配置
,,,,,,& # 39;头# 39;
,,,,,,& # 39;列表# 39;,,//,列表
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
