基于jquery的在线编辑器XHEditor

使用方法

1. 下载xhEditor最新版本。
   下载地址：http://code.google.com/p/xheditor/downloads/list

2. 解压zip文件，将其中的xheditor.js以及xheditor_emot、xheditor_plugins和xheditor_skin三个文件夹上传到网站相应目录

3. 在相应html文件的</head>之前添加
<script type="text/javascript" src="../../jquery/jquery-1.3.2.min.js"></script>
 <script type="text/javascript" src="../../xheditor.js"></script>
根据需要改变相对路径

4.
方法1：在textarea上添加属性： class="xheditor"
方法2：在您的页面初始JS代码里加上：
$('#elm1').xheditor(true)；
例如：
$({
$('#elm1').xheditor(true)；
});
相应的隐藏编辑器的代码为
$('#elm1').xheditor(false)；

注意：

xheditor.js和xheditor_emot、xheditor_plugins和xheditor_skin必须在同一目录下（一般都在根目录下），否则编辑器的工具条显示不出来

jsp页面：加入

<textarea id="content" name="content" class="xheditor" rows="50" cols="150" style="width:100%">
            </textarea>

class还可以取的值

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/abasen/archive/2009/09/01/4508634.aspx

 

 

发现一个超赞的在线编辑器xhEditor

官方网址:http://code.google.com/p/xheditor/

以前我常常用FCKEditor,但是总觉得FckEditor适合于办公但是不适合作为论坛发帖。一是因为它体积太大了，二是因为它太严肃了。另外，我还发现它有一个奇怪的情况：那就是在Chrome浏览器里完全无法用，只能看到一个空空的框子。实在很奇怪，不知道为什么会出现这种怪情况。我只发现FCKEditor在火狐和IE6、IE7中是正常的，其它没有试验过。

我对它的另一点不满意是它太复杂了。很多时候我希望对它进行改造，比如说：每当编辑器中加入一张图片，这张图片的地址自动插入到下面的“选择图片”Select框里，作为一个供选选项。但是麻烦的是fckeditor的按钮机制真的太复杂了，我根本看不懂它的js，也不知道如何改造句它们。

最近我发现了一个更好的在线编辑器，真是爱不释手啊。那就是xheditor。它有繁体中文和简体中文两个版本。不过我发现它有一个令我头痛之处，那就是它是用utf-8编码的。但是我做的网页多数都是用gb2312编码的。怎么办呢？不过我发现其实也不麻烦，我把那些代码打开，把里面的utf-8全部改成gb_2312，然后再保存成ANSI编码就搞定了。看看我整理过的这个GB2312版的hxeditor吧！

点击下载此RAR文件

一些用法说明值得介绍一下：解压这个压缩包并上传到服务器的任何地方。打开那个demo.html，你会看到这么两行代码：

复制代码 运行代码(仅支持vbs,javascript,html)

1. <script type="text/javascript" src="xheditor/jquery-1.3.2.min.js"></script>  
2. <script type="text/javascript" src="xheditor/xheditor.js"></script>  

<script type="text/javascript" src="xheditor/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="xheditor/xheditor.js"></script>

然后再把那个要插入在线编辑框的textarea加入属性class="xheditor"或者 class="xheditor-simple"或者class="xheditor-mini"，把它的id设置为与name相同。比如：

复制代码 运行代码(仅支持vbs,javascript,html)

1. <textarea id="content" name="content" class="xheditor" rows="12" cols="80" style="width: 80%">  
2. <p><span style="font-size:small;color:#ff6600;"><strong>登幽州台歌</strong></span></p><p><u>陈子昂</u></p><p>前不见古人，后不见来者。<img src="xheditor/emot/shocked.gif"/></p><p>念天地之悠悠，独怆然而涕下！<img src="xheditor/emot/cry.gif"/></p>  
3. </textarea>  

<textarea id="content" name="content" class="xheditor" rows="12" cols="80" style="width: 80%">
<p><span style="font-size:small;color:#ff6600;"><strong>登幽州台歌</strong></span></p><p><u>陈子昂</u></p><p>前不见古人，后不见来者。<img src="xheditor/emot/shocked.gif"/></p><p>念天地之悠悠，独怆然而涕下！<img src="xheditor/emot/cry.gif"/></p>
</textarea>

如果xheditor文件夹和需要调用它们的demo.html文件不在同一目录下，请把那行“xheditor/jquery-1.3.2.min.js”以及“xheditor/xheditor.js”改成正确的地址。

xheditor目录下有个skin目录，里面有三个皮肤包，分别是default、o2007blue、o2007silver。三种皮肤看起来都挺漂亮。我选了o2007blue。如果要改皮肤的话，只需要打开xheditor/xheditor.js，把那一段代码

$.xheditor=function(textarea,options){var defaults={skin:" o2007blue",tools:"full",clearScript:true,clearStyle:true,showBlocktag:false,forcePtag:true,keepValue:true,uploadExt:"jpg,jpeg,gif,png"};

中的红字部分改成你想要的皮肤名称。

xheditor一共有种基本模式，分别是full（完整模式）、simple（简洁模式）、mini（迷你模式），以适应不同的需要。textarea的class="xheditor"表示使用完整模式，textarea的class="xheditor-simple"表示使用简洁模式，textarea的class="mini"表示使用迷你模式。三种不同的模式所具有的功能请看此图：点击查看大图。但是你还可以进一步自定义自己需要显示的功能。方法是修改这段内容：

复制代码 运行代码(仅支持vbs,javascript,html)

1. var toolsThemes={mini:"GStart,Bold,Italic,Underline,Strikethrough,GEnd,Separator,GStart,Align,List,GEnd,Separator,GStart,Link,Img,About,GEnd",simple:"GStart,Blocktag,Fontface,FontSize,Bold,Italic,Underline,Strikethrough,FontColor,BackColor,GEnd,Separator,GStart,Align,List,Outdent,Indent,GEnd,Separator,GStart,Link,Unlink,Img,Emot,About,GEnd",full:"GStart,Cut,Copy,Paste,Pastetext,GEnd,Separator,GStart,Blocktag,Fontface,FontSize,Bold,Italic,Underline,Strikethrough,FontColor,BackColor,Removeformat,GEnd,Separator,GStart,Align,List,Outdent,Indent,GEnd,Separator,GStart,Link,Unlink,Img,Flash,Media,Emot,Table,GEnd,Separator,GStart,Source,Preview,Fullscreen,About,GEnd"}  

var toolsThemes={mini:"GStart,Bold,Italic,Underline,Strikethrough,GEnd,Separator,GStart,Align,List,GEnd,Separator,GStart,Link,Img,About,GEnd",simple:"GStart,Blocktag,Fontface,FontSize,Bold,Italic,Underline,Strikethrough,FontColor,BackColor,GEnd,Separator,GStart,Align,List,Outdent,Indent,GEnd,Separator,GStart,Link,Unlink,Img,Emot,About,GEnd",full:"GStart,Cut,Copy,Paste,Pastetext,GEnd,Separator,GStart,Blocktag,Fontface,FontSize,Bold,Italic,Underline,Strikethrough,FontColor,BackColor,Removeformat,GEnd,Separator,GStart,Align,List,Outdent,Indent,GEnd,Separator,GStart,Link,Unlink,Img,Flash,Media,Emot,Table,GEnd,Separator,GStart,Source,Preview,Fullscreen,About,GEnd"}

把想要的按钮名称留下，把不想要的按钮名称砍掉。比如说，你不想要那个全屏功能，就可以把那个Fullscreen,去掉。我发现那个About,是不能去掉的，所以请把它留下。而且确实应该尊重程序作者的著作权和署名权

 

还有其它一些高级功能，比如说UBB版的xheditor等等，请去看官方网站http://code.google.com/p/xheditor/wiki/About，要找utf-8的原版xheditor，也请去官方网站下载。

刚才我还提到：我希望每当在线编辑器中插入一张图片，下面的选择图片Select框里自动加入一个图片地址。我发现只要在这里加入一段红字部分内容：

else{if(jParent.size()==1){jParent.remove()}}_this.hidePanel(); parent.getpicurl(jSrc.val());return false});_this.showDialog(jImg);};

然后再在那外面编写function getpicurl(){///}就好了。

我在刚才那个网页里添加的那个function getpicurl()内容如下：

复制代码 运行代码(仅支持vbs,javascript,html)

1. <script type="text/javascript">   
2. function getpicurl(picurl){   
3. var selectObject=window.document.form1.defaultpicurl;   
4. var newopt=document.createElement("option");   
5. newopt.text=picurl;   
6. newopt.value=picurl;   
7. selectObject.add(newopt,selectObject.options.length);   
8. selectObject.options[selectObject.options.length-1].selected=true;   
9. }   
10. </script>  

<script type="text/javascript">
function getpicurl(picurl){
var selectObject=window.document.form1.defaultpicurl;
var newopt=document.createElement("option");
newopt.text=picurl;
newopt.value=picurl;
selectObject.add(newopt,selectObject.options.length);
selectObject.options[selectObject.options.length-1].selected=true;
}
</script>

我在chrome,firefox,IE7三种浏览器中测试了插入图片“http://www.google.cn/images/nav_logo4.png”下效果如图：

发现在chrome和IE7中都很正常，惟有在firefox中，虽然图片插进去了，但是下面的那个框里没有出现被选中的新选项