杰晶网络

在线所见即所得HTML编辑器的实现原理浅析
网络编程 2024/5/19 佚名
3 2

如今网站开发越来越提倡用户体验，为用户提供便利的工具也越来越多，而在线的HTML内容编辑器应该算是其中比较“古老”的一个了。功能简单的可以为用户提供文本的样式控制，例如文字的颜色、字体大小等；而功能复杂的甚至可以提供类似Word一样的强大功能。虽然现在各种开源的编辑器非常多，但是真正好用的并不多，所以它们改进工作也一直在进行中。

如今网上多数的编辑器都有很强大的功能，相对而言，在使用中也需要很多的配置，当然代码也自然会比较“臃肿”。如果我们并不需要功能那么强大的编辑器，那么可以自己实现一个，因为代码并不复杂。下面是一点个人的经验，仅供参考（以ExtJS的HTMLEditor为例）。

1、初始化。当页面加载完毕后，向页面添加一个IFrame（可选）。这里要注意的是，要判断页面的状态，要等页面完全加载完毕后再进行操作，防止出现找不到某些元素的错误。

2、打开编辑功能。将IFrame设为可以编辑（下面代码来自ExtJS的HTMLEditor）：
复制代码 代码如下:
// 获取iframe的window对象
getWin : function(){
        return Ext.isIE "text/css"><!--
body{border:0;margin:0;padding:3px;height:98%;cursor:text;}
--></mce:style><style type="text/css" mce_bogus="1">body{border:0;margin:0;padding:3px;height:98%;cursor:text;}</style></head><body></body></html>');
//打开document对象编辑模式
 doc.designMode = "on";
doc.close();

这样就可以向这个简单那的编辑器中写入内容了。
 
3、获取编辑器的内容，代码如下：
复制代码 代码如下:
//获取编辑器的body对象
var body = doc.body || doc.documentElement;
//获取编辑器的内容
var content = body.innerHTML;
//对内容进行处理，例如替换其中的某些特殊字符等等
//Some code

//返回内容
return content;

 4、增加样式设置。上面的编辑器虽然实现了基本功能，但是实在是有些太简单了，应该增加些简单的样式实现。document的execCommand方法使这种想法成为可能。

复制代码 代码如下:
//统一的执行命令方法
function execCmd(cmd, value){
    //doc对象的获取参照上面的代码
     //调用execCommand方法执行命令
    doc.execCommand(cmd, false, value === undefined "codetitle">复制代码 代码如下:
//doc对象的获取参考上面的对面
//光标处是否是粗体
var isBold = doc.queryCommandState('bold');
if(isBold){
  //改变Bold按钮的样式
}
//当然上面的代码是可以合并的，这里只不过是一个示意


//下划线
doc.queryCommandState('underline');
//斜体
doc.queryCommandState('italic');

本文只是为实现编辑器提供了简单的思路，其中的一些代码是可以直接使用的。建议，想自己实现编辑器的朋友可以参考下ExtJS中的HTMLEditor代码，既简单又比较清晰，可以在其上进行扩展。

最后提醒一点：一定要注意浏览器的兼容性问题，并且不要等接近尾声了再去测试兼容性，对于这么大量的JavaScript代码，调整是比较痛苦的事情。

标签：
所见即所得,HTML,编辑器,实现原理
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

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

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

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

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

更新动态

友情链接

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