Html富文本编辑器

本文推荐两款简单的富文本编辑器【KindEditor,NicEdit】用于获得所见即所得的编辑效果,本文仅供学习分享使用,如有不足之处,还请指正。

概述

这两款编辑器都是采用JavaScript编写,不需要引用dll,可以与主流后端编程语言【Java , .NET,PHP,ASP等】无缝对接,体积小,可以将现有的TextArea变成富文本编辑器。下面来分别介绍下:

什么是KindEditor ?

KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

KindEditor 特点

  • 快速:体积小,加载速度快
  • 开源:开放源代码,高水平,高品质
  • 底层:内置自定义 DOM 类库,精确操作 DOM
  • 扩展:基于插件的设计,所有功能都是插件,可根据需求增减功能
  • 风格:修改编辑器风格非常容易,只需修改一个 CSS 文件
  • 兼容:支持大部分主流浏览器,比如 IE、Firefox、Safari、Chrome、Opera

示例

KindEditor,如下图所示,

如何获取获取编辑后的内容【KindEditor的可视化操作在新创建的iframe上执行,代码模式下的textarea框也是新创建的,所以最后提交前需要执行 sync() 将HTML数据设置到原来的textarea。】,可以采用如下代码:

// 取得HTML内容
html = editor.html();

// 同步数据后可以直接取得textarea的value
editor.sync();
html = document.getElementById('editor_id').value; // 原生API
html = K('#editor_id').val(); // KindEditor Node API
html = $('#editor_id').val(); // jQuery

// 设置HTML内容
editor.html('HTML内容');

关于本例KindEditor的Html代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>KindEditor</title>
        <link rel="stylesheet" href="kindeditor/themes/qq/qq.css" />
        <link rel="stylesheet" href="kindeditor/plugins/code/prettify.css"  />
        <script charset="UTF-8" src="kindeditor/kindeditor-all-min.js"></script>
        <script charset="UTF-8" src="kindeditor/lang/zh-CN.js"></script>
        <script charset="UTF-8" src="kindeditor/plugins/code/prettify.js"></script>
        <script type="text/javascript">
            var editor1;
            KindEditor.ready(function(K){
                  editor1=K.create('#t1',{
                    cssPath:'kindeditor/plugins/code/prettify.css',
//                    uploadJson:'../asp.net/upload_json.ashx',
//                    fileManagerJson:'../asp.net/file_manager_json.ashx',
                    allowFileManager:true,
                    afterCreate:function(){
                        var self=this;
//                        K.ctrl(doument,13,function(){
//                            self.sync();
//                            K('form[name=example]')[0].submit();
//                        });
//                        K.ctrl(self.edit.doc,13,function(){
//                            self.sync();
//                            K('form[name=example]')[0].submit();
//                        });
                    }
                });
                prettyPrint();
            });
            function preSave(){
                 var html = editor1.html();
                 editor1.sync();
                 var s =document.getElementById("t1").value;
                 document.getElementById("t2").value = s;
                 alert(s);
                 return false;
            }
        </script>
    </head>
    <body>
         <form id="example" name="example">
         <label>详细内容:</label>
        <textarea id="t1" name="t1" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;">

        </textarea>
        <input type="hidden" id="t2" value="" />
        <input type="submit" id="submit" value="提交" onclick="return preSave();" />
    </form>
    </body>
</html>

什么是NicEdit?

NicEdit is a Lightweight, Cross Platform, Inline Content Editor to allow easy editing of web site content on the fly in the browser.NicEdit Javascript integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing.

示例

关于如何获取编辑器后的内容【这里用textarea的id和值是获取不了的,因为nicedit会隐藏原有的textarea,并生成自带的输入框,这是要获取框内文本就需要通过其生成的类名去获取】:可以采用document.getElementsByClassName("nicEdit-main")[0].innerHTML;方式获取

关于本例中NicEdit的Html代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>NicEdit</title>
        <script type="text/javascript" src="NicEdit/nicEdit.js"></script>
        <script type="text/javascript">
            var editor1;
            bkLib.onDomLoaded(function(){
              editor1 =    new nicEditor({
                    fullPanel:true,
                    iconsPath : 'NicEdit/nicEditorIcons.gif'
                    }).panelInstance("t1");
            });
            function preSave(){
             var s=    document.getElementsByClassName("nicEdit-main")[0].innerHTML;
             document.getElementById("t2").value=s;
             alert(s);
             return false;
            }
        </script>
    </head>
    <body>
        <form id="example" name="example">
         <label>详细内容:</label>
        <textarea id="t1" name="t1" style="width:700px;height:300px;"></textarea>
        <input type="hidden" id="t2" name="t2" />
        <input type="submit" value="提交" id="submit" name="submit" onclick="return preSave();" />
        </form>
    </body>
</html>

备注

本文旨在抛砖引玉,最好的学习手册(包括下载地址)就是官网。

KindEditor:http://kindeditor.net/demo.php

NicEdit:http://nicedit.com/index.php

 

  • 15
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

老码识途呀

写作不易,多谢支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值