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中引入 

第三步：使用

html中

data中：

data(){return{editor:null}
}

mehods中： 

        getEditor() {const { createEditor, createToolbar } = window.wangEditorconst 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) 

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！