vue使用wangEditor

vue中安装wangEditor

npm install wangeditor

创建公用组件：在src/components文件夹中创建wangEditor.vue

<template lang="html"><div class="wangeditor"><div ref="toolbar" class="toolbar"></div><div ref="wangeditor" class="text"></div></div>
</template><script>
import E from "wangeditor";
export default {data() {return {wangEditor: null,wangEditorInfo: null};},model: {prop: "value",event: "change"},props: {value: {type: String,default: ""},isClear: {type: Boolean,default: false}},watch: {isClear(val) {// 触发清除文本域内容if (val) {this.wangEditor.txt.clear();this.wangEditorInfo = null;}},value: function(value) {if (value !== this.wangEditor.txt.html()) {this.isClear = false;this.wangEditor.txt.html(this.value); //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值}}},mounted() {this.initEditor();this.wangEditor.txt.html(this.value);},methods: {initEditor() {this.wangEditor = new E(this.$refs.toolbar, this.$refs.wangeditor);this.wangEditor.customConfig = this.wangEditor.customConfig ? this.wangEditor.customConfig : this.wangEditor.configthis.wangEditor.customConfig.uploadImgShowBase64 = true; // base64存储图片（推荐）//this.wangEditor.customConfig.uploadImgServer = "https://jsonplaceholder.typicode.com/posts/"; // 配置服务器端地址（不推荐）this.wangEditor.customConfig.uploadImgHeaders = {}; // 自定义headerthis.wangEditor.customConfig.uploadFileName = "file"; // 后端接受上传文件的参数名this.wangEditor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024; // 将图片大小限制为（默认最大支持2M）this.wangEditor.customConfig.uploadImgMaxLength = 6; // 限制一次最多上传6张图片this.wangEditor.customConfig.uploadImgTimeout = 1 * 60 * 1000; // 设置超时时间（默认1分钟）// 配置菜单this.wangEditor.customConfig.menus = ["head", // 标题"bold", // 粗体"fontSize", // 字号"fontName", // 字体"italic", // 斜体"underline", // 下划线"strikeThrough", // 删除线"foreColor", // 文字颜色"backColor", // 背景颜色"link", // 插入链接"list", // 列表"justify", // 对齐方式"quote", // 引用"emoticon", // 表情"image", // 插入图片"table", // 表格"video", // 插入视频"code", // 插入代码"undo", // 撤销"redo", // 重复"fullscreen" // 全屏];this.wangEditor.customConfig.uploadImgHooks = {fail: (xhr, editor, result) => {// 插入图片失败回调},success: (xhr, editor, result) => {// 图片上传成功回调},timeout: (xhr, editor) => {// 网络超时的回调},error: (xhr, editor) => {// 图片上传错误的回调},customInsert: (insertImg, result, editor) => {// 图片上传成功，插入图片的回调（不推荐）insertImg(result.url);}};this.wangEditor.customConfig.onchange = html => {this.wangEditorInfo = html;this.$emit("change", this.wangEditorInfo); // 将内容同步到父组件中};// 创建富文本编辑器this.wangEditor.create();}}
};
</script><style lang="scss">
.wangeditor {border: 1px solid #e6e6e6;box-sizing: border-box;.toolbar {border-bottom: 1px solid #e6e6e6;box-sizing: border-box;}.text {min-height: 300px;}
}
</style>

引用

导入组件

import wangEditor from "@/components/wangEditor";
export default {components: { wangEditor }｝,data: function() {return {isClear: false,//设置为true的时候，这个可以用this.wangEditorDetail=''来替代wangEditorDetail: ""}},mounted() {this.wangEditorDetail = "我是默认值"; //设置富文本框默认显示内容}，methods: {wangEditorChange(val) {console.log(“我是富文本的内容”+val);}｝}

引用

 <wangEditor v-model="wangEditorDetail" :isClear="isClear" @change="wangEditorChange"></wangEditor>

启动项目会遇到的错误

npm run dev时发现报了如下错误

原因是css语言没有安装依赖
我用的是sass（

npm install sass sass-loader --save-dev

重新启动，再次报错

Node Sass 7.0.1 版与 ^4.0.0 不兼容；
解决方案：
1、npm uninstall node-sass;
2、npm i -D sass;
3、npm run dev；
项目正常启动。
补充如果Vue wangEditor报错 Cannot set property ‘uploadImgShowBase64’ of undefined"方法
由于npm install了最新版本的wangEditor 复制其他博主封装的富文本展示总是报错东西也不写全。后来在 thinkplayer的文章里后知后觉发现问题原因。
解决

  this.wangEditor.customConfig = this.wangEditor.customConfig ? this.wangEditor.customConfig : this.wangEditor.config

vue使用wangEditor相关推荐

vue使用wangEditor富文本光标乱飘
记录下:vue使用wangEditor封装了个富文本编辑器编辑时光标老乱飘解决方案: 光标乱飘可以在watch监听文本内容实时更新时,在输入文本的时候让监听无效. data() {return {e ...
wangeditor html编辑,Vue整合wangEditor富文本编辑器
最近在做项目时,客户有个发布新闻动态的功能,具体页面内容让客户自己编写,所以要选择富文本编辑器,这样用户体验好一点.网上有很多的富文本编辑器, 因为项目的功能并不是很复杂,所以选择了wangEdito ...
Vue使用wangEditor 封装成独立组件实现富文本编辑器
1.使用npm安装: npm install wangeditor 2.将编辑器封装一个组件,创建editor.vue组件: <template><div id="edit ...
vue使用WangEditor富文本编辑器(批量上传图片到服务器)
最近要写一个官网,但是这个官网要写成活的可配置的项目,于是要先写一后台管理系统,用来配置官网的菜单和页面,配置菜单自然是vue+ElementUI表格表单的增删改查,但是配置页面就要有排版.样式等等, ...
Vue封装WangEditor富文本编辑器
Vue中很多用vue-quill-editor编辑器的,但是感觉并不是很好用,于是决定使用以前感觉不错的WangEditor编辑器. 1.安装WangEditor npm install wanged ...
vue中wangeditor富文本框的使用方法
vue中使用的富文本插件最多的就是 wangeditor 和 vue-quill-editor .开始我用的是 vue-quill-editor,后来又换成了 wangeditor.为啥呢?因为 vu ...
vue引入wangEditor
1,使用npm安装: npm install wangeditor (注意 wangeditor 全部是小写字母) 2,定义一个放富文本的元素 <div id="editorElem& ...
vue中wangEditor的使用及回显数据获取焦点
在做后台管理项目时常常会用到富文本编辑器,在这里推荐大家使用wangEditor,非常好用第一步安装 npm i wangeditor --save 第二步在项目中使用 html 页面中的编辑.添加 ...
Vue项目中使用wangEditor富文本输入框（推荐）
vue中安装wangEditor cnpm install wangeditor 创建公用组件:在src/vue/components文件夹中创建wangEditor.vue <template ...

vue使用wangEditor

vue中安装wangEditor

创建公用组件：在src/components文件夹中创建wangEditor.vue

引用

启动项目会遇到的错误

vue使用wangEditor相关推荐

最新文章

热门文章