首页 > 其他分享 >vue中使用wangEditor在设置工具栏的显隐

vue中使用wangEditor在设置工具栏的显隐

时间:2023-05-16 21:12:33浏览次数:51  
标签:vue group wangEditor 文档 工具栏 toolbarKey 隐藏

前段时间为了富文本在wangEditor和tinyMCE中犹豫,虽然最后选择用tinyMCE,但是wangEditor的文档也是去看了的。

wangEditor中文文档在这里。由于项目中需要的工具栏并不多,需要将部分工具栏隐藏,然后我将这两个富文本框的文档都看了一下。

这里主要说一下wangEditor富文本框的工具栏的显隐。

vue中使用wangEditor在设置工具栏有个属性excludeKeys。文档里有说这里。

 

在使用wangEditor的文件中设置属性 :toolbarConfig: {//工具栏 excludeKeys: [//隐藏的toolbarKey,默认为空 "group-more-style", 'group-video', 'redo', 'undo', 'group-image', ] },

     toolbarConfig: {//工具栏  
        excludeKeys: [//隐藏的toolbarKey,默认为空
          "group-more-style",
          'group-video',
          'redo',
          'undo',
          'group-image',
        ]
      },

 

 

默认的话是所有的工具都有的,如果需要隐藏自己不需要的工具,将工具标签toolbarKey放到上述代码中就可以实现了。

如何查找toolbarKey,在使用的地方F12查看dom上的data-menu-key就可以查看到对应的key,如图:这里是默认全部的工具的工具栏

  这里是去了格式等工具的工具栏。

 

这样就可以达到将自己想要的工具来进行显示隐藏了。

 

标签:vue,group,wangEditor,文档,工具栏,toolbarKey,隐藏
From: https://www.cnblogs.com/NicoleYe/p/17406683.html

相关文章

  • 【Vue2.x源码系列08】Diff算法原理
    什么是虚拟DOMDOM是很慢的,其元素非常庞大,当我们频繁的去做DOM更新,会产生一定的性能问题,我们可以直观感受一下div元素包含的海量属性在Javascript对象中,虚拟DOM表现为一个Object对象(以VNode节点作为基础的树)。并且最少包含标签名tag、属性attrs和子元素对象children三个属......
  • Vue
      ......
  • VUE- history模式发布项目部署
    VUE-history模式发布项目部署 环境:vue项目 发布后,通过nginx部署到docker容器内。如需要去掉路径中的#/ 则需要使用history模式发布。1. 修改路由的配置文件constrouter=newRouter({base:process.env.BASE_URL,scrollBehavior:()=>({y:0}),mode:'......
  • vue2 + fabric.js 实现撤销、恢复效果
    全部代码<template><div><canvasid="canvas"width="400"height="400"style="border:1px"></canvas><button:disabled="!canUndo"@click="historyState(stateIndex-1)......
  • Vue3.3 的新功能的一些体验
    Vue3在大版本3.3里面推出来了一些新功能(主要是语法糖),网上有各种文章,但是看起来似乎是一样的。我觉得吧,有新特性了,不能光看,还要动手尝试一下。DefineOptions宏定义先来一个简单的,以前我们有时候想设个name,有时候不想让组件自动继承属性,这时候需要单独设置一个script进行设......
  • [未解决] 如何用vite的vueCustomBlockTransforms实现源代码展示
    想实现源代码展示,搜索结果90%都是用vueCustomBlockTransforms,但我在自己项目的vite.config.js里加入该选项以后并没有生效在vite官网配置中也没有,vite源码中没有(但是node/server的createServer中有)找到了一个demo,也是可以用的(虽然vite版本是很早的1.0):https://zhuanlan.zhihu.co......
  • 从0到1搭建后台管理系统(Vue3 + Vite4 + TypeScript + Element Plus + Pinia + Vue Rou
    参考有来:https://www.cnblogs.com/haoxianrui/p/17331952.htmlNode16+版本大于16【问题一:目前我是14.18.2的版本npm是6.14.15版本,这就涉及到要切换node版本的问题,不然我安装了16我的vue2项目就启动不了了】vscode插件市场搜索 VueLanguageFeatures(Volar) 和 TypeScript......
  • vue请求后端数据和跨域问题
    最近遇到的一个问题后端写好的接口,前端怎么获取数据这是我后端的接口:GET接口这是我前端运行的项目地址:简单使用:咱门前端使用颇受好评的axios来发起请求这是它的官网:https://www.axios-http.cn/不过要在vue中使用它,就需要先安装打开终端输入一下命令 npminstall......
  • vue8小时带刻度的时间轴,根据当前时间实时定位
    效果图: 需求:1开始时间、结束时间可配置2时差固定8小时3根据当前时间初始化位置4每隔5s刷新位置5超过结束时间停止刷新HTML:<divclass="time-axis"><divclass="startTime">{{start_time}}</div><divclass="endTime">{{end_time}}</div>......
  • 创建Vue项目的方式
    一、方式一:1、在目标目录下,执行命令vuecreateproject_name2、注意:project_name需要替换为需要的项目名称,不可以包含中文 上面是版本,vue2、vue3,上下键选择对应的版本,回车即可。启动项目:npmrunserve终止项目:ctrl+c二、方式二 1、命令开启前端项目管理页面v......