Vue使用富文本编辑器wangEditor(详细)

基于Vue2项目配置

yarn add @wangeditor/editor-for-vue# 或者 npm install @wangeditor/editor-for-vue --saveyarn add @wangeditor/editor-for-vue@next# 或者 npm install @wangeditor/editor-for-vue@next --save

webpack es6语法解析配置

wangeditor5中有一些es6语法webpack可能无法解析，需要下载解析库并配置webpack。

npm install es6-promise

main.js配置

import 'babel-polyfill' //一定要在最上面引入import Vue from 'vue'import Es6Promise from 'es6-promise'Es6Promise.polyfill()

webpack.base.conf.js配置

module.exports = {context: path.resolve(__dirname, '../'),entry: {app: ["babel-polyfill",'./src/main.js']},......

module的rules配置babel解析wangeditor的路径

module: {rules: [{test: /\.vue$/,loader: 'vue-loader',options: vueLoaderConfig},{test: /\.js$/,loader: 'babel-loader',include: [resolve('src'),resolve('test'),resolve('node_modules/@wangeditor/editor'),resolve('node_modules/@wangeditor/editor-for-vue/editor'),resolve('test'),resolve('node_modules/webpack-dev-server/client')]},

重启项目。

模板配置

<div style="border: 1px solid #ccc;"><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editor":defaultConfig="toolbarConfig":mode="mode"/><Editorstyle="height: 500px; overflow-y: hidden;"v-model="html":defaultConfig="editorConfig":mode="mode"@onCreated="onCreated"/></div>

script配置

import {Editor, Toolbar} from '@wangeditor/editor-for-vue'export default Vue.extend({name: "addOrUpdate",components: {Editor, Toolbar},data() {return {editor: null,html: '',toolbarConfig: {},editorConfig: {placeholder: '请输入内容...',MENU_CONF: {uploadImage: {//使用自定义的回调来处理图片上传结果customInsert: (res, insertFun) => {if (res.code == 200) {insertFun(process.env.imagePrefix + res.data, '', '')//} else {this.$message.error("上传失败:" + res.msg)}},//服务器地址server: process.env.baseUrl + '/file/upload',//文件的参数名fieldName: 'file',//文件上传的其他参数，例如校验图片大小，图片后缀，图片格式，等等meta: {},//如果是跨域请求，允许携带请求域所属的cookiewithCredentials: true,// 超时时间，默认为 10 秒timeout: 10 * 1000, // 10 秒，// 将咱们的token设置到请求头中headers: {Authorization: getToken()},}},},mode: 'default', // or 'simple'}},methods: {saveData() {var html = this.editor.getHtml()var text = this.editor.getText()console.log(text, html)//保存的时候手动包一层标签作为样式 <div id="editor-content-view" class="editor-content-view"> </div>},onCreated(editor) {this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错window.editor = this.editor},},beforeDestroy() {const editor = this.editorif (editor == null) returneditor.destroy() // 组件销毁时，及时销毁编辑器},created() {}})

富文本编辑器中的图片上传，视频上传需要通过editorConfig配置项来配置后端的上传地址、参数名、token等等。

样式

样式直接引入wangeditor提供的样式即可

<style src="@wangeditor/editor/dist/css/style.css"></style>

自定义样式

wangeditor编辑器生成的html是纯文本格式，需要自己手动写样式。官方的样式如下：

.editor-content-view {padding: 0 10px;margin-top: 20px;}.editor-content-view p,.editor-content-view li {white-space: pre-wrap; /* 保留空格 */}.editor-content-view blockquote {border-left: 8px solid #d0e5f2;padding: 10px 10px;margin: 10px 0;background-color: #f1f1f1;}.editor-content-view code {font-family: monospace;background-color: #eee;padding: 3px;border-radius: 3px;}.editor-content-view pre>code {display: block;padding: 10px;}.editor-content-view table {border-collapse: collapse;}.editor-content-view td,.editor-content-view th {border: 1px solid #ccc;min-width: 50px;height: 20px;}.editor-content-view th {background-color: #f1f1f1;}.editor-content-view ul,.editor-content-view ol {padding-left: 20px;}.editor-content-view input[type="checkbox"] {margin-right: 5px;}

官方源码中最外层是<div id="editor-content-view" class="editor-content-view"> </div>，所以

在生成html以后也需要包装一层。

var html = this.editor.getHtml()html = '<div id="editor-content-view" class="editor-content-view">' + html + '</div>'

代码高亮

查看官方源码，引入如下js与css，这里最好还是下载下来引入静态文件方式，方式cdn服务器挂掉。

<link href="/prismjs@latest/themes/prism.css" rel="stylesheet"><!-- 引入 prism js --><!-- <script src="/npm/prismjs@latest/prism.min.js"></script> --><script src="/prismjs@latest/prism.js"></script><!-- <script src="/npm/prismjs@latest/components/prism-core.min.js"></script> --><script src="/prismjs@latest/components/prism-core.js"></script><!-- <script src="/npm/prismjs@latest/plugins/autoloader/prism-autoloader.min.js"></script> --><script src="/prismjs@latest/plugins/autoloader/prism-autoloader.js"></script>

注意本地引入需要将高亮的代码js全部引入，注意引入顺序，要先引入prism.js和prism.core.js

<link href="./editor.css" rel="stylesheet"><link href="./prism.css" rel="stylesheet"><script src="./prism.js"></script><script src="./prism-core.js"></script><script src="./prism-autoloader.js"></script><script src="./prism-clike.js"></script><script src="./prism-java.js"></script>...........

引入后直接调用API

Prism.highlightAll()