轻量级富文本编辑器wangEditor结合vue使用方法示例
版权申诉
1星 142 浏览量
2020-10-17
21:25:19
上传
评论
收藏 61KB PDF 举报 
轻量级富文本编辑器轻量级富文本编辑器wangEditor结合结合vue使用方法示例使用方法示例
在我们项目中，有些时候需要使用富文本编辑器。本文将以百度开发的Ueditor结合Vue.js介绍一下。非常具有
实用价值，需要的朋友可以参考下
1、安装、安装
使用npm下载： `npm install wangeditor`
2、、 创建实例创建实例
（1）基本用法：
<template>
<div>
<div id="editor" class="editor"></div>
</div>
</template>
<script>
import E from 'wangeditor'
export default {
name: 'editor',
mounted () {
var editor = new E('#editor')
editor.customConfig.onchange = (html) => {
this.formArticle.content = html
}
editor.create()
}
}
</script>
效果如图
（2）自定义高度写法如下：把菜单和编辑框分开
<template>
<div>
<div id="editorMenu" class="editorMenu"></div>
<div id="editor" class="editor"></div>
</div>
</template>
<script>
import E from 'wangeditor'
export default {
name: 'editor',
mounted () {
var editor = new E('#editorMenu', '#editor')
editor.customConfig.onchange = (html) => {
this.formArticle.content = html
}
editor.create()
}
}
</script>
<style scoped>
.editorMenu {
border: 1px solid #ccc;
}
.editor {
margin-top: -1px;//将多出来的一像素边框隐藏
border: 1px solid #ccc;
min-height: 400px;//编辑框最小高度
height:auto;//编辑框高度超过最小高度会根据内容高度自适应
}
</style>
3、上传图片、上传图片
（1）editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
评论1
最新资源