DDR爱好者之家

自己打造HTML在线编辑器的实现难点分析
站长资源 2024/5/12 佚名
75 1538
DDR爱好者之家 Design By 杰米

HTML在线编辑器实际上是什么

其实有好几种实现方式，目前用得最多、兼容性最好的还是iframe方式。

<iframe src="/UploadFiles/2021-04-02/">

只有这个空iframe是不行的，还要用Javascript把它设成可编辑：

iframe.contentWindow.document.designMode = "on";
iframe.contentWindow.document.contentEditable = true;

换而言之，HTML在线编辑器就是一个可编辑的iframe。

加粗、斜体、下划线、加链接等功能如何实现

浏览器已经提供了实现这些功能的接口execCommand：

iframe.contentWindow.document.execCommand(cmd, isDefaultShowUI, value);

这三个参数的意思分别是：

  • cmd：命令文本，有好多，IE的可以看这里，Firefox的可以看这里。
  • isDefaultShowUI：是否默认显示交互界面，比如加链接的时候，可以通过界面填入链接。不过这个参数存在兼容性问题，一般设为false将其禁用，并另外制作交互界面。
  • value：传入的值，某些命令可以省略。

execCommand的问题是，生成的代码可能不标准，比如在IE下，文字加粗用的是b标签而不是strong标签。

交互问题

用户不可能总是在编辑器中输入，比如加粗、插入图片等功能是通过按钮操作的。假设用户要加粗一段选中的文字，当他按了加粗按钮后，选区以及焦点也会跟着跑到那去，因此选区（选中的文字）丢失，操作也就无法完成；同理，插入图片时插入位置也会丢失。

也就是说，要保存最后出现在编辑器中的选区。我采取的方案是，当焦点在编辑器内的时候，用一个定时器（setInterval）定时获取当前选区。选区编程平时很少用，做起来也有很多兼容性问题，主要是参考微软的MSDN（TextRange ControlRange）和Mozilla的MDC（Range Selection）了。

回车问题

在IE下，按回车是换段落，生成<p>，但在Firefox下是换行，生成的是<br>。要解决这个问题，就要监听keydown事件，如果检测到按键是回车，就插入“<p></p>”。

获取标准的代码

如何获取编辑的内容呢？这个问题很简单，只要获取iframe页面body中的innerHTML就可以了：

var content = iframe.contentWindow.document.body.innerHTML;

然而，IE下的innerHTML非常不标准：标签名是大写的，属性没有引号包起来，单标签也没有结束符……即便是Firefox下获取的代码，也有少量瑕疵。这个时候就要用正则表达式对代码进行标准化处理。

总结

不多说了，做一遍HTML编辑器，你就会知道CKEditor是多么强大。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
DDR爱好者之家 Design By 杰米