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

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

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

vue2中使用wangEditor(JS引入)_第1张图片

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

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


第三步:使用

html中

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

vue2中使用wangEditor(JS引入)_第2张图片

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

你可能感兴趣的:(❤️❤️--vue2,wangeditor)