写在前面

现在网上有很多现成的富文本编辑器，比如百度家的UEditor，kindeditor，niceditor等等，功能特别的多，API也很多，要去熟悉他的规则也很麻烦，所以想自己了解一下原理，做一个功能少点的编辑器，后面再不断累加、完善。

目前文本编辑器实现的功能有：选择字体大小、颜色、加粗、斜体、下划线。有 '提交' 和 '编辑' 按钮。

关键代码

document.execCommand() 函数　　　 <>

contentEditable   属性　　　　　　　　<>

[前端随笔][JavaScript] 制作一个富文本编辑器的更多相关文章

  1. iView + vue-quill-editor 实现一个富文本编辑器（包含图片，视频上传）

    1. 引入插件(注意IE10以下不支持) npm install vue-quill-editor --savenpm install quill --save (Vue-Quill-Editor需要 ...

  2. [前端随笔][CSS] 制作一个加载动画 即帖即用

    说在前面 描述 [加载中loading...] 的动画图片往往使用GIF来实现,但GIF消耗资源较大,所以使用CSS直接制作更优. 效果传送门1 效果传送门2 关键代码 @keyframes 规则 用 ...

  3. [译] 通过 contentEditable 属性创建一个所见即所得的编辑器（富文本编辑器）

    译者注 这只是一篇入门教程,介绍了一些基础知识,仅供参考,切不可因此觉得富文本编辑器很简单. 创建富文本编辑器是一个非常复杂的工程,需要考虑到方方面面,也有很多坑(请参考原文第一条评论). 为免误导大 ...

  4. django之百度Ueditor富文本编辑器后台集成

    Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因 ...

  5. Spring+SpringMVC+MyBatis+easyUI整合优化篇（六）easyUI与富文本编辑器UEditor整合

    日常啰嗦 本来这一篇和接下来的几篇是打算讲一下JDBC和数据库优化的,但是最近很多朋友加我好友也讨论了一些问题,我发现大家似乎都是拿这个项目作为练手项目,作为脚手架来用的,因此呢,改变了一下思路,JD ...

  6. django富文本编辑器

    -------------------tinymce富文本编辑器1.下载安装 1.在网站pypi网站搜索并下载"django-tinymce-2.4.0" 2.解压:tar zxv ...

  7. easyUI整合富文本编辑器KindEditor详细教程(附源码)

    原因 在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...

  8. vue集成百度UEditor富文本编辑器

    在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器.那么.如果你有这个需求.希望可以帮助到你 vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是 ...

  9. JSP嵌入ueditor、umeditor富文本编辑器

    一.下载: 1.什么是富文本编辑器?就是: 或者是这个: 其中第一个功能比较详尽,其主要用来编写文章,名字叫做udeitor. 第二个就相对精简,是第一个的MINI版,其主要用来编辑即时聊天或者发帖, ...

随机推荐

  1. luoguP5105 不强制在线的动态快速排序

    emm 可重集合没用用.直接变成不可重复集合 有若干个区间 每个区间形如[L,R] [L,R]计算的话,就是若干个连续奇数的和.拆位统计1的个数 平衡树维护 加入一个[L,R],把相交的区间合并.之后 ...

  2. profit

    Portal --> broken qwq Description 大M成立的怪兽电力公司最近刚建立了一个网站.这个季度共有\(n\)天,第\(i\)天共有\(v[i]\)个用户点击该网站,总的 ...

  3. 【期望】【P5081】Tweetuzki 爱取球

    Description Tweetuzki 有一个袋子,袋子中有 \(N\) 个无差别的球.Tweetuzki 每次随机取出一个球后放回.求取遍所有球的期望次数. 取遍是指,袋子中所有球都被取出来过至 ...

  4. win7系统用笔记本共享wifi热点 让手机免费上网

    之前一直在用这个方法把自己的笔记本变成一个wifi热点,让手机也可以直接连wifi上网,节省网费和路由器购买费. 其实就是开启了windows 7的隐藏功能:虚拟WiFi和SoftAP(即虚拟无线AP ...

  5. Spring MVC 向前台页面传值-ModelAndView

    ModelAndView 该对象中包含了一个model属性和一个view属性 model:其实是一个ModelMap类型.其实ModelMap是一个LinkedHashMap的子类 view:包含了一 ...

  6. hihocoder 1509异或排序

    描述 给定一个长度为 n 的非负整数序列 a[1..n] 你需要求有多少个非负整数 S 满足以下两个条件: (1).0 ≤ S < 2^60 (2).对于所有 1 ≤ i < n ,有 ( ...

  7. windows下php扩展存在但无法加载的问题

    1.可能存在多个php环境,扩展没有放对地方 2.扩展和php版本不对应,例如,php是32位,扩展是64位:或者php是nts版本,但是扩展不是nts版本.

  8. python学习笔记(五) 200行实现2048小游戏

    用前文提到的基础知识,和网上流行的2048源码,用python实现该游戏. 先将用户操作和游戏逻辑绑定. WASD分别对应移动方向上.左.下.右 然后实现矩阵的转置和逆置,这样只要实现一个方向的移动, ...

  9. 【Android】完善Android学习（七：API 4.0.3）

    备注:之前Android入门学习的书籍使用的是杨丰盛的<Android应用开发揭秘>,这本书是基于Android 2.2API的,目前Android已经到4.4了,更新了很多的API,也增 ...

  10. 关于java 获取 html select标签 下拉框 option 文本内容 隐藏域

    在HTML中从多选下拉框中提取已选中选项的文本内容到后台,被这个问题难倒了. demo.jsp文件 <select id="selecttype" name"typ ...