【vue开发基础】之wangeditor富文本编辑器

JS Lover

已于 2024-04-15 10:28:42 修改

阅读量1.4k

点赞数 1

分类专栏： Vue 前端文章标签： vue.js 前端 javascript

于 2022-07-08 11:00:51 首次发布

本文链接：https://blog.csdn.net/qq_43576866/article/details/125674132

版权

前端同时被 2 个专栏收录

24 篇文章 1 订阅

订阅专栏

Vue

11 篇文章 0 订阅

订阅专栏

本文档介绍了如何在Vue2项目中安装和使用wangEditor富文本编辑器。首先，通过yarn添加组件并CDN导入css和js文件。然后，在Vue的mounted生命周期钩子中初始化编辑器，设置占位符、内容变更监听等功能，并自定义工具栏配置。文章结尾鼓励读者提问和交流。

摘要由CSDN通过智能技术生成

❤ 前言

中文文档：点击此处

❤ 第一步安装

1.安装 Vue2 组件

yarn add @wangeditor/editor-for-vue

2.CDN导入

<!-- 引入 css -->
<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">

<!-- 引入 js -->
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script>
    var E = window.wangEditor; // 全局变量
</script>

❤ 第二步使用

话不多说直接上代码

 <div style="border: 1px solid #DDDDDD;">
	<div id="toolbar"></div>
	<div id="editor" style="height: 600px;border-top: 1px solid #DDDDDD;"></div>
</div>

const Editor = window.wangEditor
mounted(){
	this.initEditor()
},
methods:{
	initEditor() {
        const editorConfig = {}
        editorConfig.placeholder = '请输入内容'
        editorConfig.onChange = (editor) => {
          // 当编辑器选区、内容变化时，即触发
          console.log('html', editor.getHtml())
        }
        const editor = Editor.createEditor({
          selector: '#editor',
          config: editorConfig,
          html: this.editorContent,
          mode: 'default' // 或 'simple' 参考下文
        })
        // 工具栏配置
        const toolbarConfig = {
          toolbarKeys: [
            // 菜单 key
            'headerSelect',
            "blockquote",
            // 分割线
            '|',
            "underline",
            // 菜单 key
            'bold',
            'italic',
            // 菜单组，包含多个菜单
            {
              key: 'group-more-style', // 必填，要以 group 开头
              title: '...', // 必填
              iconSvg: '<svg>....</svg>', // 可选
              menuKeys: ["through", "code", "clearStyle"] // 下级菜单 key ，必填
            },
            "color",
            "bgColor",
            '|',
            "fontSize",
            "fontFamily",
            "lineHeight",
            '|',
            "bulletedList",
            "numberedList",
            "indent",
            "delIndent",
  
            '|',
            "emotion",
            "insertLink",
            "insertImage",
          ]
        }
        const toolbar = Editor.createToolbar({
          editor,
          selector: '#toolbar',
          config: toolbarConfig,
          mode: 'default' // 或 'simple' 参考下文
        })
      },
}