├── img └── zEditor.png ├── js └── zEditor.js ├── README.md ├── LICENSE ├── css └── zEditor.css └── index.html /img/zEditor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuobaye0711/zEditor/HEAD/img/zEditor.png -------------------------------------------------------------------------------- /js/zEditor.js: -------------------------------------------------------------------------------- 1 | const changeStyle = data => { 2 | data.value ? document.execCommand(data.command, false, data.value) : document.execCommand(data.command, false, null) 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # zEditor 2 | ### *a light weight rich text editor* 3 | 4 | *** 5 | 6 | 一款超轻量级富文本编辑器，不需要任何依赖（样式、脚本、图标等），原生JS和H5实现，方便您进行学习 7 | 8 | 该项目特点： 9 | 10 | - 简洁美观易读 11 | - 1行js核心代码实现所有功能 12 | - 无依赖 13 | 14 | 预览图 15 | 16 | ![zEditor](img/zEditor.png) 17 | 18 | [demo](http://tuobaye.com/demo/zEditor/index) -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 zhleven 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /css/zEditor.css: -------------------------------------------------------------------------------- 1 | #wrapper { 2 | border: 1px solid #dddddd; 3 | } 4 | #text-area { 5 | background: #272822; 6 | padding: 10px; 7 | height: auto; 8 | min-height: 100px; 9 | max-height: 500px; 10 | color: #e5e5e5; 11 | border-radius: 5px; 12 | overflow: auto; 13 | } 14 | #control-area { 15 | margin-bottom: 5px; 16 | } 17 | #submit-btn { 18 | margin-top: 5px; 19 | width: 265px; 20 | float: right; 21 | margin-right: 20px; 22 | } 23 | .btn { 24 | display: block; 25 | font-size: 12px; 26 | text-decoration: none !important; 27 | padding: 3px 5px; 28 | border-radius: 3px; 29 | box-shadow: inset 0px 0px 2px #fff; 30 | } 31 | .left { 32 | border-top-right-radius: 0; 33 | border-bottom-right-radius: 0; 34 | } 35 | .middle { 36 | border-radius: 0; 37 | } 38 | .right { 39 | border-top-left-radius: 0; 40 | border-bottom-left-radius: 0; 41 | } 42 | .btn-group { 43 | display: inline-block; 44 | } 45 | .btn-group .btn { 46 | margin-right: -5px; 47 | display: inline-block; 48 | } 49 | .btn-group .right { 50 | margin-right: 10px; 51 | } 52 | .grey { 53 | color: #444; 54 | border: 1px solid #d0d0d0; 55 | background-image: -moz-linear-gradient(#ededed, #e1e1e1); 56 | background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e1e1e1), to(#ededed)); 57 | background-image: -webkit-linear-gradient(#ededed, #e1e1e1); 58 | background-image: -o-linear-gradient(#ededed, #e1e1e1); 59 | text-shadow: 1px 1px 1px #fff; 60 | background-color: #e1e1e1; 61 | } 62 | .blue { 63 | color: #41788c; 64 | border: 1px solid #6fb1c7; 65 | background-image: -moz-linear-gradient(#aae5f7, #73d0f1); 66 | background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#73d0f1), to(#aae5f7)); 67 | background-image: -webkit-linear-gradient(#aae5f7, #73d0f1); 68 | background-image: -o-linear-gradient(#aae5f7, #73d0f1); 69 | text-shadow: 1px 1px 1px #bfeafb; 70 | background-color: #73d0f1; 71 | } 72 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | zEditor 6 | 7 | 8 | 9 |

欢迎使用zEditor v1.1

没有任何依赖，纯粹原生JS+HTML实现一个文本编辑器。想要看更多技术文章，欢迎访问tuobaye.com，或者给我的这个github项目github.com/tuobaye0711/zEditor点个star哦，谢谢啦~

10 |
11 |
12 |
13 | ◀撤销 14 | 重做▶ 15 |
16 |
17 | 斜体 18 | 粗体 19 | 下划线 20 | 删除线 21 |
22 |
23 | 左 24 | 居中 25 | 右 26 | 两端 27 |
28 |
29 | 右缩进 30 | 左缩进 31 |
32 |
33 | 有序列表 34 | 无序列表 35 |
36 |
37 | 上标 38 | 下标 39 |
40 | 41 |
42 | 全选 43 | 复制 44 | 剪切 45 |
46 |
47 | 1号 48 | 2号 49 | 3号 50 | 4号 51 | 5号 52 | 6号 53 | 7号 54 |
55 |
56 | 宋 57 | 黑 58 | 楷 59 | 仿宋 60 | 雅黑 61 |
62 |
63 |    64 |    65 |    66 |    67 |    68 |    69 |    70 |
71 |
72 |
73 |

欢迎使用zEditor

该项目主要使用document.execCommand实现，下面是参考的MDN web docs的api文档，把所有易于实现的列出来，挨个进行实现~

待支持的document.execCommand api（被划掉的表示已支持）:

  • bold

开启或关闭选中文字或插入点的粗体字效果。IE浏览器使用 <strong>标签，而不是<b>标签。

  • copy

拷贝当前选中内容到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。

  • createLink

将选中内容创建为一个锚链接。这个命令需要一个HREF URI字符串作为参数值传入。URI必须包含至少一个字符，例如一个空格。（浏览器会创建一个空链接）

  • cut

 剪贴当前选中的文字并复制到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。

  • decreaseFontSize

 给选中文字加上 <small> 标签，或在选中点插入该标签。(IE浏览器不支持)

  • fontName

在插入点或者选中文字部分修改字体名称. 需要提供一个字体名称字符串 (例如："Arial")作为参数。

  • fontSize

在插入点或者选中文字部分修改字体大小. 需要提供一个HTML字体尺寸 (1-7) 作为参数。

  • foreColor

在插入点或者选中文字部分修改字体颜色. 需要提供一个颜色值字符串作为参数。

  • formatBlock

添加一个HTML块式标签在包含当前选择的行, 如果已经存在了，更换包含该行的块元素 (在 Firefox中, BLOCKQUOTE 是一个例外 -它将包含任何包含块元素). 需要提供一个标签名称字符串作为参数。几乎所有的块样式标签都可以使用(例如. "H1", "P", "DL", "BLOCKQUOTE"). (IE浏览器仅仅支持标题标签 H1 - H6, ADDRESS, 和 PRE,使用时还必须包含标签分隔符 < >, 例如 "<H1>".)

  • heading

添加一个标题标签在光标处或者所选文字上。 需要提供标签名称字符串作为参数 (例如. "H1", "H6"). (IE 和 Safari不支持)

  • increaseFontSize

在选择或插入点周围添加一个BIG标签。(IE浏览器不支持)

  • indent

缩进选择或插入点所在的行， 在 Firefox 中, 如果选择多行，但是这些行存在不同级别的缩进, 只有缩进最少的行被缩进。

  • insertHorizontalRule

在插入点插入一个水平线（删除选中的部分）

  • insertImage

在插入点插入一张图片（删除选中的部分）。需要一个image SRC URI作为参数。这个URI至少包含一个字符。空白字符也可以（IE会创建一个链接其值为null）

  • insertOrderedList

在插入点或者选中文字上创建一个有序列表

  • insertUnorderedList

在插入点或者选中文字上创建一个无序列表。

  • insertParagraph

在选择或当前行周围插入一个段落。(IE会在插入点插入一个段落并删除选中的部分.)

  • italic

在光标插入点开启或关闭斜体字。 (Internet Explorer 使用 EM 标签，而不是 I )

  • justifyCenter

对光标插入位置或者所选内容进行文字居中。

  • justifyFull

对光标插入位置或者所选内容进行文本对齐。

  • justifyLeft

对光标插入位置或者所选内容进行左对齐。

  • justifyRight

对光标插入位置或者所选内容进行右对齐。

  • outdent

对光标插入行或者所选行内容减少缩进量。

  • redo

重做被撤销的操作。

  • removeFormat

对所选内容去除所有格式

  • selectAll

选中编辑区里的全部内容。

  • strikeThrough

在光标插入点开启或关闭删除线。

  • subscript

在光标插入点开启或关闭下角标。

  • superscript

在光标插入点开启或关闭上角标。

  • underline

在光标插入点开启或关闭下划线。

  • undo

撤销最近执行的命令。

  • unlink

去除所选的锚链接的<a>标签

74 |
75 | 点击打印文本区域内容（含格式，控制台查看） 76 |
77 |
78 | 79 | 80 | --------------------------------------------------------------------------------