当前位置：首页 > news >正文

Vue 安装 wangEditor 富文本编辑器

news 来源：原创 2025/6/8 21:04:41

最近遇到Vue项目需要添加一个富文本编辑，纠结了好久，最后选择 wangEditor ，然后整理了一些wangEditor 的使用教程

1.安装

npm install @wangeditor/editor --save

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

2.使用

<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>

<!-- 一定要记得引入style -->
<style src="@wangeditor/editor/dist/css/style.css"></style>

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

  export default Vue.extend({
    components: { Editor, Toolbar },
    data() {
      return {
        editor: null,
        html: '<p>hello</p>',
        toolbarConfig: {
            toolbarKeys : ['bold', 'underline', 'headerSelect', 'italic', 'through', 'code', 'sub', 'sup', 'clearStyle', 'color', 'bgColor', 'fontSize', 'fontFamily', 'indent', 'delIndent', 'justifyLeft', 'justifyRight', 'justifyCenter', 'justifyJustify', 'lineHeight',  'divider', 'insertLink', 'codeBlock', 'blockquote','redo', 'undo', 'fullScreen',  'bulletedList', 'numberedList', 'insertTable'
        ]
      },
        editorConfig: { placeholder: '请输入内容...' },
        mode: 'default', // or 'simple'
      }
    },
    methods: {
      onCreated(editor) {
        this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错

        //打印所有工具
        //console.log(this.editor.getAllMenuKeys());
      },
    },
    mounted() {
      // 模拟 ajax 请求，异步渲染编辑器
      setTimeout(() => {
        this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
      }, 1500)
    },
    beforeDestroy() {
      const editor = this.editor
      if (editor == null) return
      editor.destroy() // 组件销毁时，及时销毁编辑器
    },
  })
</script>

复制以上代码，即可在页面上使用富文本编辑器

但是功能并非上面这一点点，内含很强大功能，有的功能只有在使用的时候，才会去研究。

文档如下：

官方教程

wangEditor官网

Github地址