kindeditor官方下载地址:http://kindeditor.net/down.php

     (入门必看)kindeditor官方文档:http://kindeditor.net/doc.php

   (入门必看)Kindeditor编辑器初始化参数文档:http://kindeditor.net/docs/option.html

  或许我们一个页面有需要用到多个文本编辑器的情况,那我们该怎么办呢?   本人查阅了很多资料最后终于找到一种方法,可以通过自定义编辑器的工具栏items属性,来实现:

直接上JS了:

<span class="lspan"><font color="red">*</font>商品信息:</span><%--<span class="lspan">
<input id="txtProductInfo" placeholder="请输入商品信息" value="<%=product.ProductInfo %>"
name="txtProductInfo" type="text" maxlength="25" style="width: 444px" /></span>--%>
<script type="text/javascript">
KindEditor.ready(function (K) {
editor = K.create('#txtProductInfo', {
cssPath: '../kindeditorx/plugins/code/prettify.css',
uploadJson: '../kindeditorx/asp.net/upload_json.ashx',
fileManagerJson: '../kindeditorx/asp.net/file_manager_json.ashx',
minWidth: 444,
minHeight: 200,
maxWidth: 444,
resizeType: 1,
filterMode: false,
allowFileManager: true,
items: ['source', '|', 'undo', 'redo', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript',
'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '|', 'forecolor','hilitecolor','bold','italic'
,'underline','strikethrough','lineheight','removeformat'
]
});
});
</script>
<textarea id="txtProductInfo" rows="5" cols="" style="width: 400px;"><%=product.ProductInfo %></textarea>

重点:

下面这些自定义显示工具是关键,其他的编辑器只需要修改items属性就可以了。

items: ['source', '|', 'undo', 'redo', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript',
'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '|', 'forecolor','hilitecolor','bold','italic'
,'underline','strikethrough','lineheight','removeformat'
]
});

如下效果图:

关于items参数的解释如下:

source HTML代码
preview 预览
undo 后退
redo 前进
cut 剪切
copy 复制
paste 粘贴
plainpaste 粘贴为无格式文本
wordpaste 从Word粘贴
selectall 全选
justifyleft 左对齐
justifycenter 居中
justifyright 右对齐
justifyfull 两端对齐
insertorderedlist 编号
insertunorderedlist 项目符号
indent 增加缩进
outdent 减少缩进
subscript 下标
superscript 上标
formatblock 段落
fontname 字体
fontsize 文字大小
forecolor 文字颜色
hilitecolor 文字背景
bold 粗体
italic 斜体
underline 下划线
strikethrough 删除线
removeformat 删除格式
image 图片
flash Flash
media 视音频
table 表格
hr 插入横线
emoticons 插入表情
link 超级链接
unlink 取消超级链接
fullscreen 全屏显示
about 关于
print 打印
code 插入程序代码
map Google地图
baidumap 百度地图
lineheight 行距
clearhtml 清理HTML代码
pagebreak 插入分页符
quickformat 一键排版
insertfile 插入文件
template 插入模板
anchor 插入锚点

如何在一个页面添加多个不同的kindeditor编辑器的更多相关文章

  1. 基于bshare分享平台,在一个页面上实现多个不同内容的web分享

    <!--引入bshare SDK--><script type="text/javascript" charset="utf-8" src=& ...

  2. Laravel 5.2分页--怎么在一个页面实现两个以上的列表分页,互不影响?

    今天就碰到这样的一个问题?想在一个页面里面放两个列表,并且两个列表都可以进行分页. 但是,laravel提供的分页方法很方便,可是两个以上就出问题了,当我点其中一个分页的链接时候,页面上其余的分页跟着 ...

  3. JavaWeb页面添加隐藏版权信息

    JavaWeb页面添加隐藏版权信息. 首先,我推荐一个值得玩味的版权站点,有兴趣的朋友能够去看上一看.Nazo Level 1,这个demo中我能发掘到有5个步骤,你看你能发现几层? 接下来.我来介绍 ...

  4. 如何在一个页面上让多个jQuery

    如何在一个页面上让多个jQuery共存呢?比如jquery-1.5和jquery-1.11. 你可能会问,为什么需要在一个页面上让多个jQuery共存?直接引用最新版本的jQuery不行吗? 答案是, ...

  5. 如何在MVC_WebAPI项目中的APIController帮助页面添加Web测试工具测试

    本文转载自:http://www.cnblogs.com/pmars/p/3673811.html 先看效果图: 以下是原文: 如何在帮助页面添加测试工具 上一篇我在ASP.NET里面添加了一个Hel ...

  6. 如何给你的ASP.NET页面添加HelpPage

    如何给你的ASP.NET页面添加HelpPage 最近写了一些webAPI,所以需要搞一套API的帮助文档,google了一下,发现这是可以自动生成的,以下就是如何自动生成HelpPage的说明. 参 ...

  7. Magento给新产品页面添加分页

    本文介绍如何让magento创建一个带分页功能的新到产品页面,方便我们在首页或者其它CMS Page调用和展示新到产品. 在Magento我们经常有的做法是建立一个可以调用新产品的block,然后通过 ...

  8. 如何给magento的产品页面添加返回按钮

    如何给magento的产品页面添加返回按钮,最模板提供教程 第一步: 打开 E:\xampp\htdocs\magento\skin\frontend\default\bluescale\css\st ...

  9. sharepoint 2010 页面添加footer方法 custom footer for sharepoint 2010 master page

    转:http://blog.csdn.net/chenxinxian/article/details/8720893 在sharepoint 2010的页面中,我们发现,没有页尾,如果我们需要给页面添 ...

随机推荐

  1. 编写高质量代码:改善Java程序的151个建议(第6章:枚举和注解___建议88~92)

    建议88:用枚举实现工厂方法模式更简洁 工厂方法模式(Factory Method Pattern)是" 创建对象的接口,让子类决定实例化哪一个类,并使一个类的实例化延迟到其它子类" ...

  2. 封装集合(Encapsulate Collection)

    封装就是将相关的方法或者属性抽象成为一个对象. 封装的意义: 对外隐藏内部实现,接口不变,内部实现自由修改. 只返回需要的数据和方法. 提供一种方式防止数据被修改. 更好的代码复用. 当一个类的属性类 ...

  3. 微信小程序二维码推广统计

    微信小程序可以通过生成带参数的二维码,那么这个参数是可以通过APP的页面进行监控的 这样就可以统计每个二维码的推广效果. 今天由好推二维码推出的小程序统计工具HotApp小程序统计也推出了带参数二维码 ...

  4. 数据库 DML、DDL、DCL区别 .

    总体解释: DML(data manipulation language): 它们是SELECT.UPDATE.INSERT.DELETE,就象它的名字一样,这4条命令是用来对数据库里的数据进行操作的 ...

  5. 在Linux虚拟机下配置jdk的环境变量

    1.到Oracle公司的官网里下载好jdk,网址 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133 ...

  6. 《Note --- Unreal --- MemPro (CONTINUE... ...)》

    Mem pro 是一个主要集成内存泄露检测的工具,其具有自身的源码和GUI,在GUI中利用"Launch" button进行加载自己待检测的application,目前支持的平台为 ...

  7. IM 去中心化概念模型与架构设计

    今天打算写写关于 IM 去中心化涉及的架构模型变化和设计思路,去中心化的概念就是说用户的访问不是集中在一个数据中心,这里的去中心是针对数据中心而言的. 站在这个角度而言,实际上并非所有的业务都能做去中 ...

  8. 数据库设计中的Soft Delete模式

    最近几天有点忙,所以我们今天来一篇短的,简单地介绍一下数据库设计中的一种模式——Soft Delete. 可以说,该模式毁誉参半,甚至有非常多的人认为该模式是一个Anti-Pattern.因此在本篇文 ...

  9. Windbg Extension NetExt 使用指南 【3】 ---- 挖掘你想要的数据 Managed Heap

    摘要 : NetExt中有两个比较常用的命令可以用来分析heap上面的对象. 一个是!wheap, 另外一个是!windex. !wheap 这个命令可以用于打印出heap structure信息. ...

  10. Maven pom文件常用配置,转载

    什么是POM Project Object Model,项目对象模型.通过xml格式保存的pom.xml文件.作用类似ant的build.xml文件,功能更强大.该文件用于管理:源代码.配置文件.开发 ...