工作90:富文本编辑器使用篇wangedit

WangEdit组件

<template lang="html"><div class="editor"><div ref="toolbar" class="toolbar"></div><div ref="editor" class="text"></div></div>
</template><script>
import E from 'wangeditor'
export default {name: 'EditorBar',data() {return {// uploadPath,editor: null,info_: null}},model: {prop: 'value',event: 'change'},props: {value: {type: String,default: ''},isClear: {type: Boolean,default: false}},watch: {isClear(val) {// 触发清除文本域内容if (val) {this.editor.txt.clear()this.info_ = null}},value: function(value) {if (value !== this.editor.txt.html()) {this.editor.txt.html(this.value)}}//value为编辑框输入的内容,这里我监听了一下值,当父组件调用得时候,如果给value赋值了,子组件将会显示父组件赋给的值},mounted() {this.seteditor()this.editor.txt.html(this.value)},methods: {seteditor() {// http://192.168.2.125:8080/admin/storage/createthis.editor = new E(this.$refs.toolbar, this.$refs.editor)this.editor.config.uploadImgShowBase64 = false // base 64 存储图片this.editor.config.uploadImgServer = 'http://otp.cdinfotech.top/file/upload_images'// 配置服务器端地址this.editor.config.uploadImgHeaders = { }// 自定义 headerthis.editor.config.uploadFileName = 'file' // 后端接受上传文件的参数名this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2Mthis.editor.config.uploadImgMaxLength = 6 // 限制一次最多上传 3 张图片this.editor.config.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间// 配置菜单this.editor.config.menus = ['head', // 标题'bold', // 粗体'fontSize', // 字号'fontName', // 字体'italic', // 斜体'underline', // 下划线'strikeThrough', // 删除线'foreColor', // 文字颜色'backColor', // 背景颜色'link', // 插入链接'list', // 列表'justify', // 对齐方式'quote', // 引用'emoticon', // 表情'image', // 插入图片'table', // 表格'video', // 插入视频'code', // 插入代码'undo', // 撤销'redo', // 重复'fullscreen' // 全屏]this.editor.config.uploadImgHooks = {fail: (xhr, editor, result) => {// 插入图片失败回调},success: (xhr, editor, result) => {// 图片上传成功回调},timeout: (xhr, editor) => {// 网络超时的回调},error: (xhr, editor) => {// 图片上传错误的回调},customInsert: (insertImg, result, editor) => {// 图片上传成功,插入图片的回调//result为上传图片成功的时候返回的数据,这里我打印了一下发现后台返回的是data:[{url:"路径的形式"},...]// console.log(result.data[0].url)//insertImg()为插入图片的函数//循环插入图片// for (let i = 0; i < 1; i++) {// console.log(result)let url = "http://otp.cdinfotech.top"+result.urlinsertImg(url)// }}}this.editor.config.onchange = (html) => {this.info_ = html // 绑定当前逐渐地值this.$emit('change', this.info_) // 将内容同步到父组件中}// 创建富文本编辑器this.editor.create()}}
}
</script><style lang="css">
.editor {width: 100%;margin: 0 auto;position: relative;z-index: 0;
}
.toolbar {border: 1px solid #ccc;
}
.text {border: 1px solid #ccc;min-height: 500px;
}
</style>

父组件引入

    <template><editor-bars v-model="detail" :isClear="isClear" @change="change"></editor-bars><!-- <wang-edit></wang-edit>-->
</template>
  methods: {change(val) {console.log(val)},},
   return {isClear: false,detail:""};

运行结果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/416109.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

教你Word一键自动生成目录步骤

首先当我们需要生成一个目录的时候&#xff0c;一定要按照一定的格式来写Word文档&#xff0c;一定要有我这样或你自己的格式&#xff01;下面进行详解&#xff1a; 比如研究内容概述对应标题1的格式内容如下&#xff1a; 那么你左侧导航栏二在《课程标准》“数与代数”领域&am…

教你创建自己的CSDN博客专栏

首先说明一下 专栏创建标准&#xff1a; 1. 申请者的CSDN个人博客中原创技术性博客文章要多于15篇。 2. 申请专栏主题明确&#xff0c;简介翔实清晰&#xff0c;并且与IT技术相关首先进入博客专栏&#xff1a;https://blog.csdn.net/column.html&#xff0c;点击我的专栏跳转预…

工作95视频上传逻辑

定好是前端直接把视频传到他们的服务器&#xff0c;还是先到我 们的后端暂存&#xff0c;提交的时候在存到他们那边

工作96:当前页面拿id

reject(){putAction("/order/"this.ListId"/status",{status:-1,remark:""}).then(res>{this.$message({message: 审核撤回状态修改,type: success});this.close();})},/*审核通过的方法 定义在混入里面*/approve(){/*控制审核状态成功*/putA…

微信地图 leaflet 腾讯地图

本来在微信项目中使用的高德地图&#xff0c;发现不是想象中的好用&#xff0c;而且用了微信&#xff0c;感觉使用腾讯地图会比较方便&#xff0c;所以&#xff0c;索性使用leaflet腾讯地图的底图来实现。 其中关于正确使用腾讯地图参考了https://github.com/wuxiashuangji/TX…

支付宝会员卡开卡表单模板配置(alipay.marketing.card.formtemplate.set)JAVA版本demo

官方接口文档&#xff1a; https://docs.open.alipay.com/251/105668/ &#xff0c;我这里写的是开卡组件前两步的操作流程&#xff0c; 仅供参考1. 调用接口前的准备工作(创建应用等)参考该文档 &#xff1a;https://docs.open.alipay.com/251/105731/2.核心代码&#xff0c;这…

web项目从Myeclipse迁移到idea的二三事

今天新接手了一个myeclipse项目&#xff0c;想把这个项目从myeclipse迁移到idea&#xff0c;花了点时间&#xff0c;也遇到一些新的问题&#xff0c;打算记录下来。 这是myeclipse的项目结构 我整理一下 整理的时候&#xff0c;我碰到了一下的一下的一些问题&#xff1a; 1 . m…

微信公众平台无法使用支付宝收付款的解决方案

微信中无法打开支付宝收款是微信浏览器限制所致&#xff0c;可以参考下图方法引导用户转到系统浏览器&#xff0c;即可用支付宝收款。点此下载。 1、引导用户选择在浏览器中打开支付链接&#xff0c;以完成支付。如图1所示&#xff1a;图12、用支付宝继续完成支付&#xff0c;如…

vux radio 改造为 tree 代码片段

思路&#xff1a;用全角空格和半角空格做区分。 1、自己写的部分 this.toOptions arr.map(x > {let kong for (let i 1; i < x.level; i i 1) {kong kong  }kong kong let icon https://s1.ax1x.com/2018/09/27/iML0BD.pngif (x.level 1) {icon https://s1…

maven已支持支付宝开放平台SDK

「好消息通知」开放平台SDK 标准版 以官方的名义上传了中央仓库&#xff01;支持maven引入调用&#xff01;开发者可以参考使用中央仓库地址&#xff1a;https://mvnrepository.com/artifact/com.alipay.sdk/alipay-sdk-java 后续在 https://docs.open.alipay.com/54/103419/ …

工作99:任务加1逻辑

/*控制任务的添加功能*/addFrom(index,item) {var tasks {name: "",start_time: null}this.form.departmentList[index].accounts[item].tasks.push(tasks);},

支付宝后台如何查看自己的签约详情

第一步&#xff1a;登录蚂蚁金服商家服务中心https://b.alipay.com/&#xff0c;点击产品中心&#xff0c;如下图第二步&#xff0c;点击我的产品-已生效-产品详情&#xff0c;&#xff08;如果在已生效界面看不到自己调用接口对应签约的产品&#xff0c;那么你的签约已经失效&…

ALIN10129-自查方案

原贴地址&#xff1a;https://openclub.alipay.com/read.php?tid3374&fid60&#xff0c;欢迎大家访问 报错说明及截图&#xff1a;这个错误一般常见于支付宝老版本的移动支付mobile.securitypay.pay接口中错误原因&#xff1a; 移动支付接口没有权限&#xff08;也就是这个…