存档

文章标签 ‘kindeditor’

kindeditor4.1.12精简压缩版-示例

2020年10月27日 评论已被关闭

使用kindeditor官方最新版本4.1.12进行了精简操作,具体请看:

本次修改基于官方4.1.12版本修改,官方网址:https://github.com/kindsoft/kindeditor

1,涉及到的地方改为:[iframe][/iframe](前端显示的时候需要替换回去)

2,涉及到<embed>的地方改为:[embed][/embed](前端显示的时候需要替换回去)

3,修改代码:原有的视音频功能

kindeditor.js中 funciton _mediaEmbed(){}中,将[embed修改修改为/]
kindeditor.js中 function _mediaImg(){}中,style = '';这段代码之后直接return srcTag;

4,删除了lang语言包下的其他文件,只保留en.js,zh-CN.js,zh-TW.js

5,新增第三方视频功能插入功能(支持:youtube、优酷、爱奇艺、腾讯)(其他网站类似)
在plugins文件夹中,新增video文件夹,内部新建video.js和demo.html
增加功能需要在语言包文件中补全此功能的语言字符,在lang文件夹中en.js,zh-CN.js,zh-TW.js
4个文件中,增加了代码

/* zh-CN.js  video插件语言包*/
video: '第三方视频',
editVideo: '第三方视频属性',
    deleteVideo: '删除第三方视频',
    'video.demo': '示例',
'video.url': 'URL',
    'video.width': '宽度',
    'video.height': '高度',

/* zh-TW.js  video插件语言包*/
video: '第三方視頻',
editVideo: '第三方視頻屬性',
    deleteVideo: '刪除第三方視頻',
    'video.demo': '示例',
'video.url': 'URL',
    'video.width': '寬度',
    'video.height': '高度',

/* en.js  video插件语言包*/
video: 'Video',
editVideo: 'Video properties',
    deleteVideo: 'Delete video',
    'video.demo': 'DEMO',
'video.url': 'URL',
    'video.width': 'Width',
    'video.height': 'Height',

/* kindeditor.js(未压缩版本)  video插件语言包*/
/* zh-CN.js  video插件语言包*/
video: '第三方视频',
editVideo: '第三方视频属性',
    deleteVideo: '删除第三方视频',
    'video.demo': '示例',
'video.url': 'URL',
    'video.width': '宽度',
    'video.height': '高度',

6,删除plugins文件夹中,kindeditor.js中已存在的插件JS,如果该插件含有资源文件,则保留资源和文件夹

7,删除不需要的功能 :multiimage(多图上传功能取消,自带的是flash,现在几乎所有新浏览器都不支持flash了)(请见本条:备注)
flash(上传flash,flash,现在几乎所有新浏览器都不支持flash了)
insertfile(插入文件功能已取消,不建议通过编辑器来上传文件)
以上功能插件在kindeditor.js中快捷搜索:KindEditor.plugin(‘插件名 。即可找到。
备注:删除multiimage,会将原本的kindeditor.js(未压缩版本)里面的删除(代码里面备注了:/multiimage插件相关的上传图片代码已删除/):
===start
(function(K) {
function KSWFUpload(options) {
this.init(options);
}
===end
if (typeof(SWFUpload) === “function”) {
至函数结尾

8,功能插件百度地图中的选项(插入动态地图)勾选后,会生成iframe标签代码,程序不允许,则修改kindeditor.js中,搜索KindEditor.plugin(‘baidumap 。即可找到该处代码,在if (checkbox[0].checked) { 代码处后,将

<iframe修改为[iframe
</iframe>修改为[/iframe]

9,修改完原版的kindeditor.js(未压缩版本)之后,再自己通过https://tool.lu/js/index.html压缩一个min版本:kindeditor.min.js

10,删除themes下的qq

11,删除其他不相干的文件和文件夹

12,应该屏蔽image插件的上传图片功能:allowImageUpload:false

13,同时建议:allowFlashUpload:false,allowMediaUpload:false

14,删除了plugins/emoticons下的图片文件,设置allowPreviewEmoticons:false,同时关闭表情emoticons插件(后期如果需要开通,可以做相关更改,也可以自行恢复图片或者更换图片)

15,修改了kindeditor.js(未压缩版本)中的KindEditor.plugin(‘media函数块为:

KindEditor.plugin('media', function(K) {
	var self = this,
		name = 'media',
		lang = self.lang(name + '.'),
		allowMediaUpload = K.undef(self.allowMediaUpload, true),
		allowFileManager = K.undef(self.allowFileManager, false),
		formatUploadUrl = K.undef(self.formatUploadUrl, true),
		extraParams = K.undef(self.extraFileUploadParams, {}),
		filePostName = K.undef(self.filePostName, 'imgFile'),
		uploadJson = K.undef(self.uploadJson, self.basePath + 'php/upload_json.php');
	self.plugin.media = {
		edit: function() {
			var html = ['<div style="padding:20px;">', '<div class="ke-dialog-row">', '<label for="keUrl" style="width:60px;">' + lang.url + '</label>', '<input class="ke-input-text" type="text" id="keUrl" name="url" value="" style="width:260px;" /> &nbsp;', '<input type="button" class="ke-upload-button" value="' + lang.upload + '" /> &nbsp;', '<span class="ke-button-common ke-button-outer">', '<input type="button" class="ke-button-common ke-button" name="viewServer" value="' + lang.viewServer + '" />', '</span>', '</div>', '<div class="ke-dialog-row">', '<label for="keWidth" style="width:60px;">' + lang.width + '</label>', '<input type="text" id="keWidth" class="ke-input-text ke-input-number" name="width" value="550" maxlength="4" />', '</div>', '<div class="ke-dialog-row">', '<label for="keHeight" style="width:60px;">' + lang.height + '</label>', '<input type="text" id="keHeight" class="ke-input-text ke-input-number" name="height" value="400" maxlength="4" />', '</div>', '<div class="ke-dialog-row">', '<label for="keAutostart">' + lang.autostart + '</label>', '<input type="checkbox" id="keAutostart" name="autostart" value="" /> ', '</div>', '</div>'].join('');
			var dialog = self.createDialog({
				name: name,
				width: 450,
				height: 230,
				title: self.lang(name),
				body: html,
				yesBtn: {
					name: self.lang('yes'),
					click: function(e) {
						var url = K.trim(urlBox.val()),
							width = widthBox.val(),
							height = heightBox.val();
						if (url == 'http://' || K.invalidUrl(url)) {
							alert(self.lang('invalidUrl'));
							urlBox[0].focus();
							return;
						}
						if (!/^\d*$/.test(width)) {
							alert(self.lang('invalidWidth'));
							widthBox[0].focus();
							return;
						}
						if (!/^\d*$/.test(height)) {
							alert(self.lang('invalidHeight'));
							heightBox[0].focus();
							return;
						}
						var html = K.mediaImg(self.themesPath + 'common/blank.gif', {
							src: url,
							type: K.mediaType(url),
							width: width,
							height: height,
							autostart: autostartBox[0].checked ? 'true' : 'false',
							loop: 'true'
						});
						self.insertHtml(html).hideDialog().focus();
					}
				}
			}),
				div = dialog.div,
				urlBox = K('[name="url"]', div),
				viewServerBtn = K('[name="viewServer"]', div),
				widthBox = K('[name="width"]', div),
				heightBox = K('[name="height"]', div),
				autostartBox = K('[name="autostart"]', div);
			urlBox.val('http://');
			if (allowMediaUpload) {
				var uploadbutton = K.uploadbutton({
					button: K('.ke-upload-button', div)[0],
					fieldName: filePostName,
					extraParams: extraParams,
					url: K.addParam(uploadJson, 'dir=media'),
					afterUpload: function(data) {
						dialog.hideLoading();
						if (data.error === 0) {
							var url = data.url;
							if (formatUploadUrl) {
								url = K.formatUrl(url, 'absolute');
							}
							urlBox.val(url);
							if (self.afterUpload) {
								self.afterUpload.call(self, url, data, name);
							}
							alert(self.lang('uploadSuccess'));
						} else {
							alert(data.message);
						}
					},
					afterError: function(html) {
						dialog.hideLoading();
						self.errorDialog(html);
					}
				});
				uploadbutton.fileBox.change(function(e) {
					dialog.showLoading(self.lang('uploadLoading'));
					uploadbutton.submit();
				});
			} else {
				K('.ke-upload-button', div).hide();
			}
			if (allowFileManager) {
				viewServerBtn.click(function(e) {
					self.loadPlugin('filemanager', function() {
						self.plugin.filemanagerDialog({
							viewType: 'LIST',
							dirName: 'media',
							clickFn: function(url, title) {
								if (self.dialogs.length > 1) {
									K('[name="url"]', div).val(url);
									if (self.afterSelectFile) {
										self.afterSelectFile.call(self, url);
									}
									self.hideDialog();
								}
							}
						});
					});
				});
			} else {
				viewServerBtn.hide();
			}
			var img = self.plugin.getSelectedMedia();
			if (img) {
				var attrs = K.mediaAttrs(img.attr('data-ke-tag'));
				urlBox.val(attrs.src);
				widthBox.val(K.removeUnit(img.css('width')) || attrs.width || 0);
				heightBox.val(K.removeUnit(img.css('height')) || attrs.height || 0);
				autostartBox[0].checked = (attrs.autostart === 'true');
			}
			urlBox[0].focus();
			urlBox[0].select();
		},
		'delete': function() {
			self.plugin.getSelectedMedia().remove();
			self.addBookmark();
		}
	};
	self.clickToolbar(name, self.plugin.media.edit);
});

16,删除了lang中的zh-CN.js,因为默认的kindeditor.js(未压缩版本)中已经有默认中文语言包

17,搜索:function initResize() {

在前面增加了代码:if(this.items.length==0){this.toolbar.hide();this.statusbar.hide();}

18,使用https://tool.lu/js/index.html在线混淆生成kindeditor.min.js

19,使用示例:demo.php

demo.php代码:

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>kindeditor4.1.12精简压缩版-示例</title>
</head>

<body>
	<?php
		echo '<br /><br /><strong>完整版:</strong><br />';
		$EArray=array(
			'EName'=>'content_1',//textarea名称和id名称
			'EValue'=>'',//默认值
			'EWidth'=>'670px',//宽度,支持100%,不建议低于670px
			'EHeight'=>'350px',//高度
			'EMode'=>1,//1为正常模式,2为简单模式,3为极简模式(模拟textarea)
			'EJSpath'=>'http://www.aaa.com/magicstr/kindeditor/',//kindeditor.min.js的目录
			'EJSMin'=>false,//是否加载min版js,建议为true,只有调试的时候改为false
			'ELang'=>'zh-CN',//zh-CN中文(默认),en英文,zh-TW台湾
			'ENewLine'=>'br',//换行模式,br或者p
			'EResizeType'=>0,//0为不允许拖拽放大,1为允许竖向,2为允许横向
		);
		require 'kindeditor/editor.php';

		echo '<br /><br /><strong>简单版:</strong><br />';
	
		/*一个页面可以支持多个编辑器,要确保EName不一致即可*/
		//使用示例
		$EArray=array(
			'EName'=>'content_2',//textarea名称和id名称
			'EValue'=>'',//默认值
			'EWidth'=>'670px',//宽度,支持100%,不建议低于670px
			'EHeight'=>'350px',//高度
			'EMode'=>1,//1为正常模式,2为简单模式,3为极简模式(模拟textarea)
			'EJSpath'=>'http://www.aaa.com/magicstr/kindeditor/',//kindeditor.min.js的目录
			'EJSMin'=>true,//是否加载min版js,建议为true,只有调试的时候改为false
			'ELang'=>'zh-CN',//zh-CN中文(默认),en英文,zh-TW台湾
			'ENewLine'=>'br',//换行模式,br或者p
			'EResizeType'=>0,//0为不允许拖拽放大,1为允许竖向,2为允许横向
		);
		require 'kindeditor/editor.php';
	?>
</body>
</html>

文件压缩包:下载

css.php