在一个页面使用多个 kindeditor编辑器
程序员文章站
2022-05-26 18:43:38
...
最开始在页面上使用一个 kindeditor编辑器,没有遇到什么问题。后面需要使用2个的时候。首先我的代码是这样写的;
<tr>
<th width="80">简介</th>
<td>
<textarea name="introduction" id="introduction" >{pigcms{$news.introduction}</textarea>
</td>
</tr>
<tr>
<th width="80">内容</th>
<td>
<textarea name="content" id="content" >{pigcms{$news.content}</textarea>
</td>
</tr>
JS代码如下:
KindEditor.ready(function(K){
kind_editor = K.create("#content",{
width:'402px',
height:'320px',
resizeType : 1,
<if condition="$_GET['frame_show']">readonlyMode : true,</if>
allowPreviewEmoticons:false,
allowImageUpload : true,
filterMode: true,
items : [
'source', 'fullscreen', '|', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'image', 'link'
],
emoticonsPath : './static/emoticons/',
uploadJson : "{pigcms{$config.site_url}/index.php?g=Index&c=Upload&a=editor_ajax_upload&upload_dir=system/news"
});
});
KindEditor.ready(function(K){
kind_editor = K.create("#introduction",{
width:'402px',
height:'320px',
resizeType : 1,
<if condition="$_GET['frame_show']">readonlyMode : true,</if>
allowPreviewEmoticons:false,
allowImageUpload : true,
filterMode: true,
items : [
'source', 'fullscreen', '|', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'image', 'link'
],
emoticonsPath : './static/emoticons/',
uploadJson : "{pigcms{$config.site_url}/index.php?g=Index&c=Upload&a=editor_ajax_upload&upload_dir=system/news"
});
});
这样写是有问题的,简介和内容只有其中一个可以进行添加和修改操作。。。。。。
后来我又改了下JS代码:如下
var options = {
filterMode : true,
allowImageUpload : true,
items : [
'source', 'fullscreen', '|', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'image', 'link'
],
width : '600px',
height: '250px',
emoticonsPath : './static/emoticons/',
uploadJson : "{pigcms{$config.site_url}/index.php?g=Index&c=Upload&a=editor_ajax_upload&upload_dir=system/news"
};
var editor = new Array();
KindEditor.ready(function(K) {
editor[0] = K.create("#content",options);
editor[1] = K.create("#introduction",options);
});
这样简介和内容就都能顺利的进行添加和修改了。。
如果想使用更多的kindeditor编辑器,只需要在那个数组里多添加一个元素就可以了。。
另外,编辑器上面的显示工具是可以自己修改的,只需要修改items里面的内容就行。。。。。。。。
kindeditor官方文档:http://kindeditor.net/doc.php
Kindeditor编辑器初始化参数文档:http://kindeditor.net/docs/option.html
上一篇: rcp 自定义工具栏
下一篇: neditor 自定义工具栏配置
推荐阅读
-
python使用matplotlib在一个图形中绘制多个子图以及一个子图中绘制多条动态折线问题
-
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
-
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
-
gulp 批量添加类名 在一个任务中使用多个文件来源
-
Angular在一个页面中使用两个ng-app的方法
-
Angular在一个页面中使用两个ng-app的方法(二)
-
vue-quill-editor+el-upload 在一个页面多次使用且支持批量上传的图片按顺序排列
-
在一个页面重复使用一个js函数的方法详解
-
在asp.net中KindEditor编辑器的使用方法小结
-
在一个演示文稿中使用多个主题默认只能一个哦