张虹亮'blog » 精简版

存档

文章标签 ‘精简版’

kindeditor4.1.12精简压缩版-示例

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

使用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>

文件压缩包：下载

分类: div+css学习, html总结, php学习标签: kindeditor, 优化版, 富文本, 精简版, 编辑器

张宏良博客?'':(张洪量?'':张虹亮'blog)

存档

kindeditor4.1.12精简压缩版-示例

近期文章

近期评论

按日期阅读

Categories

Blogroll

Archives

Meta

2021年4月
一	二	三	四	五	六	日
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

张宏良博客?'':(张洪量?'':张虹亮'blog)

存档

kindeditor4.1.12精简压缩版-示例

近期文章

近期评论

按日期阅读

标签云

Categories

Blogroll

Archives

Meta