学习日记 » kindeditor

KindEditor/初始化参数

admin — Wed, 14 Jan 2015 03:49:09 +0000

width

编辑器的宽度，可以设置px或%，比textarea输入框样式表宽度优先度高。

数据类型: String；默认值: textarea输入框的宽度

示例:

K.create('#id', {
        width : '700px'
});

height

编辑器的高度，只能设置px，比textarea输入框样式表高度优先度高。

数据类型: String；默认值: textarea输入框的高度

minWidth

指定编辑器最小宽度，单位为px。

数据类型: Int；默认值: 650

items

配置编辑器的工具栏，其中”/”表示换行，”|”表示分隔符。

数据类型: Array；

默认值:

[
        'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'cut', 'copy', 'paste',
        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
        'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image',
        'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'map', 'code', 'pagebreak',
        'link', 'unlink', '|', 'about'
]

noDisableItems

designMode 为false时，要保留的工具栏图标。

数据类型: Array；默认值: [‘source’, ‘fullscreen’]

filterMode

true时过滤HTML 代码，false时允许输入任何代码。

数据类型: Boolean；默认值: false

htmlTags

指定要保留的HTML标记和属性。Object的key为HTML标签名，value为HTML属性数组，”.”开始的属性表示style属性。

数据类型: Object；默认值:

{
        font : ['color', 'size', 'face', '.background-color'],
        span : [
                '.color', '.background-color', '.font-size', '.font-family', '.background',
                '.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.line-height'
        ],
        div : [
                'align', '.border', '.margin', '.padding', '.text-align', '.color',
                '.background-color', '.font-size', '.font-family', '.font-weight', '.background',
                '.font-style', '.text-decoration', '.vertical-align', '.margin-left'
        ],
        table: [
                'border', 'cellspacing', 'cellpadding', 'width', 'height', 'align', 'bordercolor',
                '.padding', '.margin', '.border', 'bgcolor', '.text-align', '.color', '.background-color',
                '.font-size', '.font-family', '.font-weight', '.font-style', '.text-decoration', '.background',
                '.width', '.height'
        ],
        'td,th': [
                'align', 'valign', 'width', 'height', 'colspan', 'rowspan', 'bgcolor',
                '.text-align', '.color', '.background-color', '.font-size', '.font-family', '.font-weight',
                '.font-style', '.text-decoration', '.vertical-align', '.background'
        ],
        a : ['href', 'target', 'name'],
        embed : ['src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess'],
        img : ['src', 'width', 'height', 'border', 'alt', 'title', '.width', '.height'],
        'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6' : [
                'align', '.text-align', '.color', '.background-color', '.font-size', '.font-family', '.background',
                '.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.text-indent', '.margin-left'
        ],
        pre : ['class'],
        'hr,br,tbody,tr,strong,b,sub,sup,em,i,u,strike' : []
}

wellFormatMode

true时美化HTML数据。

数据类型: Boolean；默认值: true

resizeType

2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。

数据类型: Int；默认值: 2

themeType

指定主题风格，可设置”default”、”simple”，指定simple时需要引入simple.css。

数据类型: String；默认值: “default”

示例:

<link rel="stylesheet" href="../themes/default/default.css" />
<link rel="stylesheet" href="../themes/simple/simple.css" />
<script charset="utf-8" src="../kindeditor.js"></script>
<script charset="utf-8" src="../lang/zh_CN.js"></script>
<script>
        var editor;
        KindEditor.ready(function(K) {
                editor = K.create('#editor_id', {
                        themeType : 'simple'
                });
        });
</script>

langType

指定语言，可设置”en”、”zh_CN”，需要引入lang/[langType].js。

数据类型: String；默认值: “zh_CN”

示例:

<link rel="stylesheet" href="../themes/default/default.css" />
<script charset="utf-8" src="../kindeditor.js"></script>
<script charset="utf-8" src="../lang/en.js"></script>
<script>
        var editor;
        KindEditor.ready(function(K) {
                editor = K.create('#editor_id', {
                        langType : 'en'
                });
        });
</script>

designMode

可视化模式或代码模式

数据类型: Boolean；默认值: true

fullscreenMode

true时加载编辑器后变成全屏模式。

数据类型: Boolean；默认值: false

basePath

指定编辑器的根目录路径。

数据类型: String；默认值: 根据kindeditor.js文件名自动获取

themesPath

指定编辑器的themes目录路径。

数据类型: String；默认值: basePath + ‘themes/’

pluginsPath

指定编辑器的plugins目录路径。

数据类型: String；默认值: basePath + ‘plugins/’

langPath

指定编辑器的lang目录路径。

数据类型: String；默认值: basePath + ‘lang/’

minChangeSize

undo/redo文字输入最小变化长度，当输入的文字变化小于这个长度时不会添加到undo记录里。

数据类型: String；默认值: 5

urlType

改变站内本地URL，可设置”“、”relative”、”absolute”、”domain”。空为不修改URL，relative为相对路径，absolute为绝对路径，domain为带域名的绝对路径。

数据类型: String；默认值: “”

newlineTag

设置回车换行标签，可设置”p”、”br”。

数据类型: String；默认值: “p”

pasteType

设置粘贴类型，0:禁止粘贴, 1:纯文本粘贴, 2:HTML粘贴

数据类型: Int；默认值: 2

dialogAlignType

设置弹出框(dialog)的对齐类型，可设置”“、”page”，指定page时按当前页面居中，指定空时按编辑器居中。

数据类型: String；默认值: “page”

shadowMode

true时弹出层(dialog)显示阴影。

数据类型: Boolean；默认值: true

useContextmenu

true时使用右键菜单，false时屏蔽右键菜单。

数据类型: Boolean；默认值: true

syncType

同步数据的方式，可设置”“、”form”，值为form时提交form时自动同步，空时不会自动同步。

数据类型: String；默认值: “form”

indentChar

wellFormatMode 为true时，HTML代码缩进字符。

数据类型: String；默认值: “\t”

cssPath

指定编辑器iframe document的CSS文件，用于设置可视化区域的样式。

数据类型: String或Array；默认值: 空

cssData

指定编辑器iframe document的CSS数据，用于设置可视化区域的样式。

数据类型: String；默认值: 空

bodyClass

指定编辑器iframe document body的className。

数据类型: String；默认值: “ke-content”

colorTable

指定取色器里的颜色。

数据类型: Array；默认值:

[
        ['#E53333', '#E56600', '#FF9900', '#64451D', '#DFC5A4', '#FFE500'],
        ['#009900', '#006600', '#99BB00', '#B8D100', '#60D978', '#00D5FF'],
        ['#337FE5', '#003399', '#4C33E5', '#9933E5', '#CC33E5', '#EE33EE'],
        ['#FFFFFF', '#CCCCCC', '#999999', '#666666', '#333333', '#000000']
]

afterCreate

设置编辑器创建后执行的回调函数。

数据类型: Function；默认值: 无

afterChange

编辑器内容发生变化后执行的回调函数。

数据类型: Function；默认值: 无

afterTab

按下TAB键后执行的的回调函数。

数据类型: Function；默认值: 插入4个空格的函数

afterFocus

编辑器聚焦(focus)时执行的回调函数。

数据类型: Function；默认值: 无

afterBlur

编辑器失去焦点(blur)时执行的回调函数。

数据类型: Function；默认值: 无

afterUpload

上传文件后执行的回调函数。

数据类型: Function；默认值: 无

KindEditor.ready(function(K) {
        K.create('#id', {
                afterUpload : function(url) {
                        alert(url);
                }
        });
});

uploadJson

指定上传文件的服务器端程序。

数据类型: String；默认值: basePath + ‘php/upload_json.php’

fileManagerJson

指定浏览远程图片的服务器端程序。

数据类型: String；默认值: basePath + ‘php/file_manager_json.php’

allowPreviewEmoticons

true时鼠标放在表情上可以预览表情。

数据类型: Boolean；默认值: true

allowImageUpload

true时显示图片上传按钮。

数据类型: Boolean；默认值: true

allowFlashUpload

true时显示Flash上传按钮。

数据类型: Boolean；默认值: true

allowMediaUpload

true时显示视音频上传按钮。

数据类型: Boolean；默认值: true

allowFileManager

true时显示浏览远程服务器按钮。

数据类型: Boolean；默认值: false

fontSizeTable

指定文字大小。

数据类型: Array；默认值:

['9px', '10px', '12px', '14px', '16px', '18px', '24px', '32px']

参考来源

http://www.zzbaike.com/wiki/KindEditor/%E5%88%9D%E5%A7%8B%E5%8C%96%E5%8F%82%E6%95%B0

kindeditor 粘贴网络图片保存到服务器

admin — Thu, 08 Jan 2015 05:05:36 +0000

人老了，记忆也衰退了。写代码时，只有思路，具体写起来确总忘这忘那。还有的特性或功能，脑子里朦胧记得曾经看到过或曾经写过却总也记不起来。在网上找好多人的文章也就是转载别人，而图片因原作者空间失效而失效。于是想在自己blog 在转载好文章备份时，能顺便把里面图片也保存到自己服务器上。

由于对javascript 的了解不够深入，要在一个完全陌生的编辑器上做插件还真有点困难，加上php 也不是常用，边学边做发了三天终于将这样一个粘贴网络图片保存到服务器小插件做成功了。

贴出部分代码：

// 图片另存到服务器
		editor.addContextmenu({
	        title : '另存到服务器',
	        click : function() {
	         var img = getImageFromRange(editor.edit.cmd.range, function(img) {
	        	 	return !/^ke-\w+$/i.test(img[0].className);
	         	});
	         var imgsrc = img.attr('src');
	         K.ajax('./editor/php/saveToServer.php', function(data){var newsrc = K.formatUrl(data.url,'absolute');
	         editor.exec('insertimage', newsrc, '', '', '', '', '');
	         editor.hideMenu();} , 'POST' ,{imgurl:imgsrc});
	        },
	        cond : function() {
	        return getImageFromRange(editor.edit.cmd.range, function(img) {
	            return !/^ke-\w+$/i.test(img[0].className);
	        });
	        }
		});

服务器端代码：

require_once 'JSON.php';
require_once '../../globals.php';
$php_path = ADMIN_ROOT . '/';
$php_url = dirname($_SERVER['PHP_SELF']) . '/../../';
$root_path = $php_path . OPTION::UPLOADFILE_PATH.'image/netimg/';
$root_url = $php_url . OPTION::UPLOADFILE_PATH.'image/netimg/';
set_time_limit(0);
$filepath=urldecode($_POST['imgurl']);
$imgArray=array('.gif','.jpg','.png','.jpeg','.bmp');
$typeArray=array();
ob_start();
$type=strrchr(trim($filepath),".");
$result = false;
if($filepath!='' && in_array($type,$imgArray))
{
	$now=time();
	$filename=$now.strrchr(trim($filepath),".");
			//$filename=md5_file(trim($files[$i])).strrchr(trim($files[$i]),".");
	$ret = create_folders($root_path);
	if($ret != false){ 
		$savetime=SaveHTTPFile(trim($filepath),$root_path.$filename);
		$result = true;
	}
}
ob_end_flush();
if($result){
		header('Content-type: text/html; charset=UTF-8');
		$json = new Services_JSON();
		echo $json->encode(array('error' => 0, 'url' => $root_url.$filename));
		exit;		
}else{
		alert('创建目录失败！');
}

function getmicrotime(){
    list($usec, $sec) = explode(" ",microtime());
    return ((float)$usec + (float)$sec);
}

function SaveHTTPFile($fFileHTTPPath,$fFileSavePath)
{
	//记录程序开始的时间
	$BeginTime=getmicrotime();

	//取得文件的内容
	ob_start();
	readfile($fFileHTTPPath);
	$img = ob_get_contents();
	ob_end_clean();
	//$size = strlen($img);

	//保存到本地
	$fp2=@fopen($fFileSavePath, "a");
	fwrite($fp2,$img);
	fclose($fp2);

	//记录程序运行结束的时间
	$EndTime=getmicrotime();

	//返回运行时间
	return($EndTime-$BeginTime);
}

kindeditor编辑器高级篇：如何通过监听kindeditor编辑器的粘贴(CTRL+V)事件直接过滤掉复制内容内所有的标签包括超链接

admin — Wed, 07 Jan 2015 09:56:33 +0000

昨天写个一篇如何在执行一键清除HTML功能键的同时去掉kindeditor编辑器内容的所有超链接的博客，地址为：http://www.stepday.com/topic/?688 今天琢磨了一下是否可以更加直接地在粘贴内容至kindeditor编辑器内的时候就清楚HTML标签和去掉所有的超链接，换句话说就是只能够粘贴纯文本进入kindeditor编辑器内。

通过翻看kindeditor-min.js源码文件，查找“b.pasteType === 1”关键词，我们看到的代码片段如下所示：

b.pasteType === 1 && (d = d.replace(/]*>/ig, "\n"), d = d.replace(/<\/p>]*>/ig, "\n"), d = d.replace(/<[^>]+>/g, ""), d = d.replace(/ /ig, " "), d = d.replace(/\n\s*\n/g, "\n"), d = d.replace(/ {2}/g, "  "), b.newlineTag == "p" ? /\n/.test(d) && (d = d.replace(/^/, "").replace(/$/, "
").replace(/\n/g, "
")) : d = d.replace(/\n/g, "
$&")), b.insertHtml(d, !0))

这段代码就是实现了CTRL+V的粘贴功能，获取粘贴板内的内容d，然后对其进行简单性的处理然后赋值给编辑器b。

在这里我们不难发现并未去除过多的HTML代码且清楚超链接，所以我们需要在这里对编辑器对象b做一些后加处理，我们通过b.text()就可以拿到编辑器内的纯文本内容了，然后再将其赋值给编辑器b不就行了么？

所以得到了修改后的代码片段：

b.pasteType === 1 && (d = d.replace(/]*>/ig, "\n"), d = d.replace(/<\/p>]*>/ig, "\n"), d = d.replace(/<[^>]+>/g, ""), d = d.replace(/ /ig, " "), d = d.replace(/\n\s*\n/g, "\n"), d = d.replace(/ {2}/g, "  "), b.newlineTag == "p" ? /\n/.test(d) && (d = d.replace(/^/, "").replace(/$/, "
").replace(/\n/g, "
")) : d = d.replace(/\n/g, "
$&")), b.insertHtml(d, !0), b.html(b.text()))

不难看出只是在最后的地方追加了

b.html(b.text())

kindeditor编辑器高级篇：如何做到一键清除HTML格式的同时去掉kindeditor编辑器内全部超链接(a)

admin — Wed, 07 Jan 2015 09:51:02 +0000

在使用kindeditor编辑器的时候，大多数可能都是从某些网页直接粘贴内容复制到kindeditor编辑器内，这样可能内容就包含很多HTML标签和超链接。为了最快地进行内容编辑往往都使用kindeditor的“一键清除HTML”的功能，但是这个功能默认情况下是不会清除超链接的标签的。这一点往往令很多做编辑的人很是头疼，最后这个光荣的任务就落到了我们程序员的身上。

为了解决在清除HTML标签的同时也清除掉超链接，不得不研究了一番kindeditor的源码。最后将其问题的解决方案归咎到了一键清除HTML的对应plugins/clearhtml/clearHTML.js文件内。通过深入分析得出了这样两个解决方案：

1、修改formatHtml格式化方法

见plugins/clearhtml/clearHTML.js的formatHtml格式化方法如下所示：

html = K.formatHtml(html, {
			a : ['href', 'target'],
			embed : ['src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess'],
			img : ['src', 'width', 'height', 'border', 'alt', 'title', '.width', '.height'],
			table : ['border'],
			'td,th' : ['rowspan', 'colspan'],
			'div,hr,br,tbody,tr,p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6' : []
});

view sourceprint?

从格式化方法不难看出它始终保持了a标签的href和target两个属性，所以问题的根本就在这里了的，解决方案就是去掉a标签的一切，修改后的代码如下所示：

html = K.formatHtml(html, {
			embed : ['src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess'],
			img : ['src', 'width', 'height', 'border', 'alt', 'title', '.width', '.height'],
			table : ['border'],
			'td,th' : ['rowspan', 'colspan'],
			'div,hr,br,tbody,tr,p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6' : []
});

view sourceprint?

2、直接调用取消超链接的方法

通过查找源码内的方法，可以直接调用去掉超链接的方法，同样修改plugins/clearhtml/clearHTML.js文件内，在

view sourceprint?

1.self.addBookmark();

后面追加一句语句：

view sourceprint?

1.self.exec('unlink', null); //去掉编辑器内所有的超链接