首页 > 其他分享 >mavon-editor自定义添加颜色选择器

mavon-editor自定义添加颜色选择器

时间:2023-01-31 14:13:18浏览次数:48  
标签:mavon 颜色 自定义 text vm editor 选择器

mavon-editor原本是没有带颜色选择器的,产品提出的需求,只好自定义一个了

这里是看了源码再加上看别人的博客,然后加了个插槽,我使用的是elementui的颜色选择器

el-color-picker

<mavon-editor v-model="queryParams.template" :toolbars="toolbars" ref="md" >
        // 插槽 <button slot="left-toolbar-before" type="button" aria-hidden="true" title="颜色" class="op-icon" style="position: relative" v-if="queryParams.channel != 2" > <i class="el-icon-s-open" /> <el-color-picker v-model="color1" style="opacity: 0; position: absolute; top: 0; left: 0" @change="activeChange" /> </button> </mavon-editor>
// 富文本编辑器加颜色
    activeChange(e) {
      const insert_text = {
        prefix: `<font color="${e}">`,
        subfix: '</font>',
        str: ''
      };
   // 使用span标签,里面的style会被过滤掉,导致颜色不生效。所以使用上面的font标签 // const insert_text = { // prefix: `<span style="color: ${e}">`, // subfix: '</span>', // str: '' // }; const $vm = this.$refs.md; $vm.insertText($vm.getTextareaDom(), insert_text); },

 

标签:mavon,颜色,自定义,text,vm,editor,选择器
From: https://www.cnblogs.com/sinceForever/p/17078738.html

相关文章

  • grafana 自定义dashboard Variables
    Variables 示例VariablesDependenciesdashboard显示  ......
  • 微信小程序自定义导航栏机型适配
    自定义微信小程序头部导航栏,有几种方式方式一{"navigationStyle":"custom"//将navigationStyle从默认default改为custom}定义此方法后,头部的导航栏会去掉,导航......
  • vue3实现禁用物理按键返回,但是可以通过自定义app-bar的返回按钮返回
    1.注意app-bar是一个所有页面都会用到的顶部title栏,里面左侧有返回按钮;2.基于1,在app-bar组件的setup里添加这个代码:onMounted(()=>{//不能少history.pu......
  • django 自定义模版过滤器
    虽然DTL给我们内置了许多好用的过滤器。但是有些时候还是不能满足我们的需求。因此Django给我们提供了一个接口,可以让我们自定义过滤器,实现自己的需求。模版过滤器必须要......
  • CAD怎么自定义线型?CAD线型自定义步骤
    有些设计师小伙伴绘制CAD图纸的过程中,在调用CAD线型时,觉得软件中自带的线型不适用,想要自定义CAD线型,那么,CAD怎么自定义线型呢?本节教程小编就来给大家分享一下浩辰CAD软件中......
  • 直播电商平台开发,vue 自定义指令过滤特殊字符
    直播电商平台开发,vue自定义指令过滤特殊字符 /** *@tagsinput只可以輸入数字、字母、汉字 *@examplev-emoji */exportdefault(app)=>{ app.directive('e......
  • SAP UI5 应用如何加载自定义 Theme
    要加载外部自定义主题,开发人员可以通过在页面中静态声明或使用Core.setThemeRoot()方法来设置此主题。这非常类似于对位于不同位置的SAPUI5库使用registerModulePat......
  • Docker 容器添加自定义root ca
    比如如果我们基于了step-ca工具做为我们的ca机制,就会有不可信的问题,业务使用就特别不方便了,以下是一个参考配置实际上很简单就是使用update-ca-certificates更新信息参......
  • js实现自定义网络拓扑图-实战记录
    首先推荐工具库JTopo: jtopo一个好用的交互式HTML5图形库其他的看官方文档            三、基础讲解jtopo的核心对象有Stage、Layer、Canv......
  • SAP UI5 应用的标准 Theme 和自定义 Theme 的加载讨论
    SAPUI5应用的初始主题可以硬编码在应用程序中(在加载SAPUI5的引导程序的脚本标签中)或在加载SAPUI5之前定义的JS配置对象中,例如下面的例子:<scriptid="sap-ui-boots......