模仿开心网做的在线html编辑器

最新推荐文章于 2022-03-21 10:44:14 发布

转载最新推荐文章于 2022-03-21 10:44:14 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qiantuwuliang/archive/2009/06/26/1511432.html

文章标签：

#javascript #ViewUI

转自：http://huqilong.blog.51cto.com/53638/115479

     最近做社区，产品认准了开心网的编辑器，但是那个笔记其用到prototype框架，而我们使用的jquery-1.2.2.js，两者有冲突，于是一狠心，查了查资料，用了两天时间写了一个.
       刚开始查的资料，在线编辑器的原理大概如下：
       一、基于textarea 特点：简单，但是表情只能通过ubb进行控制，不能所见即所得
       二、基于div 特点：简单，所见即所得，比较复杂，但是兼容性不好,js不易控制.
       三、基于iframe，具有以上两者的优点，没有以上两者的缺点

那就用第三种了.

       附件中是实现的东西，本人js面向对象这块不是很熟悉，高人可以修改指点下，别忘了留言啊，可以的话给我也发一份:huqilong@126.com
       整个编辑器就一个js文件，大概不到200行js代码吧，如果需要加粗、图片等功能，只要看下里面的另外一个文件即可。
       特点：实现了“开心网”编辑器所有功能
             代码量极少：101行js代码 js+css总共4k
             引用简单：两句代码搞定
             支持一个页面多个文本框应用
             面向对象的js封装
             简洁，无多余功能
             扩展简单：想要其他功能可以很easy地添加
             支持IE6、firefox、iE7

源码下载

使用方法如下：

     效果图：


   js代码

html代码：

< html >
< head >
     < link href ="editor.css" type ="text/css" rel ="stylesheet" >
     < script language ="javascript" src ="editor.js" ></ script >
         < script language ='javascript' >
           function test()
          {
              alert( editor.getHtml());
          }
         </ script >
</ head >
< body >
< script language ="javascript" >
var editor = new EasyEditor( " editor1 " );
editor.init();
</ script >
< br />
< br />
< input type ="button" value ="测试" id ="test" onclick ='test();' />
</ body >
</ html >

=====================================================================

改进篇

html代码：

< html >
< head >
     < link href ="editor.css" type ="text/css" rel ="stylesheet" >
     < script language ="javascript" src ="editor.js" ></ script >
</ head >
< body >
< br />
< div id ="testDiv" style ="background-color:red;" ></ div >
</ body >
</ html >

< script language ="javascript" >
var editor = new EasyEditor( " testDiv " );
editor.init();
function getHtml(){
alert(editor.getHtml());
}
</ script >

< a href ="#" onclick ="getHtml();" > 取值 </ a >

转载于:https://www.cnblogs.com/qiantuwuliang/archive/2009/06/26/1511432.html