vue2中使用wangEditor（JS引入）

本文讲的不是npm安装，是下载js本地引入哦~

想了解vue2和vue3的npm安装的，去这里：用于 Vue React | wangEditor

为了防止内网无法使用，咱不用cdn引入，直接下载js放入本地使用。

第一步：下载wangEditor对应的css和js

下载css：  https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css

下载js：https://unpkg.com/@wangeditor/editor@latest/dist/index.js

说是下载，其实是把这个链接放入浏览器地址栏，回车出现的代码，一键复制，粘贴到项目中你新建的文件里面、、、 

可以放入自己的静态资源文件夹下

 wangeditor及css和js文件夹自己创建即可

第二步：在项目的index.html中引入 

<link rel="stylesheet" href="./static/wangeditor/css/index.css">
<script src="./static/wangeditor/js/index.js"></script>

第三步：使用

html中

<div id="editor—wrapper">
       <div id="toolbar-container"><!-- 工具栏 --></div>
       <div id="editor-container"><!-- 编辑器 --></div>
</div>

data中：

data(){
    return{
        editor:null
    }
}

mehods中： 

        getEditor() {
                  const { createEditor, createToolbar } = window.wangEditor
                  const editorConfig = {
                        placeholder: 'Type here...',
                        onChange(editor) {
                              // 修改编辑器的内容时，会触发此事件
                              // editor.getHtml()用于获取当前编辑器中的内容
                              const html = editor.getHtml()
                              // 可以将获取到的html赋值出去
                              this.editContent = html
                        }
                  }
                  // 创建编辑器
                  this.editor = createEditor({
                        selector: '#editor-container',
                        html: '',
                        config: editorConfig,
                        mode: 'simple', // or 'simple'
                  })
                  const toolbarConfig = {}
                  // 
                  /**使用simple模式的工具栏，当然里面也有不想显示的工具，
                   * 可以用toolbarConfig.excludeKeys方法去排除一些自己不想
                   * 用的工具，例如图片上传、视频上传等
                   * toolbar.getConfig().toolbarKeys方法用于获取所有工具的
                   * key值，查到key值，excludeKeys里面存放的是工具对应的key值来
                  */
                  toolbarConfig.excludeKeys = [
                        "group-image",
                        "insertVideo",
                        "codeBlock",
                        "insertLink",
                        "blockquote",
                        "todo"
                  ]
                  // 定义工具栏
                  const toolbar = createToolbar({
                        editor: this.editor,
                        selector: '#toolbar-container',
                        config: toolbarConfig,
                        mode: 'simple', // or 'default'
                  })
                  console.log(toolbar.getConfig().toolbarKeys)
            },

在mounted中调用：

this.getEditor()

注意：想要回显的话，是这样：this.editor.setHtml(this.content)