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. 基于AOP的MVC拦截异常让代码更优美

    与asp.net 打交道很多年,如今天微软的优秀框架越来越多,其中微软在基于mvc的思想架构,也推出了自己的一套asp.net mvc 框架,如果你亲身体验过它,会情不自禁的说‘漂亮’.回过头来,‘漂 ...

  2. 原生js+css3实现图片自动切换,图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  3. 使用蓝灯后,IE浏览器以及内置IE浏览器的程序不能使用的解决方案

    使用完蓝灯后,每次使用IE浏览器都不能正常使用,于是有了下面的这个方案 1.通过Win+R 打开注册表编辑器(regedit) 进入目录 HKEY_CURRENT_USER \ Software \ ...

  4. ASP.NET Core 中文文档 第五章 测试(5.2)集成测试

    原文: Integration Testing 作者: Steve Smith 翻译: 王健 校对: 孟帅洋(书缘) 集成测试确保应用程序的组件组装在一起时正常工作. ASP.NET Core支持使用 ...

  5. python 数据类型 ----字典

    字典由一对key:value 组成的 python中常用且重量级的数据类型 1. key , keys, values 字典由一对key:value 组成的 python中常用且重量级的数据类型 1. ...

  6. git init和git init -bare区别

    1 Git init  和 git init –bare 的区别 用"git init"初始化的版本库用户也可以在该目录下执行所有git方面的操作.但别的用户在将更新push上来的 ...

  7. 《Note --- Unreal 4 --- Sample analyze --- StrategyGame(continue...)》

    ---------------------------------------------------------------------------------------------------- ...

  8. 《深入理解Java虚拟机》类文件结构

    上节学习回顾 在上一节当中,主要以自己的工作环境简单地介绍了一下自身的一些调优或者说是故障处理经验.所谓百变不离其宗,这个宗就是我们解决问题的思路了. 本节学习重点 在前面几章,我们宏观地了解了虚拟机 ...

  9. 【Win 10应用开发】延迟共享

    延迟共享是啥呢,这么说吧,就是在应用程序打开共享面板选择共享目标时,不会设置要共享的数据,而是等到共享目标请求数据时,才会发送数据,而且,延迟操作可以在后台进行. 这样说似乎过于抽象,最好的诠释方法, ...

  10. JavaScript的闭包

    1. 什么是闭包 通俗地讲,JavaScript 中每个的函数都是一个闭包,但通常意义上嵌套的函数更能够体现出闭包的特性,请看下面这个例子: var generateClosure = functio ...