Html富文本编辑器

最新推荐文章于 2024-08-11 02:51:09 发布

weixin_34379433

最新推荐文章于 2024-08-11 02:51:09 发布

阅读量3.6k

点赞数

文章标签： php java 后端

原文链接：http://www.cnblogs.com/hsiang/p/8456961.html

版权

本文介绍了两种JavaScript编写的富文本编辑器——KindEditor和NicEdit，它们无需引用dll，可与多种后端语言无缝对接。KindEditor以其小巧、开源、高效等特点受到青睐，而NicEdit则提供了轻量级的即时内容编辑解决方案。文章通过示例展示了如何获取编辑后的内容，并提供了官方下载地址。

摘要由CSDN通过智能技术生成

本文推荐两款简单的富文本编辑器【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。】，可以采用如下代码：

 1 // 取得HTML内容
 2 html = editor.html();
 3 
 4 // 同步数据后可以直接取得textarea的value
 5 editor.sync();
 6 html = document.getElementById('editor_id').value; // 原生API
 7 html = K('#editor_id').val(); // KindEditor Node API
 8 html = $('#editor_id').val(); // jQuery
 9 
10 // 设置HTML内容
11 editor.html('HTML内容');

View Code

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>KindEditor</title>
 6         <link rel="stylesheet" href="kindedit