vue中使用富文本编辑器（wangeditor）
<template> <div class="subcontainer"> <!-- de --> <div class="editor" id="editor" ref="editor"></div> <div class="a-btn"> <a href="javascript:void(0)">提交</a> </div> </div> </template> <script> import pcSet from "@/components/pcSet/index"; import appSet from "@/components/appSet/index"; import E from "wangeditor"; export default { data() { return { activeName: "first", txt: { text: "9090" }, editor: "" // 存放实例化的wangEditor对象，在多个方法中使用 }; }, components: { pcSet, appSet }, mounted() { this.editor = new E("#editor"); //new即可 this.editor.customConfig.uploadImgShowBase64 = false; // base 64 存储图片 this.editor.customConfig.uploadImgServer = ' common.requestUrl '+ "/file/upload/1?type=1&fn=educiot.png"; // 配置服务器端地址 this.editor.customConfig.uploadImgHeaders = {}; // 自定义 header this.editor.customConfig.uploadFileName = "file"; // 后端接受上传文件的参数名 this.editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024; // 将图片大小限制为 10M this.editor.customConfig.uploadImgMaxLength = 6; // 限制一次最多上传 3 张图片 this.editor.customConfig.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间 //下面的为一些配置参数，默认全部都有，我们需要那些留下那些即可 this.editor.customConfig.menus = [ "head", // 标题 "bold", // 粗体 "fontSize", // 字号 "fontName", // 字体 "italic", // 斜体 "underline", // 下划线 "strikeThrough", // 删除线 "foreColor", // 文字颜色 "backColor", // 背景颜色 "link", // 插入链接 "list", // 列表 "justify", // 对齐方式 // 'quote', // 引用 "emoticon", // 表情 "image", // 插入图片 "table", // 表格 "video", // 插入视频 "code", // 插入代码 "undo", // 撤销 "redo" // 重复 ]; //聚焦时候函数 this.editor.customConfig.onfocus = function() { //console.log("onfocus") }; //失焦时候函数 this.editor.customConfig.onblur = function() { //console.log("onblur") }; //change事件，当富文本编辑器内容发生变化时便会触发此函数 this.editor.customConfig.onchange = function(text) { console.log(text); }; this.editor.create(); //以上配置完成之后调用其create()方法进行创建 this.editor.txt.html("8222 "); //创建完成之后的默认内容 //点击事件，拿到富文本编辑器里面的值 $(".a-btn a").on("click", () => { //富文本编辑器里面的内容我们可以输出为html（布局）格式，也可以输出位text（文本）格式 console.log(this.editor.txt.text()); console.log(this.editor.txt.html()); //this.editor.change && this.editor.change(); }); }, methods: { handleClick(tab, event) { console.log(tab, event); } } }; </script> <style lang="less" scoped> .subcontainer { height: 100%; width: 100%; .tabs { padding: 20px 0; } } .editor { width: 100%; height: 300px; margin-bottom: 40px; } .a-btn { padding-bottom: 80px; } .a-btn a { display: block; color: #fff; font-size: 16px; line-height: 30px; width: 100px; text-align: center; float: right; background: dodgerblue; } </style>
