admin管理员组文章数量:1559101
技术的波澜壮阔总是让我浏览往返,深陷其中 无法自拔.
我就佩服我这个钻研精神,涉及到前端的东西,什么东西我都能给你扯上一段.在工作咸鱼之际,也绝不放过自己,一颗奔腾的心永远保持着对技术的热爱与追求. 中华文化上下五年前,二近代文明的信息化却不是从中国诞生的,我真是深表遗憾.恨自己生不逢时.没有创造出a语言,碾压c语言,没有第一个创造计算机......啊,不知不觉扯远了.
我们把话题拉回来吧,谈谈这个富文本编辑器.
目前市面上有很多富文本编辑器了,有的老,有的旧,有的免费,有的收费,有的配置项多,有的配置项少......不管怎么,我都不打算用它们,我那么牛逼,肯定是要自己造个轮子啊(当然时间总是要运行的)..开始吧.
我们来用大白话说一下富文本编辑器原理
将一个div设置属性 contenteditable="true"
设置加粗,加横线,放大字体等效果 使用 document.execcommand('bold', false, '') 方法
富文本里最重要就是这两点,也是最基础的两点.
我们一个一个来介绍,
contenteditable 这个 属性是h5新增的属性,表示节点是否可进行编辑. 当设置为true是 你就可以对其内容进行增改
重点是document.execcommand()这个方法
bool = document.execcommand(acommandname, ashowdefaultui, avalueargument)
返回值 一个 boolean ，如果是 false 则表示操作不被支持或未被启用。
acommandname:
一个 domstring ，命令的名称。可用命令列表请参阅 命令 。
ashowdefaultui:
一个 boolean， 是否展示用户界面，一般为 false。mozilla 没有实现。
avalueargument:
一些命令（例如insertimage）需要额外的参数（insertimage需要提供插入image的url），默认为null。
命令:
backcolor:
修改文档的背景颜色。在stylewithcss模式下，则只影响容器元素的背景颜色。这需要一个
bold:
开启或关闭选中文字或插入点的粗体字效果。ie浏览器使用 标签，而不是标签。
clearauthenticationcache:
清除缓存中的所有身份验证凭据。
contentreadonly:
通过传入一个布尔类型的参数来使能文档内容的可编辑性。(ie浏览器不支持)
copy:
拷贝当前选中内容到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。
createlink:
将选中内容创建为一个锚链接。这个命令需要一个hrefuri字符串作为参数值传入。uri必须包含至少一个字符，例如一个空格。（浏览器会创建一个空链接）
cut:
剪贴当前选中的文字并复制到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。
decreasefontsize:
给选中文字加上 标签，或在选中点插入该标签。(ie浏览器不支持)
defaultparagraphseparator:
更改在可编辑文本区域中创建新段落时使用的段落分隔符。有关更多详细信息，请参阅标记生成的差异。
delete:
删除选中部分.
enableabsolutepositioneditor:
启用或禁用允许移动绝对定位元素的抓取器。firefox 63 beta/dev edition 默认禁用此功能(bug 1449564)。
enableinlinetableediting:
启用或禁用表格行和列插入和删除控件。(ie浏览器不支持)
enableobjectresizing:
启用或禁用图像和其他对象的大小可调整大小手柄。(ie浏览器不支持)
fontname:
在插入点或者选中文字部分修改字体名称. 需要提供一个字体名称字符串 (例如："arial")作为参数。
fontsize:
在插入点或者选中文字部分修改字体大小. 需要提供一个html字体尺寸 (1-7) 作为参数。
forecolor:
在插入点或者选中文字部分修改字体颜色. 需要提供一个颜色值字符串作为参数。
formatblock:
添加一个html块式标签在包含当前选择的行, 如果已经存在了，更换包含该行的块元素 (在 firefox中, blockquote 是一个例外 -它将包含任何包含块元素). 需要提供一个标签名称字符串作为参数。几乎所有的块样式标签都可以使用(例如. "h1", "p", "dl", "blockquote"). (ie浏览器仅仅支持标题标签 h1 - h6, address, 和 pre,使用时还必须包含标签分隔符 < >, 例如 "
发表评论