开发属于自己的在线编辑器--编辑器的核心

上一篇讲了怎么设计界面，这篇讲核心内容

现在基本上都是iframe的编辑器，所见即所得模式的，代码模式就是textarea 文本框

1：光标的定位

firefox下面好像不会出现丢失的问题，主要是IE下面

丢失光标是编辑器需要解决的首要问题，当你选中文字，然后需要设置字体或者改变字体颜色的时候发现选中的文字丢失

在你单击设置字体按钮的时候需要记录光标位置

var rng = mz_winifr.document.selection.createRange(); 创建当前的选区

mz_textlen = rng.text.replace(/\r?\n/g, ' ').length; 选中的内容的长度

if(!mz_textlen) // 这个判断是光标没有选中内容的时候

{

rng = mz_winifr.document.body.createTextRange();

}

var s = document.selection.createRange();

s.setEndPoint('StartToStart', rng);

mz_pos = s.text.replace(/\r?\n/g, ' ').length;

if(matches3 = s.htmlText.match(/<img[^\>]*>/ig)) mz_pos += matches3.length; //当编辑器里有图片的时候会计算错误，修正长度

if(matches4 = s.htmlText.match(/<\/tr|table>/ig)) mz_pos += matches4.length; //这个也是修正计算

长度已经得到，保存在变量 mz_pos 里，现在需要写回去

var r = mz_winifr.document.body.createTextRange();

r.collapse(true); //把光标重合到起点位置

r.moveStart('character', mz_pos); // 移动到开始位置

r.moveEnd('character', mz_textlen); //选中的文本长度

r.select(); //选中内容

}

2.document.execCommand命令

各种浏览器对 document.execCommand的支持 请查看

http://www.mzrui.com/forum.php?mod=viewthread&tid=4&extra=page%3D7

我们可以使用document.execCommand 对文本进行简单的加粗，下划线，居中，居左等操作

3,浏览器的差异-换行处理

当ie下面进行回车操作时，插入的是<p> firefox是<br>，统一换成<br>

需要监听键盘事件

mz_winifr.document.documentElement.attachEvent("onkeydown",keydown); //绑定onkeydown事件

function keydown(e)

{

if(e.keyCode == 13)

{

mz_winifr.document.selection.createRange().pasteHTML('<br>');

mz_winifr.document.selection.createRange().select();

return false;

}

}

4.模式的切换

当你2个模式来回切换的时候，你会发现切换到代码模式，你在切回来的时候，发现编辑的内容全挤在一起了

需要替换掉换行和空格

定义2个函数进行相互切换

function bbcodetohtml(str) //代码模式切换到所见即所得

{

str = str.replace(/\r\n|\n|\r/ig, '<br />'); //替换换行

str = str.replace(/^[^<>]*<|>[^<>]*<|>[^<>]*$/g, function(){return arguments[0].replace(/\s/g, " ");}); //替换空格

return str;

}

function htmltobbcode(str) //所见即所得切换到代码模式

{

str = str.replace(/(\r\n|\n|\r)/ig, ''); //替换掉，不然在模式切换时会产生莫名奇妙的换行

str = str.replace(/<br[^\>]*>/ig, "\n"); //换成文本框的换行

str = str.replace(/ /ig,' '); //换成空格

return str;

}

关键也就是上面那么多了，还有问题可以跟帖，或者查看木子在线编辑器

http://www.mzrui.com/forum.php?mod=viewthread&tid=144&extra=page%3D1

第一篇：开发属于自己的在线编辑器--编辑器的界面

原文地址：http://www.mzrui.com/forum.php?mod=viewthread&tid=157&fromuid=2