wangeditor富文本编辑器
< el- dialog
: title= "dialogTitle"
: visible. sync= "detailDialogVisible"
append- to- body
top= "10vh"
width= "50%" >
< Toolbar
style= "border-bottom: 1px solid #ccc"
: editor= "editor"
: defaultConfig= "toolbarConfig"
: mode= "mode"
/ >
< Editor
style= "height: 500px; overflow-y: hidden;"
v- model= "html"
: defaultConfig= "editorConfig"
: mode= "mode"
@onCreated= "onCreated"
/ >
< div class = "determine-btn" >
< el- button
type= "primary"
@click= "confirmBtn" > 确定
< / el- button>
< / div>
< / el- dialog>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import "@wangeditor/editor/dist/css/style.css" ;
components : {
Editor,
Toolbar
} ,
data ( ) {
return {
editor : null ,
html : '<p>hello</p>' ,
toolbarConfig : { } ,
editorConfig : { placeholder : '请输入内容...' } ,
mode : 'default' ,
detailDialogVisible : false ,
dialogTitle : "编辑" ,
}
}
methods : {
onCreated ( editor ) {
this . editor = Object. seal ( editor)
} ,
}
mounted ( ) {
this . html = '请输入内容</p>'
} ,
beforeDestroy ( ) {
const editor = this . editor
if ( editor == null ) return
editor. destroy ( )
}