vue中使用wangeditor实现富文本编辑(超详细~~)
先看看效果1.安装wangeditor包npm installwangeditor2.项目中使用// html中<div ref="editorElem" class="editorElem"></div>// script中<script>import Editor from 'wangeditor'export derault {data () {retur
·
先看看效果
1.安装wangeditor包
npm install wangeditor
2.项目中使用
// html中
<div ref="editorElem" class="editorElem"></div>
// script中
<script>
import Editor from 'wangeditor'
export derault {
data () {
return {
editor: null, // 富文本框实例
}
},
methods: {
// 过滤复制word文档中的结果异常问题
pasteTextHandle(content) {
if (content == '' && !content) return ''
var str = content;
str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '')
str = str.replace(/<style>[\s\S]*?<\/style>/ig, '')
str = str.replace(/<!--[\s\S]*?endif]-->/ig, '')
return str
}
},
mounted () {
this.editor = new Editor(this.$refs.editorElem)
this.editor.customConfig.colors = [
'#000000',
'#eeece0',
'#1c487f',
'#4d80bf',
'#c24f4a',
'#8baa4a',
'#7b5ba1',
'#46acc8',
'#f9963b',
'#ffffff',
'red'
]
// 使用 base64 保存图片
this.editor.customConfig.uploadImgShowBase64 = true
// 编辑器的事件,每次改变会获取其html内容
this.editor.customConfig.onchange = html => {
let vdom = document.createElement('div')
// this.pasteTextHandle处理html中的复制word的xml问题
this.addQform.answer = this.pasteTextHandle(html)
vdom.innerHTML = this.pasteTextHandle(html)
vdom.remove()
}
this.editor.customConfig.menus = [
// 菜单配置
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
// 'link', // 插入链接
// 'list', // 列表
'justify', // 对齐方式
// 'quote', // 引用
// 'emoticon', // 表情
'image' // 插入图片
// 'table', // 表格
// 'code', // 插入代码
// 'undo', // 撤销
// 'redo' // 重复
]
this.editor.create() // 创建富文本实例
},
}
</script>
通过以上方式就可以实现一个富文本的功能。
更多推荐
已为社区贡献1条内容
所有评论(0)