欢迎使用zEditor v1.1

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

欢迎使用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>标签

点击打印文本区域内容(含格式,控制台查看)