node安装的同学请直接用我本文的demo,原作者的demo好像有一点点小问题,本文demo是我修改过的,亲测可用
先敬上官网:http://www.wangeditor.com/index.html
wangeditor是一个萌新富文本编辑器,基于js和css,重点在于它轻量,如果你需要的功能不是很复杂,那么选它没错了,刚好能满足你!
第一步:先保证你的电脑中安装有node,当然使用cdn也可以,下载到本地也行,我这里用的vue-cli,顺便下载到项目依赖中了
本地下载:
https://github.com/wangfupeng1988/wangEditor/releases
cdn使用:
https://unpkg.com/wangeditor/release/wangEditor.min.js
node下载:
npm i wangeditor -S
第二步:在项目中引入该插件并定义html结构,我这里使用vue脚手架,没有使用脚手架和其他构建工具的同学可以使用script标签对插件进行引用
例如:
<div id="editor"></div>
<script type="text/javascript" src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
// 或者 var editor = new E( document.getElementById('editor') )
editor.create()
</script>
vue-cli中使用:先建立模板,然后引入插件,创建即可,可以对菜单进行配置,也可以对编辑器中的内容进行实时监听
<template>
<div id="wangeditor">
<div ref="editorElem" style="text-align:left;"></div>
</div>
</template>
<script>
import E from 'wangeditor'
export default {
name: 'Editor',
data () {
return {
editor: null,
editorContent: ''
}
},
// catchData是一个类似回调函数,来自父组件,当然也可以自己写一个函数,主要是用来获取富文本编辑器中的html内容用来传递给服务端
props: ['catchData'], // 接收父组件的方法
mounted () {
this.editor = new E(this.$refs.editorElem)
// 编辑器的事件,每次改变会获取其html内容
this.editor.customConfig.onchange = html => {
this.editorContent = html
this.catchData(this.editorContent) // 把这个html通过catchData的方法传入父组件
}
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>