Vue项目中使用wangEditor富文本输入框（推荐）

vue中安装wangEditor

cnpm install wangeditor

创建公用组件：在src/vue/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.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>

在父组件中调用

<template><div><wangEditor v-model="wangEditorDetail" :isClear="isClear" @change="wangEditorChange"></wangEditor></div>
</template>
<script>
import wangEditor from "@/vue/components/wangEditor";
export default {data() {return {isClear: false,//设置为true的时候，这个可以用this.wangEditorDetail=''来替代wangEditorDetail: ""};},mounted() {this.wangEditorDetail = "wangEditorDetail默认值"; //设置富文本框默认显示内容},components: { wangEditor },methods: {wangEditorChange(val) {console.log(val);}}
};
</script>

Vue项目中使用wangEditor富文本输入框（推荐）相关推荐

vue管理后台项目中使用wangEditor富文本编辑器
背景公司需要做一个后台文章管理的模块,通过富文本编辑器编辑文章,在前端显示.调研了很久,决定使用wangEditor -- 轻量级 web 富文本编辑器,配置方便,使用简单.一些编辑器的说明. 开始 ...
Vue项目中使用 tinymce 富文本编辑器的方法，附完整源码
来源 | https://blog.csdn.net/xingmeiok/article/deta 1.tinymce相关参考资料 tinymce版资料: http://tinymce.ax-z.cn ...
在vue3.0项目中使用tinymce富文本编辑器
目录一.安装二.完整代码三.事项说明四.参考文档之前看了好几篇关于 vue项目中使用 tinymce的文章, import引入大量 tinymce插件, /node_modules/ti ...
Vue中使用Wangeditor富文本实现聊天发送文件驻留
1.最近遇到一个需求,类似企业微信发送文件及视频时可以在文本框内驻留,然后点击发送按钮进行文件发送,这里使用的是富文本框进行处理,Wangeditor富文本框. 自定义添加菜单功能如下: cnpm i ...
vue中使用wangeditor富文本编辑器（含图片上传和回显）
最近在写vue的项目中,遇到一个需求,点击编辑,显示弹框,在弹框中的富文本编辑器中编辑自定义文本样式,可以上传图片并回显.编辑完成确定后显示在页面上. 首先先写一个editor.vue的页面.(建议单 ...
vue 项目中使用wangEditor上传图片视频到oos
废话: 最近在做商城后台管理的项目, 商品详情需要使用富文本编辑器, 需要上传图片和上传视频的功能. 关于富文本: 富文本选择: wangEditor , froalaEditor 我个人是喜欢fro ...
关于在vue项目中使用wangEditor
1,vue中安装wangEditor 使用的npm安装 npm install wangeditor --save 2,创建公用组件在components中创建wangEnduit文件夹组件内容为 ...
django项目中使用KindEditor富文本编辑器
先从官网下载插件,放在static文件下前端引入学习python中有什么不懂的地方,小编这里推荐加小编的python学习群:895,817, 687 有任何不懂的都可以在里面交流,还有很好的视频教 ...
vue2.0项目中使用Ueditor富文本编辑器应用中出现的问题
1.如何设置config中的内容 readonly:true,//只读模式wordCount:false,//是否开启字数统计enableAutoSave: false,//自动保存功能重点:ena ...

Vue项目中使用wangEditor富文本输入框（推荐）

Vue项目中使用wangEditor富文本输入框（推荐）相关推荐

最新文章

热门文章