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. 使用cmake自动构建工程

    公司引擎是用cmake根据目标平台来构建工程的,刚接触的时候深深体会到cmake的方便:如果目标平台是windows,它可以帮你自动构建出vs工程:如果是安卓,自动构建出eclipse工程,如果是IO ...

  2. ES6的一些常用特性

    由于公司的前端业务全部基于ES6开发,于是给自己开个小灶补补ES6的一些常用特性.原来打算花两天学习ES6的,结果花了3天才勉强过了一遍阮老师的ES6标准入门(水好深,ES6没学好ES7又来了...) ...

  3. 【Machine Learning】决策树案例:基于python的商品购买能力预测系统

    决策树在商品购买能力预测案例中的算法实现 作者:白宁超 2016年12月24日22:05:42 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本 ...

  4. Spark踩坑记——数据库(Hbase+Mysql)

    [TOC] 前言 在使用Spark Streaming的过程中对于计算产生结果的进行持久化时,我们往往需要操作数据库,去统计或者改变一些值.最近一个实时消费者处理任务,在使用spark streami ...

  5. ASP.NET Core 中文文档 第四章 MVC(4.4)依赖注入和控制器

    原文: Dependency Injection and Controllers 作者: Steve Smith 翻译: 刘浩杨 校对: 孟帅洋(书缘) ASP.NET Core MVC 控制器应通过 ...

  6. 神技!微信小程序(应用号)抢先入门教程(附最新案例DEMO-豆瓣电影)持续更新

    微信小程序 Demo(豆瓣电影) 由于时间的关系,没有办法写一个完整的说明,后续配合一些视频资料,请持续关注 官方文档:https://mp.weixin.qq.com/debug/wxadoc/de ...

  7. JDBC MySQL 多表关联查询查询

    public static void main(String[] args) throws Exception{ Class.forName("com.mysql.jdbc.Driver&q ...

  8. php利用root权限执行shell脚本

    vi /etc/sudoers , 为apache用户赋予root权限,并且不需要密码,还有一步重要的修改(我被困扰的就是这个地方) root  ALL=(ALL)  ALL apache  ALL= ...

  9. Ubuntu手动设置DSL连接

    在安装完Ubuntu之后,发现图形界面的DSL连接不管用了,郁闷了好几天,想想移动每个月120个小时的流量岂不是白白浪费了.正当我想重返Windows系统的时候,却发现了手动设置连接DSL的好方法,感 ...

  10. 微信小程序新单位rpx与自适应布局

    rpx是微信小程序新推出的一个单位,按官方的定义,rpx可以根据屏幕宽度进行自适应,在rpx出现之前,web页面的自适应布局已经有了多种解决方案,为什么微信还捣鼓出新的rpx单位?在解释这个单位前,我 ...