我们打开链接: npm包管理网站 . 打开cmd命令行或者bash工具 ,如果你是windows下载node的msi自动配置好环境变量,linux的话直接百度//输入 npm i wangeditor 下载wangeditor
npm i wangeditor
我们找到element ui 的componets文件夹创建Wangeditor的文件夹,在Wangeditor下创建index.vue.如图所示
compoents
Wangeditor
index.vue
index.vue中加入代码块 下面展示一些 index.vue全部内容,复制即可
。
< template>
< div>
< div ref= "editor" : id= "id" : style= "styleObject" > < / div>
< / div>
< / template>
< script>
import E from 'wangeditor'
export default {
name : 'editor' ,
props : [ 'id' , 'value' , 'width' , 'height' , 'uploadImgUrl' , 'disabled' , 'menus' , 'mapKey' , 'menuFixed' , 'pasteFilter' , 'codeDefaultLang' , 'hideLinkImg' , 'uploadParams' , 'uploadHeaders' , 'isRealtime' , 'disabledMenus' , 'uploadVideoServer' ] ,
data ( ) {
return {
styleObject : {
width : this . width,
height : this . height
} ,
editor : null
}
} ,
methods : {
createEditor ( ) {
let _this = this
this . editor = new E ( this . $refs. editor)
this . editor. config. pasteFilter = false
this . editor. config. width = this . width
this . editor. config. height = this . height
this . editor. config. uploadImgServer = this . uploadImgUrl
this . editor. config. uploadImgHeaders = this . uploadHeaders
this . editor. config. uploadFileName = 'image'
this . editor. config. showLinkImg = true
this . editor. config. uploadImgShowBase64 = true
this . editor. config. uploadImgTimeout = 5 * 1000
this . editor. config. uploadImgHooks = {
success : function ( xhr ) {
console. log ( 'success' , xhr)
} ,
fail : function ( xhr, editor, resData ) {
console. log ( 'fail' , resData)
} ,
error : function ( xhr, editor, resData ) {
console. log ( 'error' , xhr, resData)
} ,
timeout : function ( xhr ) {
console. log ( 'timeout' )
} ,
customInsert : function ( insertImgFn, result ) {
insertImgFn ( result. data)
}
}
this . editor. config. uploadVideoServer = this . uploadVideoServer
this . editor. config. uploadVideoHeaders = this . uploadHeaders
this . editor. config. uploadVideoName = 'file'
this . editor. config. showLinkVideo = true
this . editor. config. uploadVideoHooks = {
success : function ( xhr ) {
console. log ( 'success' , xhr)
} ,
fail : function ( xhr, editor, resData ) {
console. log ( 'fail' , resData)
} ,
error : function ( xhr, editor, resData ) {
console. log ( 'error' , xhr, resData)
} ,
timeout : function ( xhr ) {
console. log ( 'timeout' )
} ,
customInsert : function ( insertVideoFn, result ) {
_this. editor. cmd. do ( 'insertHTML' , ` <p><iframe src=" ${ result. data} " frameborder='0' allow='autoplay;encrypted-media' allowfullscreen style='width:300px;height:200px;'></iframe></p> ` )
}
}
if ( this . mapKey != undefined ) {
this . editor. config. mapAk = this . mapKey
}
if ( this . menus != undefined && this . menus instanceof Array && this . menus. length) {
this . editor. config. menus = this . filterMenu ( this . menus)
} else if ( this . disabledMenus) {
this . editor. config. menus = this . filterDisabledMenu ( wangEditor. config. menus, this . disabledMenus)
} else {
this . editor. config. menus = this . filterMenu ( wangEditor. config. menus)
}
if ( this . menuFixed != undefined ) {
this . editor. config. menuFixed = this . menuFixed
}
if ( this . pasteFilter != undefined ) {
this . editor. config. pasteFilter = this . pasteFilter
}
if ( this . codeDefaultLang != undefined ) {
this . editor. config. codeDefaultLang = this . codeDefaultLang
}
this . editor. create ( )
if ( this . value) {
this . setHtml ( this . value)
}
if ( this . disabled) {
this . disable ( )
}
this . listenChange ( )
} ,
filterMenu ( menus ) {
if ( menus instanceof Array ) {
return menus. map ( ( item, key ) => {
if ( item === 'source' ) {
return null
}
return item
} )
}
} ,
filterDisabledMenu ( menus, disabledMenus ) {
let menusToString = menus. join ( ',' )
disabledMenus. forEach ( ( res ) => {
menusToString = menusToString. replace ( res, '' ) . replace ( ',,' , ',' )
} )
if ( menusToString. length && menusToString[ 0 ] == ',' ) {
menusToString. substr ( 1 , menusToString. length)
}
return menusToString. split ( ',' )
} ,
insertImg ( url ) {
this . editor. command ( null , 'insertHtml' , '<img src=' + url + ' style="max-width:100%;"/>' )
} ,
getHtml ( ) {
return this . editor. txt. html ( )
} ,
getText ( ) {
return this . editor. txt. text ( )
} ,
setHtml ( text ) {
this . editor. txt. html ( text)
} ,
appendHtml ( text ) {
this . editor. txt. append ( text)
} ,
clear ( ) {
this . editor. clear ( )
} ,
enable ( ) {
this . editor. enable ( )
} ,
disable ( ) {
this . editor. disable ( )
} ,
destroy ( ) {
this . editor. destroy ( )
} ,
undestroy ( ) {
this . editor. undestroy ( )
} ,
listenChange ( ) {
this . editor. onchange = ( ) => {
this . $emit ( 'change' )
let result = ''
if ( ! this . getText ( ) ) {
result = this . getHtml ( )
}
if ( this . isRealtime !== false ) {
this . $emit ( 'input' , result)
}
}
} ,
} ,
mounted ( ) {
this . createEditor ( )
} ,
created ( ) {
} ,
beforeDestroy ( ) {
this . editor. destroy ( )
this . editor = null
}
}
< / script>
< style scoped>
< / style>
我们在需要展示的页面开始引入使用,如下 下面是展示页面直接使用的代码id是不需要的,在这里是没用的属性
。
< editor : id= "forId(details.id)" class = "editor" : uploadImgUrl= "uploadImgUrl" : uploadVideoServer= "videoUrl" : uploadHeaders= "authorization" ref= "editor" v- model= "details.remark" : menus= "menus" : width= "styleObject1.width" : height= "styleObject1.height" > < / editor>
下面我展示引入方式和配置请一定要在data的components写上name名字这个我就不叙述了
这是menus菜单配置,请参考wangeditor文档 我提供一份参考代码 这是我的配置可以复制
。
authorization : { authorization : 'Bearer ' + getToken ( ) } ,
uploadImgUrl : process. env. VUE_APP_BASE_API + '/upload/image' ,
menus : [
'head' ,
'bold' ,
'fontSize' ,
'fontName' ,
'italic' ,
'underline' ,
'indent' ,
'lineHeight' ,
'foreColor' ,
'backColor' ,
'link' ,
'list' ,
'todo' ,
'justify' ,
'quote' ,
'image' ,
'video' ,
] ,
以下就是wangeditor在elementui中的使用。如有问题请联系我
效果展示 补充说明 this.
r
e
f
s
.
e
d
i
t
o
r
.
s
e
t
H
t
m
l
(
t
h
i
s
.
t
e
m
p
.
c
o
n
t
e
n
t
)
r
e
f
可重新设置参数
t
h
i
s
.
t
e
m
p
.
c
o
n
t
e
n
t
=
t
h
i
s
.
refs.editor.setHtml(this.temp.content) ref可重新设置参数 this.temp.content = this.
re f s . e d i t or . se t H t m l ( t hi s . t e m p . co n t e n t ) re f 可重新设置参数 t hi s . t e m p . co n t e n t = t hi s . refs.editor.getHtml() 重新获取编辑器的内容 无需重新clear清除