h5 富文本输入框_Html富文本编辑器

最新推荐文章于 2024-09-27 15:54:18 发布

weixin_39972741

最新推荐文章于 2024-09-27 15:54:18 发布

阅读量2.2k

点赞数

文章标签： h5 富文本输入框

本文链接：https://blog.csdn.net/weixin_39972741/article/details/112906048

版权

本文推荐两款简单的富文本编辑器【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

10 //设置HTML内容

11 editor.html('HTML内容');

View Code

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

KindEditor

12 vareditor1;13 KindEditor.ready(function(K){14 editor1=K.create('#t1',{15 cssPath:'kindeditor/plugins/code/prettify.css',16 //uploadJson:'../asp.net/upload_json.ashx',

17 //fileManagerJson:'../asp.net/file_manager_json.ashx',

18 allowFileManager:true,19 afterCreate:function(){20 varself=this;21 //K.ctrl(doument,13,function(){

22 //self.sync();

23 //K('form[name=example]')[0].submit();

24 //});

25 //K.ctrl(self.edit.doc,13,function(){

26 //self.sync();

27 //K('form[name=example]')[0].submit();

28 //});

29 }30 });31 prettyPrint();32 });33 functionpreSave(){34 varhtml=editor1.html();35 editor1.sync();36 vars=document.getElementById("t1").value;37 document.getElementById("t2").value=s;38 alert(s);39 return false;40 }41

45 详细内容：

View Code

什么是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代码如下：

NicEdit

8 vareditor1;9 bkLib.onDomLoaded(function(){10 editor1= newnicEditor({11 fullPanel:true,12 iconsPath :'NicEdit/nicEditorIcons.gif'

13 }).panelInstance("t1");14 });15 functionpreSave(){16 vars=document.getElementsByClassName("nicEdit-main")[0].innerHTML;17 document.getElementById("t2").value=s;18 alert(s);19 return false;20 }21

25 详细内容：

View Code

备注：

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

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

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