多种 网页文本编辑器 分析

原创 2013年12月02日 15:05:52

文本编辑器应用总结

一. lhgeditor文本编辑器

lhgeditor组件文件结构

1. lhgeditor.js: 组件的核心JS文件

2. lhgeditor.css:组件的样式表文件

3. images:组件所需的图片都在此文件夹中

以上三个文件为组件所必须的三个文件,组件包中其它以“_”开头的文件为示例的演示文件,实际使用中不需要这些文件。当然框架核心文件lhgcore.js是每个组件都必须用到的文件,记得加载组件前先要加载此文件。

lhgeditor组件使用说明:

1. 在调用组件的页面加载lhgcore.jslhgeditor.js两个文件。

2. window.onload函数里加入J.editor.add(编辑器的id).init();

例:

<script type="text/javascript">

window.onload = function()

{

    J.editor.add('elm1').init();

}

</script>

<form action="_postdate.asp" method="post" target="_blank">

<div>

<textarea name="elm1" id="elm style="width:600px;height:300px;"> 

lhgeditor小型在线编辑器</textarea>

</div>

<input type="submit" value="Submit" />

</form>




 

二. nicEdit文本编辑器

<script type="text/javascript">

bkLib.onDomLoaded(function() {

new nicEditor().panelInstance('area1');

new nicEditor({fullPanel : true}).panelInstance('area2');

new nicEditor({iconsPath : '../nicEditorIcons.gif'}).panelInstance('area3');

new nicEditor({buttonList :['fontSize','bold','italic','underline','strikeThrough','subscript',

' superscript','html','image']}).panelInstance('area4');

new nicEditor({maxHeight : 100}).panelInstance('area5');

});

</script>

//默认模式

//new nicEditor().panelInstance('area1');

<textarea cols="50" id="area1"></textarea>


//
All Available Buttons

//new nicEditor({fullPanel : true}).panelInstance('area2');

<textarea cols="60" id="area2">Some Initial Content was in this textarea</textarea>

 

//new nicEditor({iconsPath : '../nicEditorIcons.gif'}).panelInstance('area3');

<textarea cols="50" id="area3"></textarea>



//自定义按钮

//new nicEditor({buttonList :['fontSize','bold','italic','underline','strikeThrough','subscript',

'superscript','html','image']}).panelInstance('area4');

<textarea cols="50" id="area4">HTML <b>content</b> <i>default</i> in textarea</textarea>




//设置文本编辑器的最大高度

//new nicEditor({maxHeight : 100}).panelInstance('area5');

<textarea style="height: 100px;" cols="50" id="area5">

         HTML <b>content</b>  <i>default</i> in textarea

</textarea>




三. kindeditor文本编辑器

(1) 支持多种语言phpasp

(2) 功能强大

默认模式

<script charset="utf-8" src="../kindeditor-min.js"></script>

<script charset="utf-8" src="../lang/zh_CN.js"></script>

<script>

var editor;

KindEditor.ready(function(K) {

editor = K.create('textarea[name="content"]', {

resizeType : 1,

allowPreviewEmoticons : false,

allowImageUpload : false,

items : ['fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic','underline','removeformat', '|', 'justifyleft','justifycenter',       'justifyright', 'insertorderedlist','insertunorderedlist', '|',  'emoticons', 'image', 'link']

});

});

</script>

<textarea  name="content"  style="width:700px;height:200px;visibility:hidden;">

     KindEditor

</textarea>




Multi Language Examples(多语言)

<script charset="utf-8" src="../kindeditor-min.js"></script>

<script>

var editor;

KindEditor.ready(function(K) {

K('select[name=lang]').change(function() {

if (editor) {

editor.remove();

editor = null;

}

editor = K.create('textarea[name="content"]', {

langType : this.value

});

});

K('select[name=lang]').change();

});

</script>

<form>

<p>

<select name="lang">

<option value="en">English</option>

<option value="zh_CN">简体中文</option>

<option value="zh_TW">繁體中文</option>

<option value="ar">Arabic</option>

</select>

</p>

  <textarea name="content" style="width:800px;height:200px;"></textarea>

</form>




粘贴设置:

<script charset="utf-8" src="../kindeditor-min.js"></script>

<script charset="utf-8" src="../lang/zh_CN.js"></script>

<script>

KindEditor.ready(function(K) {

K.create('#content1', {

pasteType : 0

});

K.create('#content2', {

pasteType : 1

});

K.create('#content3', {

pasteType : 2

});

});

</script>

   禁止粘贴

<textarea  id="content1" name="content" style="width:700px;height:200px;  

visibility:hidden;">

</textarea>




       纯文本粘贴

        <textarea  id="content2" name="content" style="width:700px;height:200px;  

  visibility:hidden;">

</textarea>




HTML粘贴

<textarea  id="content3" name="content"  style="width:700px;height:200px;  

visibility:hidden;"></textarea>




自定义插件

<script charset="utf-8" src="../kindeditor-min.js"></script>

<script charset="utf-8" src="../lang/zh_CN.js"></script>

<script>

// 自定义插件 #1

KindEditor.lang({

example1 : '插入HTML'

});

KindEditor.plugin('example1', function(K) {

var self = this, name = 'example1';

self.clickToolbar(name, function() {

self.insertHtml('<strong>测试内容</strong>');

});

});

// 自定义插件 #2

KindEditor.lang({

example2 : 'CLASS样式'

});

KindEditor.plugin('example2', function(K) {

var self = this, name = 'example2';

function click(value) {

var cmd = self.cmd;

if (value === 'adv_strikethrough') {

cmd.wrap('<span style="background-color:#e53333;

text-decoration:line-through;"></span>');

} else {

cmd.wrap('<span class="' + value + '"></span>');

}

cmd.select();

self.hideMenu();

}

self.clickToolbar(name, function() {

var menu = self.createMenu({

name : name,

width : 150

});

menu.addItem({

title : '红底白字',

click : function() {

click('red');

}

});

menu.addItem({

title : '绿底白字',

click : function() {

click('green');

}

});

menu.addItem({

title : '黄底白字',

click : function() {

click('yellow');

}

});

menu.addItem({

title : '自定义删除线',

click : function() {

click('adv_strikethrough');

}

});

});

});

KindEditor.ready(function(K) {

K.create('#content1', {

cssPath : ['../plugins/code/prettify.css', 'index.css'],

items : ['source', 'removeformat', 'example1', 'example2',  'code']

});

});

</script>

<textarea id="content1" name="content" style="width:700px;height:200px;  visibility:hidden;"></textarea>

相关文章推荐

网页开发中文本编辑器UEditor的使用

原文地址:http://www.cnblogs.com/Steven-shi/p/5435358.html 首先看一下效果图: 首先我们需要来认识下UEditor,它是由百度w...

网页文本编辑器

页面代码引用如下:js和css下载地址:http://download.csdn.net/detail/chabale/5339088
  • chabale
  • chabale
  • 2013年05月07日 09:42
  • 5717

几种常用网页文本编辑器总结

文本编辑器应用总结 一. lhgeditor文本编辑器 lhgeditor组件文件结构: 1. lhgeditor.js: 组件的核心JS文件 2. lhgeditor.css:组件的样式表文...

asp.net留言板 利用富文本编辑器实现美化功能xheditor在asp.net网页的配置和使用

刚好,csdn 发表博客的界面也是利用xheditor的,现在我要说的就是怎么把这个文本框编辑器添加到asp.net项目中。以下是官网的标准配置 1.1. 在线可视化HTML编辑器概述 ...

网页中插入文本编辑器

网页中插入文本编辑器 http://kindeditor.net/demo.php 效果: 编辑器使用方法: 1. 下载编辑器下载 KindEditor 最新版本,下载之后打开 example...

网页文本编辑器UEditor.1.4.3 jsp使用配置

网页文本编辑器UEditor.1.4.3 jsp使用配置 由于项目需要文本编辑的功能,研究了百度ueditor编辑器,实现在线富文本的编辑和图片文件的上传。 首先需要配置好jsp开发的基本环境,即...

网页富文本编辑器推荐

如题。         进行网页开发的时候,textarra并不能够满足我们的所有需要。如果你正在寻找合适的富文本编辑插件,我这里可以给大家推荐几款:         百度Ueditor:      ...

[Ruby] 网页添加文本编辑器 Kindeditor for Ruby on Rails

Kindeditor for Ruby on Rails 中文文档 Kindeditor是国产的所见即所得javascript富文本编辑器, 访问 http://www.kindsoft.net 获...

jsp KindEditor网页文本编辑器

  • 2012年12月24日 18:05
  • 589KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:多种 网页文本编辑器 分析
举报原因:
原因补充:

(最多只允许输入30个字)