技术标签: vue中使用的一些实用插件 前端 vue.js
继上一章,我们实现了富文本框字数限制,到上一章呢,基本上得功能已经可以实现了。接下来就是扩展章节了,我会继续去探索更多得自定义菜单,今天先开一个简单得——“首行缩进”,感兴趣就继续往下看看吧~
富文本编辑器本身提供了一种缩进,可以实现整体得缩进,效果如下:
上图可以看到,如果点击了缩进,这个段落都会缩进。但我不需要一段都缩进,我只希望他首行缩进,所以今天我们就要实现下图得功能:
具体位置如下图:
因为新建了一个文件,所以要重新引入。
引入BtnMenu是因为我们要自定义一个BtnMenu菜单
import E from "wangeditor";
const { $ } = E;
const { BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E;
根据官方写法,这里就用class的方式来新建一个菜单吧~
class AlertMenu extends BtnMenu {}
注意啦!!接下来的内容都写在class里面
通过constuctor创建一个菜单,并加上hover文字
constructor(editor) {
// data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
const $elem = E.$(
`<div class="w-e-menu" data-title="首行缩进" style="z-index:auto;">
<i class="el-icon-s-fold"></i>
</div>`
);
super($elem, editor);
}
菜单有啦,我们点击这个菜单的时候会发生什么事情呢~
首先,我来描述一下大概思路,以便代码更好理解:
我们要定义一个方法,该方法我们需要 去获取选中的dom,判断当前是否添加了首行缩进样式,有就取消,没有就加上。最后我们恢复选取
// 菜单点击事件
clickHandler(value) {
const editor = this.editor;
const $elems = editor.selection.getSelectionRangeTopNodes(); //$elems——选中完整段落或多个段落——上级节点
if ($elems.length > 0) {
$elems.forEach(item => {
// operateElement($(item), value, editor)
const $elem = $(item).getNodeTop(editor); //获取选中的上一级节点
const reg = /^(P|H[0-9]*)$/; //判断是不是p\h标签
//getNodeName获取标签名
if (reg.test($elem.getNodeName())) {
const $elem1 = $elem.elems[0]; //获取每一行的带标签内容
if ($elem1.style["textIndent"] === "") {
//如果此时的样式没有缩进,就添加缩进样式
$elem.css("text-indent", "2em");
} else {
//如果此时的样式有缩进,就取消缩进样式
$elem.css("text-indent", "");
}
}
});
}
// 恢复选区
editor.selection.restoreSelection();
this.tryChangeActive(); //菜单高亮
}
首行缩进的样式已经实现了,但是这个菜单点击后的激活效果没有实现也,
还是说一下思路:
获取选中的文本的dom信息,如果不存在节点信息,就可以止步于此。如果存在上级节点信息,代表这选中的是这一行,可以首行缩进,再判断当前dom是否有样式,有就调用active(),没有就调用unActive()
tryChangeActive() {
// 激活菜单
// 1. 菜单 DOM 节点会增加一个 .w-e-active 的 css class
// 2. this.this.isActive === true
// this.active()
const editor = this.editor;
const $selectionElem = editor.selection.getSelectionStartElem(); //获取选中的dom信息
const $selectionStartElem = $($selectionElem).getNodeTop(editor); //获取选中的上级节点信息
console.log($selectionElem, $selectionStartElem.length <= 0, "这是啥");
if ($selectionStartElem.length <= 0) return; //如果没有上级节点就止步于此
if ($selectionStartElem.elems[0].style["textIndent"] != "") {
//如果有样式,就激活菜单
// active 、unActive方法是官方提供的菜单激活方法
this.active();
} else {
this.unActive();
}
最后我们export这个菜单:
export default AlertMenu;
到第三步这个菜单功能和效果已经实现啦,那么我们就只需要再页面中注册这个菜单啦,切换到editor.vue页面
import AlertMenu from "./components/textIndent";
然后再_initEditor()方法第一行注册菜单名,将这个菜单加到原本菜单中去
const menuKey = "textIndent"; // 给定菜单名
var editor = new E(this.$refs.editor);
// 注册菜单
editor.menus.extend(menuKey, AlertMenu);
editor.config.menus = editor.config.menus.concat(menuKey);
看一下结构图,别写错位置啦哟~
好啦,到这里这个首行缩进菜单功能就实现啦,这个算是不难的功能啦吧,不过我第一次接触富文本编辑器还是思考了很久~~
以上就是今天要讲的内容,本文仅仅简单自定义首行缩进菜单的思路和实现,好啦好啦,希望能够帮助到你啦,或者开阔一下思维也可以滴~。如果有什么想法也可以评论区留言给我哟~白白啦
文章浏览阅读1k次。react 学习总结–构建工具Gulp、Browserify(二)1.html 文件处理gulp-htmlmin 插件 用于压缩html,可以进行配置,下边是配置信息(选填) var gulp = require('gulp'), htmlmin = require('gulp-htmlmin'); gulp.task('htmlmin', function ()_react gulp
文章浏览阅读7.6k次,点赞3次,收藏69次。转自:https://mp.weixin.qq.com/s/qp_DSBGKdjNo2-lO2s5v7Q引言在开关电源中,EMI滤波器对共模和差模传导噪声的抑制起着显著的作用。在研究滤波器原理的基础上,探讨了一种对共模、差模信号进行独立分析,分别建模的方法,最后基于此提出了一种EMI滤波器的设计程序。高频开关电源由于其在体积、重量、功率密度、效率等方面的诸多优点,已经被广泛地应用于工业..._共模电感和y电容在滤波方面的区别
文章浏览阅读7.9k次。类注释模板设置:点击 preferences ,搜索 File and Code Template ,在 Files tab 页下,选择 Class,在类名上面添加模板:/** * @program ${PROJECT_NAME} * @description: ${TODO} * @author: ${USER} * @create: ${YEAR}/${MONTH}/${DAY}..._mac idea 设置注解格式
文章浏览阅读2k次。Sizeof用法本文主要包括二个部分,第一部分重点介绍在VC中,怎么样采用sizeof来求结构的大小,以及容易出现的问题,并给出解决问题的方法,第二部分总结出VC中sizeof的主要用法。1、 sizeof应用在结构上的情况请看下面的结构:struct MyStruct{double dda1;char dda;int type};对结构MyStruct采用_sizeof(4.0+2)
文章浏览阅读2.2k次,点赞3次,收藏4次。徐博最近一直在看我博客,肯定是想看我什么时候不更新,然后好嘲笑我。当然,不排除徐博已经爱上我的可能。What:改进SoftmaxLoss,显式的控制类内的距离,(不让 已经对的样本score太高,影响训练)可以防止过拟合。回顾SoftmaxLoss:1. Softmax 就是一个把一个向量归一的函数,输出也是向量。在matlab里就3行代码:% X_large-margin softmax loss的代码
文章浏览阅读6.2k次。其实不是很复杂百度翻译传过来的json数据:{"from":"zh","to":"en","trans_result":[{"src":"高度600米","dst":"Height 600 meters"}]}现在要取出dst对应的值:Height 600 meters String date="{"from":"zh","to":"en","trans_result":[_java 解析复杂类型的json
文章浏览阅读1.8k次。在一年前,我写过一篇文章,叫做如何从BAM文件中提取fastq,之前也发现了从BAM里面提取Fastq是有些麻烦,只不过最后通过samtools的子命令实现了数据提取,实现功能之后也没有再去思考如何提高效率。最近读到每周文献-190419-植物单细胞BAM重比对以及假基因研究时,发现里面提到了一个工具叫做 bazam, 功能就是提取Fastq文件,文章发表在 Genome Bio..._10x 开发的工具 bamtofastq
文章浏览阅读8k次。0x00 前言 还记得电信天翼宽带吗?现在的天翼宽带的终端基本是华为的无限路由了,相信有不少同学在包装了中国电信天翼宽带后,个人申请到一个账号/密码,并且额外缴费得到一个路由器,然后就没有然后了。心里就纳闷,咋上wifi,然后又得另外花钱买个无线路由,然后不知道怎样弄。0x01 电信宽带的路由终端首先电信的华为路由器的底部都会贴有该终端的信息,例如终端登录地址,账号,密码等_中国电信wifi设置时间
文章浏览阅读853次。让VC编译出来的程序不依赖于msvcr80.dll/msvcr90.dll/msvcr100.dll等文件正常情况下,当我们用VC编译出一个Console/Win32类型项目的exe程序时(这里暂不考虑MFC程序),会依赖于msvcrxx.dll文件(xx为不同VC对应的版本号,VC2005为80,VC2008为90,VC2010为100),发布程序的时候,就需要把对应的dll也cop_编译msvc不依赖msvcr100.dll
文章浏览阅读4.6k次。今天看到一篇文章,说什么是问题?看到这个标题很好奇。就点进去看了一下。以下是总结和思考。漫漫人生中,我们总会遇到各种各样的问题。那么什么是问题呢?有以下一个定义:问题是目标与现状的差异。解决方案,就是现状到目标的路径。那么,什么是目标呢?目标应该是符合真实的需求。那么,什么是需求呢?需求不仅包含当前这个问题,有时候它更需要考虑到整个系统。打个比方说,有一天某个系统出现了超时问题,..._问题是什么
文章浏览阅读5.3w次,点赞59次,收藏278次。说明:最近一周都在写报表,样式很统一,上面是查询条件,下面是查询结果,页面如下图所示。由于要写很多报表,都是重复的工作,所以部门里的小哥哥在写了一个基于node的小程序,直接配置JSON文件,就可以生成报表模板,感觉很强(后面想学习一下)。作为一个优秀的CV工程师(复制粘贴),我也没怎么写前端的工作,直接用生成的模板就好了,但是后台的查询我还是稍微走心的。由于JAVA基础不是很好,总结的可..._serviceimpl类的作用是什么
文章浏览阅读111次。开发人员代码注释规范开发人员代码注释规范Java类版权及代码注释注释示例package java.blah;import java.blah.blahdy.BlahBlah;/** ==========================================================* Version Author Date Des..._huangzhihui java