layui源码详细分析系列之富文本编辑器模块
所谓的富文本编辑器就是内嵌在浏览器上、所见即所得的文本编辑器，它的形式如下：
layui框架中内置了layedit模块，该模块就是富文本编辑器模块，在最近两天中我自己使用原生js实现了简易的富文本编辑器，具体效果如下：
首先说说这个demo的组织结构：
在这个demo中，整体是一个IIFE，使用window对象将其构造函数暴露出去，想要使用这个demo，需要创建一个容器设置id属性为ueditor，其实demo需要做的几个关键点如下
- 构建文本编辑器的主体html结构
- 绑定工具栏的每个工具的事件绑定
- 如何获取选择的文本
- 如何给选择的文本应用样式
- 如何插入图片
对于1和2这两个问题就是动态创建节点并追加到指定元素下，并使用addEventListener(就不考虑IE了)来绑定事件。
下面就来说说我对于下面3个关键点的处理：
- 获取文本，先来说说获取文本的动作，鼠标按下、拖动、松开、点击具体工具的过程，所以我对于内容区绑定mouseout事件。
当选择文本后离开目标点时触发事件处理程序，使用window.getSelection()方法来获取被选择区域对象获取其文本，该方法存在兼容问题，感兴趣的同学可以具体看看。 - 如何给选择的文本应用样式：
我的做法是添加标签添加指定class类来实现，对于对齐的样式，需要改变包含文本的元素为块状元素，应用text-align样式 - 如何插入图片：
实际上还是添加img标签，获取点击的表情的src属性值，添加到内容区
实现过程中的问题：
- 刚开始打算使用textarea来作为内容区的，但是有一个问题就是插入的html标签不被识别，只能是文本，所以就使用div+contentEditable来实现
该demo的问题：
- 体验性不好，整体操作给人感觉不自然不流畅
- 样式没有好好设计，弹出效果生硬，没有应用动画效果
- 文本选择的时候，感觉不自然
- 应用样式重复问题，没有做处理优化
富文本编辑器demo的实现差强人意吧，以后会将其作为独立项目重新编写。
下面就分析下layui框架中富文本编辑器模块，该内置模块的组织结构图如下所示：
从上图中可见，作者将创建文本编辑器的方法作为api暴露了出来，在使用过程中需要手动调用来实现文本编辑器的创建工作。
关于该内置模块具体的运行逻辑如下图所示：
在分析了该内置模块的源码过程中，作者实现文本样式的应用是通过document.execCommand()：方法来实现的，该方法的功能就是用于操作可编辑区域的文本，可以对于改变文本大小字体等，实际上该方法也是添加标签来实现，但是对于重复性标签做了处理。当然该内置模块还提供了其他的功能，我会对其源码做详细的注释，具体可以查看我的GitHub，最近项目开始启动，实践与分析源码的时间会少许多，但是会一直实践并坚持分析该框架的内置模块。
致远行的你我
layui源码详细分析系列之富文本编辑器模块相关推荐
- web文本编辑器php源码,超级轻量web富文本编辑器HandyEditor
HandyEditor 是一套十分轻量且同时适用于手机端和pc端的web富文本编辑器,主要用于让用户在网站上获得所见即所得编辑效果,可以用 HandyEditor 把传统的多行文本输入框(textar ...
- LinkedHashMap 源码详细分析（JDK1.8）
1. 概述 LinkedHashMap 继承自 HashMap,在 HashMap 基础上,通过维护一条双向链表,解决了 HashMap 不能随时保持遍历顺序和插入顺序一致的问题.除此之外,Linke ...
- linkedhashmap 顺序_LinkedHashMap 源码详细分析（JDK1.8）
1. 概述 LinkedHashMap 继承自 HashMap,在 HashMap 基础上,通过维护一条双向链表,解决了 HashMap 不能随时保持遍历顺序和插入顺序一致的问题.除此之外,Linke ...
- FBReader源码详细分析 序言
2019独角兽企业重金招聘Python工程师标准>>> FBReader源码详细分析 -- 序言 有关FBReader源码的分析,网络上已经有一位叫做"谋哥"的大 ...
- HashMap 源码详细分析(JDK1.8)
1. 概述 本篇文章我们来聊聊大家日常开发中常用的一个集合类 - HashMap.HashMap 最早出现在 JDK 1.2中,底层基于散列算法实现.HashMap 允许 null 键和 null 值 ...
- android view 源码分析,Android ViewPager源码详细分析
1.问题 由于Android Framework源码很庞大,所以读源码必须带着问题来读!没有问题,创造问题再来读!否则很容易迷失在无数的方法与属性之中,最后无功而返. 那么,关于ViewPager有什 ...
- vboot源码详细分析-1
最近一直在研究bootloader之vboot,vboot短小精悍,如果只是用来进行系统的引导,而不要提供其他复杂的功能时候,我认为这是绝佳的上选.这里以MINI2440开发板配套的源码进行分析.这个 ...
- (转）淘淘商城系列——KindEditor富文本编辑器的使用
http://blog.csdn.net/yerenyuan_pku/article/details/72809794 通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏 ...
- HashMap 源码详细分析(JDK1.8) 1
1.概述 本篇文章我们来聊聊大家日常开发中常用的一个集合类 - HashMap.HashMap 最早出现在 JDK 1.2中,底层基于散列算法实现.HashMap 允许 null 键和 null 值, ...
最新文章
- leetcode算法题--格雷编码
- BAT3四大巨头安全负责人破天荒聚在了一起，他们都说了什么？
- 6.支持向量机（SVM）、什么是SVM、支持向量机基本原理与思想、基本原理、课程中关于SVM介绍
- Android之JNI DETECTED ERROR IN APPLICATION: illegal class name ‘XXX‘的错误解决方法
- mysql where过滤
- python 计算流形上两点之间的测地距离
- RabbitMQ学习——生产者与消费者入门例子
- Navicat远程连接服务器Mysql
- 坚果云升级后桌面出现一个文件夹
- AutoJs 4.1.1 实战教程
- 密码学——培根密码和栅栏密码
- Win10系统IE浏览器设置代理上网的方法
- 完整Debian7配置LAMP（Apache/MySQL/PHP）环境及搭建建站
- 找到一个在线网站截图的网站
- 主流互联网开发平台一览
- 互联网战神谷歌大牛Jeff Dean
- 同功能不同的代码，差别呢？
- 借条上的字迹消失了，怎么办？
- addr2line查看死机代码的位置
- 澳洲语言成绩等级c,澳大利亚对A-Level成绩要求分为几个等级