1.介绍

富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于 Microsoft Word 的编辑功能,容易被不会编写 HTML 的用户并需要设置各种文本格式的用户所喜爱.

2.原理

富文本编辑器又称为WYSIWYG(所见即所得),其本质就是在一个页面元素中嵌入HTML代码,并且这个元素可以像文档输入框一样进行文本的编辑,它同时还可以设置文本样式。写博客的工具就是一个功能丰富的富文本编辑器,编辑邮件以及论坛发贴都用到富文本编辑器。

3.常用的富文本编辑器

https://cloud.tencent.com/developer/article/1141421  //常用的六个富文本编辑器

1::功能齐全 tinymce|TinyMCE | The Most Advanced WYSIWYG HTML Editor

官方网址:https://www.tinymce.com/

TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。

2:百度 ueditor|UEditor - 首页

官方网址:http://ueditor.baidu.com/website/

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码...

3:经典的ckeditor|CKEditor.com

官方网址:https://ckeditor.com/

4:经典的kindeditor|在线HTML编辑器

官方网址:http://kindeditor.net/demo.php

5:wysiwyg|微型、开源的Bootstrap所见即所得(WYSIWYG)富文本编辑器 -- 由MindMup贡献

官方网站http://www.bootcss.com/p/bootstrap-wysiwyg/

6:html5编辑器|Squire

官方网站http://neilj.github.io/Squire/

另附三款源码:

wangEditor|GitHub - wangfupeng1988/wangEditor: wangEditor —— 轻量级web富文本框

wangEditor—— 轻量级 web 富文本编辑器,配置方便,使用简单。支持 IE10+ 浏览器。

官网:www.wangEditor.com

文档:www.kancloud.cn/wangfupeng/wangeditor3/332599

源码:github.com/wangfupeng1988/wangEditor

tower用的编辑器|GitHub - mycolorway/simditor: An Easy and Fast WYSIWYG Editor

github:https://github.com/mycolorway/simditor

summernote 编辑器|GitHub - summernote/summernote: Super simple WYSIWYG editor

github :https://github.com/summernote/summernote

4.实现一个简单的富文本编辑器

//待完善,补充...

https://github.com/ningxiaofa/Rich-text-editor

参考:

https://www.cnblogs.com/muyunren/p/8250596.html  //富文本编辑器开发原理

http://www.cnblogs.com/keepfool/archive/2011/12/21/2295335.html  //所见即所得富文本编辑器实现原理

https://www.cnblogs.com/longhx/p/5422003.html  //实现一个简易的富文本编辑器(一)

5.问题/补充

https://www.cnblogs.com/longhx/p/5422003.html  //实现一个简易的富文本编辑器(一)

1.设置背景色,不能取消背景色

原因是:背景色设置为固定颜色,每次重复执行设置背景色.

解决办法:TBD

2. 思考如何加上引用[""],以及如何取消应用

思路:TBD

WYSIWYG  ['wɪzɪ'wɪg]

abbr. 所见即所得(What You See Is What You Get)

为了不影响当前 document, 通常的做法是在页面中嵌入一个 iframe 元素,然后对这个 iframe 内的 document(通过 iframe.contentWindow.document 获得)进行操作。

#c8cbcf  //click点击选中后

#DEE0E2  //hover悬浮

6.参考

https://w3c.github.io/editing/execCommand.html

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand#%E5%91%BD%E4%BB%A4 //命令大全 英文版

https://www.cnblogs.com/leong-min/p/6483523.html //Javascript中document.execCommand()的用法

http://neilj.github.io/Squire/  //使用这个富文本编辑器为切入点,搞明白原理[正合适]  //发现源代码很多,怎么组织的代码也不是很清楚,需要分步了解,先了解怎么使用,后了解代码组织结构,实现原理

后续补充

...

富文本编辑器原理 - 学习/实践相关推荐

  1. kind富文本编辑器_富文本编辑器原理探索

    经常在做企业网站的管理系统的时候需要用到富文本编辑器,之前基本上都是直接去 npm 或者 github 上面搜找一些排名考前或者 readme 写的好的库,直接拿来用.万变不离其宗,是时候探索下本质了 ...

  2. android 富文本编辑器_富文本编辑器原理探索

    经常在做企业网站的管理系统的时候需要用到富文本编辑器,之前基本上都是直接去 npm 或者 github 上面搜找一些排名考前或者 readme 写的好的库,直接拿来用.万变不离其宗,是时候探索下本质了 ...

  3. js 免费可靠cdn地址(富文本编辑器tinymce的实践)

    推荐一个 cdn源的可靠源地址(免费且持久) https://www.jsdelivr.com/?query=tinymce 有个富文本编辑的需求,要求导入html字符串去生成富文本htm,使用的是r ...

  4. 原生手写富文本编辑器组件

    H5富文本编辑器原理解析: 核心属性: 1.contentEditable="true"; //属性规定是否可编辑元素的内容 2.window.document.designMod ...

  5. 三甲:在线富文本编辑器的架构设计及实践

    12月5日, 极客邦(InfoQ)在深圳举办 GMTC 大会,蚂蚁集团语雀编辑器技术同学三甲受邀参加大会并分享<在线富文本编辑器的架构设计及实践>,以下内容是根据现场演讲收集整理. 大家下 ...

  6. (转)学习淘淘商城第二十二课(KindEditor富文本编辑器的使用)

    http://blog.csdn.net/u012453843/article/details/70184155 上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题 ...

  7. 富文本编辑器 —— 学习笔记

    富文本编辑器 -- 学习笔记 文章目录 富文本编辑器 -- 学习笔记 一.wangEditor 1.内容处理--获取/设置 JSON 一.wangEditor 1.内容处理--获取/设置 JSON 使 ...

  8. 学习整理在php中使用KindEditor富文本编辑器

    学习整理在php中使用KindEditor富文本编辑器 1.下载编辑器 2.部署kindeditor编辑器 3.在html页面里引入编辑器 4.Ajax提交表单时获取不到 KindEditor 内容 ...

  9. 【实践】简洁大方的summernote 富文本编辑器插件的用发——导入篇

    首先在这里吐槽一下,网上不少教程实在太坑人,错误的代码也敢发上来真的是误人子弟,这篇文章是我踩了无数个坑写上来的,可能也会有不足之处所以自己以后可能也会进行更正. 好吧,先说说最近的情况,忙着学校的期 ...

最新文章

  1. .统计日志中攻击的IP次数然后加IP屏蔽
  2. 斯洛文尼亚最大零售商接受BCH支付
  3. 通信upf是什么意思_5G给边缘计算带来了什么?
  4. yum是干什么的_什么是yum源,yum的工作原理又是什么
  5. C# WinForm中获取当前程序运行目录的方法
  6. php长轮询阻塞,ajax长轮询时php被阻塞
  7. ES6(二)——字符串模板、标签模板字符串、函数的默认参数、剩余参数、数组对象的展开语法、数值的表示、Symbol
  8. PreScan中对象沿预设轨迹运动的若干方式介绍
  9. arcgis更改字段名_ArcGIS怎么修改属性表字段名称
  10. GPS距离测量与定位方法概述
  11. JDBC--DAOUtil封装
  12. 小程序员的不完整大学回忆3
  13. MacBook Pro 用户系统故障修复
  14. python九九乘法表如何对齐_python怎么样输出九九乘法表
  15. 《宝塔面板教程6》:如何修改用户名和密码
  16. 如何在电脑浏览器查看微信文章
  17. 什么情况下PMP可自学?
  18. bilibili服务器维护7月,GitHub - thestarweb/bilibilidan: 一个B站弹幕姬,就是不会在第一时间维护。。支持插件!!...
  19. 软件可靠性测试与用例设计
  20. 厉害了!中国农历算法

热门文章

  1. SALSA for unity 实现 眨眼 表情 口型
  2. Python – 眨眼检测项目
  3. 从“不作恶”到“门就在那边”,谷歌 AI 伦理史
  4. iOS:iOS开发非常全的三方库、插件、大牛博客等等
  5. 算法题:长城 广度优先搜索
  6. Matlab画常见的信号函数二
  7. Prefab资源和Random类 .
  8. Unity3d 知识点2
  9. 寻求一个兼职的安卓开发工程师
  10. 中国移动首颗MCU芯片——CM32M101A