欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

在一个页面使用多个 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/down.php

kindeditor官方文档:http://kindeditor.net/doc.php

Kindeditor编辑器初始化参数文档:http://kindeditor.net/docs/option.html


相关标签: kindeditor编辑器