如何在一个页面添加多个不同的kindeditor编辑器

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编辑器相关推荐

wordpress 独立 php,wordpress怎么把所有文章分类单独在一个页面显示
如何让wordpress把所有文章分类单独在一个页面显示? 1.复制一个page.php文件改为page-abc.php,并在WordPress后台新建一个页面,固定链接地址改为abc(这个abc可随 ...
百度富文本编辑器的应用技巧---在一个页面中使用多个样式不同功能不同的编辑器...
//1.2.4以后可以使用一下代码实例化编辑器 //UE.getEditor('myEditor') 在官方的说明文档上看到这个注释,不是很明白,而且需要在一个页面中使用多次样式功能不同的uedito ...
如何在一个页面上使用多个KindEditor编辑器并将值传递到服务器端
如何在一个页面上使用多个KindEditor编辑器并将值传递到服务器端 1.声明一个editor数组: 2.将之前的编辑器显示行代码: 3.传递KindEditor所填写的相关数据: 今天使用Kind ...
原生js的attachEvent和addEventListener解决window.onload在一个页面只能执行一次的问题
原生js的attachEvent和addEventListener解决window.onload在一个页面只能执行一次的问题参考文章: (1)原生js的attachEvent和addEventLis ...
如何开发一个用户脚本系列(3)——脚本一:百度首页和搜索页面添加 Google 搜索框...
2019独角兽企业重金招聘Python工程师标准>>> 在本系列的前两篇文章中,我们对用户脚本以及开发脚本前应该掌握的基础知识进行了介绍.从这篇文章开始,将以已发布可用的脚本为基础, ...
向SharePoint页面添加后台代码
声明:本文转载在本文中,我将跟大家一起讨论,为MOSS的页面添加服务器端代码的另一种方式.不过首先要声明,这种方式仅作为技术研究,如要使用,请慎重! 在上一篇文章中,我们讨论过如何为MOSS页面添加 ...
[html] 如何给页面添加追加右键菜单（原右键菜单功能保持不变）
[html] 如何给页面添加追加右键菜单(原右键菜单功能保持不变) 监听oncontextmenu,在系统右键菜单下追加自定义菜单个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚 ...
vue 给页面添加enter回车事件 - 代码篇
vue 如何给页面添加enter回车事件? 主要代码: @keyup.enter.native="ajaxLoginApi()" 代码示例: <el-form ref=&qu ...
php表格位于页面中央,怎么为表格所在的页面添加编辑限制保护
为表格所在的页面添加编辑限制保护的方法:1.依次点击文件.信息.保护文档:2.找到限制编辑,勾选[限制对选定的样式设置格式]:3.勾选[仅允许在文档中进行此类型的编辑],选择[是,启用强制保护]. 本 ...

如何在一个页面添加多个不同的kindeditor编辑器

如何在一个页面添加多个不同的kindeditor编辑器相关推荐

最新文章

热门文章