vue2中使用富文本编辑器wangEditor4.x和5.x版本汇总

wangEditor4.x(适用安卓页面)

1.下载，这里我使用的是npm包管理器下载

npm i wangeditor --save

2.页面

<div id="editor"></div>

<script> import E from 'wangeditor'//导入编辑器 </script>

3.编辑器配置

this.editor = new E('#editor')//创建编辑器实例

//以下是配置选项，可按需删改
this.editor.config.height = 200//设置编辑器高度的代码
this.editor.config.placeholder = '请输入您的内容，最大字数1000，支持插入图片及调整排布'//设置常驻内容
this.editor.config.focus = false//设置是否加载页面后就获取焦点
this.editor.config.zIndex = 10//设置编辑器的层级
// 配置菜单栏
this.editor.config.menus = ['bold', 'head', 'fontName', 'key', 'fontSize', 'lineHeight', 'redo', 'undo', 'clearStyle',]
this.editor.config.fontNames = [
    "黑体",
     "仿宋",
     "楷体",
]
// // 监听事件
this.editor.config.onblur = function (newHtml) {
    console.log('onblur', newHtml) // 获取最新的 html 内容
}
this.editor.config.onfocus = function (newHtml) {
    console.log('onfocus', newHtml) // 获取最新的 html 内容
}
// 创建编辑区域
this.editor.create()

4.效果图

5.生成代码如下

wangEditor5.x（生成的代码就是前端的html代码适用于前端的页面）

1.下载，这里我使用的是npm包管理器下载

npm i @wangeditor/editor --save 
npm i @wangeditor/editor-for-vue --save

2.页面

<div style="border: 1px solid #ccc;">
    <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
    />
    <Editor
            style="height: 200px; overflow-y: hidden;"
            v-model="newForm.attendDescription"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated1"
    />
</div>
<script>
    import '@wangeditor/editor/dist/css/style.css';
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
    export default {
        components: {
            Navbar,
            Footer,
            draggable,
            Editor,
            Toolbar
        },
        data () {
           return:{
                editor: null,
                toolbarConfig: {/* 工具栏配置 */
                    toolbarKeys: [
                        'bold',
                        'color',
                        'fontSize',
                        'lineHeight',
                        'headerSelect',
                        '|',
                        'redo',
                        'undo',
                        'clearStyle',
                    ] },
                editorConfig: { placeholder: '请输入内容...' },
                mode: 'simple', // or 'default'
           }
       }

</script>

3.调用方法

onCreated1(editor) {
    this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
},

4.效果图

5.生成代码如下