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

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

现在基本上都是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