vue使用wangeditor富文本的使用

vue使用 wangeditor富文本的使用

开始使用

首先要把wangeditor.js引入到项目里面。
第一种 ：方式就是直接下载wangeditor.js文件通过script引入，点击 https://github.com/wangfupeng1988/wangEditor/releases 下载最新版。进入release文件夹下找到wangEditor.js或者wangEditor.min.js即可
第二种 ：就是通过 npm install wangeditor 下载

第一种 只有一个容器，编辑器跟导航栏一体

html页面

<div id="editor1" class="editor-box"></div>

js代码

// 使用npm下载的方式 。首先要先引入
import Editor from 'wangeditor'
// 设置内容，初始化富文本编辑器在mounted中初始化
mounted () {
this.editor = new Editor('#editor1')
this.editor.create()
}
// 获取內容 有两种方式 可以使用 html 或者text方式获取
this.editor.txt.html()
this.editor.txt.text()
// 可以改变导航栏显示的功能
// 例如我只想展示我想要的，通过customConfig属性即可
this.editor.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'justify' // 对齐方式
]
// 渲染返回的数据也是可以使用 html 或者text
let str = '今天天气真晴朗'
this.editor.txt.html(str)
this.editor.txt.text(str)

第二种 有两个容器，编辑器跟内容分离

<div id="editor1" class="editor-box"></div>
<div id="editor2" class="editor-box content"></div>

this.editor = new Editor('#editor1', '#editor2')
this.editor.create()
// 其他操作跟第一种一样

想要查看更多详情可以看：https://www.kancloud.cn/wangfupeng/wangeditor3/335775

最后

以上就是火星上花生为你收集整理的vue使用wangeditor富文本的使用的全部内容，希望文章能够帮你解决vue使用wangeditor富文本的使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。