富文本编辑器-wangEditor的使用

富文本编辑器-wangEditor的使用

https://www.wangeditor.com/

Vue2安装

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

Vue3安装

npm install @wangeditor/editor-for-vue@next --save

使用教程

模板

<template>
    <div style="border: 1px solid #ccc;">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
    </div>
</template>

script

<script>
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default Vue.extend({
    components: { Editor, Toolbar },
    data() {
        return {
            editor: null,
            html: '<p>hello</p>',
            toolbarConfig: { },
            editorConfig: { placeholder: '请输入内容...' },
            mode: 'default', // or 'simple'
        }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
    },
    mounted() {
        // 模拟 ajax 请求，异步渲染编辑器
        setTimeout(() => {
            this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
        }, 1500)
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
})
</script>

另外要引入样式

<style src="@wangeditor/editor/dist/css/style.css"></style>

这样就已经有一个富文本编辑器了。

在使用中，比如我的简历设计，文本是要求

这样显示，分析过程为：

1.从数据库取出对应信息，这里的信息应该就是包含标签格式的。

2.在vue中想显示出对应格式要使用v-html，里面填入你获取信息的名称就行，比如

<div class="grid-content bg-purple-light " style="flex-grow: 2;max-height: 190px">
  <h3>自我评价<i class="el-icon-edit" @click="handleEdit(resumeData);dialog3FormVisible=true"></i></h3>
  <div class="line"></div>
  <p v-html="resumeData.selfesteem"></p>
</div>

3.在编辑框中的内容的显示，就看你的保存的接口是怎么请求的了，

<template>
    <div style="border: 1px solid #ccc;">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="要保存的数据，我的是form.selfesteem"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
    </div>
</template>

4.就实现了富文本编辑，且在页面正确显示格式了。

（后续补充....）