在YII中使用kindeditor扩展

最新推荐文章于 2017-07-05 20:41:01 发布
最新推荐文章于 2017-07-05 20:41:01 发布
阅读量4.9k 收藏 4
点赞数
分类专栏： YII学习日志

比较喜欢用kindeditor,YII上的版本比较旧,所以自己重新整了个扩展

先在protected\extensions下创建KEditor文件夹用来放文件，keSource里放kindeditor的源文件，然后建三个类KEditor、KEditorManage和KEditorUpload，KEditor是扩展的主文件，KEditorManage是用来浏览服务器文件的，KEditorUpload是用来示例接收上传文件的，

KEditor代码

<?php
class KEditor extends CWidget{
	/*
	 * TEXTAREA输入框的属性，保证js调用KE失败时，文本框的样式。
	 */
	public $textareaOptions=array();
	/*
	 * 编辑器属性集。
	 */
	public $properties=array();
	/*
	 * TEXTAREA输入框的name，必须设置。
	 * 数据类型：String
	 */
	public $name;
	/*
	 * TEXTAREA的id，可为空
	 */
	public $id;
	
	public $model;
	
	public $baseUrl;
	
	public static function getUploadPath(){
		$dir = dirname(__FILE__).DIRECTORY_SEPARATOR.'keSource';
		if(isset(Yii::app()->params->uploadPath)){
			return Yii::getPathOfAlias('webroot').str_replace(
								'/',DIRECTORY_SEPARATOR,
								Yii::app()->params->
								uploadPath);
		}
		return Yii::app()->getAssetmanager()
				->getPublishedPath($dir).DIRECTORY_SEPARATOR.'upload';
	}
	
	public static function getUploadUrl(){
		$dir = dirname(__FILE__).DIRECTORY_SEPARATOR.'keSource';
		if(isset(Yii::app()->params->uploadPath)){
			return Yii::app()->baseUrl.Yii::app()->params->uploadPath;
		}
		return Yii::app()->getAssetManager()->publish($dir).'/upload';
	}
	
	public function init(){
		if($this->name===null)
			throw new CException(Yii::t('zii','The id property cannot be empty.'));
			
		$dir = dirname(__FILE__).DIRECTORY_SEPARATOR.'keSource';
		
		$this->baseUrl=Yii::app()->getAssetManager()->publish($dir);
		$cs=Yii::app()->getClientScript();
		$cs->registerCssFile($this->baseUrl.'/themes/default/default.css');
		if(YII_DEBUG) $cs->registerScriptFile($this->baseUrl.'/kindeditor.js');
		else $cs->registerScriptFile($this->baseUrl.'/kindeditor-min.js');
	}
	
	public function run(){
		$cs=Yii::app()->getClientScript();
		$textAreaOptions=$this->gettextareaOptions();
		$textAreaOptions['name']=CHtml::resolveName($this->model,$this->name);
		$this->id=$textAreaOptions['id']=CHtml::getIdByName($textAreaOptions['name']);
		echo CHtml::activeTextArea($this->model,$this->name,$textAreaOptions);
		
		$properties_string = CJavaScript::encode($this->getKeProperties());

		$js=<<<EOF
KindEditor.ready(function(K) {
	var editor_$this->id = K.create('#$this->id', 
$properties_string
	);
});
EOF;
		$cs->registerScript('KE'.$this->name,$js,CClientScript::POS_HEAD);
	}
	
	public function gettextareaOptions(){
		//允许获取的属性
		$allowParams=array('rows','cols','style');
		//准备返回的属性数组
		$params=array();
		foreach($allowParams as $key){
			if(isset($this->textareaOptions[$key]))
				$params[$key]=$this->textareaOptions[$key];
		}
		$params['name']=$params['id']=$this->name;
		return $params;
	}
	
	public function getKeProperties(){
		$properties_key=array(
			'width',
			'height',
			'minWidth',
			'minHeight',
			'items',
			'noDisableItems',
			'filterMode',
			'htmlTags',
			'wellFormatMode',
			'resizeType',
			'themeType',
			'langType',
			'designMode',
			'fullscreenMode',
			'basePath',
			'themesPath',
			'pluginsPath',
			'langPath',
			'minChangeSize',
			'urlType',
			'newlineTag',
			'pasteType',
			'dialogAlignType',
			'shadowMode',
			'useContextmenu',
			'syncType',
			'indentChar',
			'cssPath',
			'cssData',
			'bodyClass',
			'colorTable',
			'afterCreate',
			'afterChange',
			'afterTab',
			'afterFocus',
			'afterBlur',
			'afterUpload',
			'uploadJson',
			'fileManagerJson',
			'allowPreviewEmoticons',
			'allowImageUpload',
			'allowFlashUpload',
			'allowMediaUpload',
			'allowFileUpload',
			'allowFileManager',
			'fontSizeTable',
			'imageTabIndex',
			'formatUploadUrl',
			'fullscreenShortcut',
			'extraFileUploadParams',
		);
		
		//准备返回的属性数组
		$params=array();
		foreach($properties_key as $key){
			if(isset($this->properties[$key]))
				$params[$key]=$this->properties[$key];
		}
		return $params;
	}
}

KEditorManage代码

<?php
class KEditorManage extends CAction{

	public function run(){
		Yii::import('ext.KEditor.KEditor');
		$root_path=KEditor::getUploadPath().'/';
		$root_url=KEditor::getUploadUrl().'/';
		
		//图片扩展名
		$ext_arr = array('gif', 'jpg', 'jpeg', 'png', 'bmp');
		
		//目录名
		$dir_name = empty($_GET['dir']) ? '' : trim($_GET['dir']);
		if (!in_array($dir_name, array('', 'image', 'flash', 'media', 'file'))) {
			echo "Invalid Directory name.";
			exit;
		}
		if ($dir_name !== '') {
			$root_path .= $dir_name . "/";
			$root_url .= $dir_name . "/";
			if (!file_exists($root_path)) {
				mkdir($root_path);
			}
		}
		
		//根据path参数，设置各路径和URL
		if (empty($_GET['path'])) {
			$current_path = realpath($root_path) . '/';
			$current_url = $root_url;
			$current_dir_path = '';
			$moveup_dir_path = '';
		} else {
			$current_path = realpath($root_path) . '/' . $_GET['path'];
			$current_url = $root_url . $_GET['path'];
			$current_dir_path = $_GET['path'];
			$moveup_dir_path = preg_replace('/(.*?)[^\/]+\/$/', '$1', $current_dir_path);
		}
		echo realpath($root_path);
		//排序形式，name or size or type
		$order = empty($_GET['order']) ? 'name' : strtolower($_GET['order']);
		
		//不允许使用..移动到上一级目录
		if (preg_match('/\.\./', $current_path)) {
			echo 'Access is not allowed.';
			exit;
		}
		//最后一个字符不是/
		if (!preg_match('/\/$/', $current_path)) {
			echo 'Parameter is not valid.';
			exit;
		}
		//目录不存在或不是目录
		if (!file_exists($current_path) || !is_dir($current_path)) {
			echo 'Directory does not exist.';
			exit;
		}
		
		//遍历目录取得文件信息
		$file_list = array();
		
		$handle = new DirectoryIterator($current_path);
		$i=0;
		foreach($handle as $file){
			if($file->isDot()) continue;
			if($file->isDir()){
				$file_list[$i]['is_dir'] = true; //是否文件夹
				$file_list[$i]['has_file'] = (count(scandir($file->getPath())) > 2); //文件夹是否包含文件
				$file_list[$i]['filesize'] = 0; //文件大小
				$file_list[$i]['is_photo'] = false; //是否图片
				$file_list[$i]['filetype'] = ''; //文件类别，用扩展名判断
			}else{
				$file_list[$i]['is_dir'] = false;
				$file_list[$i]['has_file'] = false;
				$file_list[$i]['filesize'] = $file->getSize();
				$file_list[$i]['dir_path'] = '';
				$file_ext = $file->getExtension();
				$file_list[$i]['is_photo'] = in_array($file_ext, $ext_arr);
				$file_list[$i]['filetype'] = $file_ext;
			}
			$file_list[$i]['filename'] = $file->getFilename(); //文件名，包含扩展名
			$file_list[$i]['datetime'] = date('Y-m-d H:i:s', $file->getMTime());
			$i++;
		}
		
		usort($file_list, array($this,'cmp_func'));

		$result = array();
		//相对于根目录的上一级目录
		$result['moveup_dir_path'] = $moveup_dir_path;
		//相对于根目录的当前目录
		$result['current_dir_path'] = $current_dir_path;
		//当前目录的URL
		$result['current_url'] = $current_url;
		//文件数
		$result['total_count'] = count($file_list);
		//文件列表数组
		$result['file_list'] = $file_list;
		
		//输出JSON字符串
		header('Content-type: application/json; charset=UTF-8');
		echo CJSON::encode($result);
		exit;
	}
	
	//排序
	public function cmp_func($a, $b) {
		global $order;
		if ($a['is_dir'] && !$b['is_dir']) {
			return -1;
		} else if (!$a['is_dir'] && $b['is_dir']) {
			return 1;
		} else {
			if ($order == 'size') {
				if ($a['filesize'] > $b['filesize']) {
					return 1;
				} else if ($a['filesize'] < $b['filesize']) {
					return -1;
				} else {
					return 0;
				}
			} else if ($order == 'type') {
				return strcmp($a['filetype'], $b['filetype']);
			} else {
				return strcmp($a['filename'], $b['filename']);
			}
		}
	}
}
?>
KEditorUpload代码 
<?php
class KEditorUpload extends CAction{
	
	public function run(){
		$dir=isset($_GET['dir'])?trim($_GET['dir']):'file';
		$ext_arr = array(
			'image' => array('gif', 'jpg', 'jpeg', 'png', 'bmp'),
			'flash' => array('swf', 'flv'),
			'media' => array('swf', 'flv', 'mp3', 'wav', 'wma', 'wmv', 'mid', 'avi', 'mpg', 'asf', 'rm', 'rmvb'),
			'file' => array('doc', 'docx', 'xls', 'xlsx', 'ppt', 'htm', 'html', 'txt', 'zip', 'rar', 'gz', 'bz2'),
		);
		if(empty($ext_arr[$dir])){
			echo CJSON::encode(array('error'=>1,'message'=>'目录名不正确。'));
			exit;
		}
		$originalurl='';
		$filename='';
		$date=date('Ymd');
		$id=0;
		$max_size=2097152; //2MBs
		
		$upload_image=CUploadedFile::getInstanceByName('imgFile');
        
		Yii::import('ext.KEditor.KEditor');
		$upload_dir=KEditor::getUploadPath().'/'.$dir;
		if(!file_exists($upload_dir)) mkdir($upload_dir);
		$upload_dir=$upload_dir.'/'.$date;
		if(!file_exists($upload_dir)) mkdir($upload_dir);
		
		$upload_url=KEditor::getUploadUrl().'/'.$dir.'/'.$date;
		
        if(is_object($upload_image) && get_class($upload_image)==='CUploadedFile'){
			if($upload_image->size > $max_size){
				echo CJSON::encode(array('error'=>1,'message'=>'上传文件大小超过限制。'));
				exit;
			}
			//新文件名
           	$filename=date("YmdHis").'_'.rand(10000, 99999);
           	$ext=$upload_image->extensionName;
			if(in_array($ext, $ext_arr[$dir]) === false){
				echo CJSON::encode(array('error'=>1,'message'=>"上传文件扩展名是不允许的扩展名。\n只允许".implode(',',$ext_arr[$dir]).'格式。'));
				exit;
			}
           	$uploadfile=$upload_dir.'/'.$filename.'.'.$ext;
           	$originalurl=$upload_url.'/'.$filename.'.'.$ext;
			
			$upload_image->saveAs($uploadfile);
			echo CJSON::encode(array('error'=>0,'url'=>$originalurl));
		}else{
			echo CJSON::encode(array('error'=>1,'message'=>'未知错误'));
		}
	}
}
配置config/main.php文件，设置上传文件存放位置 


'params'=>array(
		// this is used in contact page
		'adminEmail'=>'webmaster@example.com',
		'uploadPath'=>'/upload',  //添加这句，upload为存放文件文件夹的名字，自己定义，这里是放在根目录的upload文件夹

在控制器中设置接收文件和浏览服务器文件的action 

public function actions()
{
	return array(
		//在actions下的return array添加下面两句，没有actions的话自己添加
		'upload'=>array('class'=>'application.extensions.KEditor.KEditorUpload'),
		'manageJson'=>array('class'=>'application.extensions.KEditor.KEditorManage'),
	);
}


在视图里面使用 

<?php $this->widget('ext.KEditor.KEditor',array(
			'model'=>$model,  //传入form model
			'name'=>'content', //设置name
			'properties'=>array(
				//设置接收文件上传的action
				'uploadJson'=>'/admin/default/upload',
				//设置浏览服务器文件的action，这两个就是上面配置在/admin/default的
				'fileManagerJson'=>'/admin/default/manageJson',
                                'items'=>array('source', '|', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
						'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
						'insertunorderedlist', '|',  'image', 'link','unlink'),	 
				'newlineTag'=>'br',
				'allowFileManager'=>true,
				//传值前加js:来标记这些是js代码
				'afterCreate'=>"js:function() {
						K('#ChapterForm_all_len').val(this.count());
						K('#ChapterForm_word_len').val(this.count('text'));
					}",
				'afterChange'=>"js:function() {
						K('#ChapterForm_all_len').val(this.count());
						K('#ChapterForm_word_len').val(this.count('text'));
					}",
			), 
			'textareaOptions'=>array(
				'style'=>'width:98%;height:400px;',
			)
		)); ?>

textareaOptions用来设置textarea的大小和样式，仅支持rows、cols和style
properties的各项跟js设置kindeditor的是一样的，上面的设置与下面用js设置的是一致，kindeditor原来有的项都可以设置 

var editor1 = K.create('#editor_modelname_name', {
	uploadJson : "/admin/default/upload",
	fileManagerJson : "/admin/default/manageJson",
	newlineTag : "br",
	allowFileManager : true,
	afterCreate : function() {
		K('#ChapterForm_all_len').html(this.count());
		K('#ChapterForm_word_len').html(this.count('text'));
	},
	afterChange : function() {
		K('#ChapterForm_all_len').html(this.count());
		K('#ChapterForm_word_len').html(this.count('text'));
	}
});

如果要设置(默认加载的样式)


最近经常有朋友说不会用,特意增加附件给各位下载

扩展文件

115网盘礼包码：5lbbykzxjjnw
http://115.com/lb/5lbbykzxjjnw

解压到\extensions目录即可


Morven
关注
专栏目录
yii2中集成使用kindeditor富文本编辑器
yiifans的专栏——专注Yii Framework 2.0开发
07-04 5519
我们以advanced模板中frontend应用为例 kindeditor下载、安装 首先下载kindeditor http://kindeditor.googlecode.com/files/kindeditor-4.1.10.zip 然后解压到web目录，如
Yii::2.0 使用富文本编辑器教程
野生猴子
05-17 2306
第一步：使用compoer 安装富文本编辑器参考地址： https://github.com/yiidoc/yii2-redactor php composer.phar require --prefer-dist yiidoc/yii2-redactor "*"第二步：在main-local.php配置文件中加入下面的配置项'modules' => [ 'redactor'=>'y
kindeditor整合进yii框架
weixin_34227447的博客
02-18 90
2019独角兽企业重金招聘Python工程师标准>>> ...
yii中嵌入kindeditor
Jacketinsysu的专栏
02-15 1255
万分感谢大爱的原作者, 原文点这里1.下载kindeditor（官网下载地址：http://kindeditor.net/down.php），并解压到Yii框架的protected/extensions目录下，比如我的路径是protected/extensions/kindeditor。 2. 在kindeditor目录创建一个php类文件KEditorWidget.php，内容如下：<?php/
yii引入kindeditor
weixin_34352005的博客
11-05 102
方法一：将kindeditor直接引入。将kindeditor复制到到项目的assets下：配置常量路径：在入口文件index.php中引入这个constan目录。在布局文件中引入kindeditor的js和cs文件：在视图文件blogadd中：ok，这样编辑器就可以使用了！方法二：将kindediotr作为小物件引入。首先引入kindeditor扩展然后在视图文件中以小物件...
KindEditor4.1编辑器的使用、封装及扩展
yangpanwww的博客
06-12 232
web开发中。。少不了编辑器的使用。。经过各个编辑器的比较。个人认为 KindEditor4.1 编辑器非常的不错   觉得她简单而美丽....就像一个漂亮的妞。。。嘿嘿。。。而且提供了API。。容易扩展。。   下面的我封装了 KindEditor4.1 的一些方法。。。让我们在开发中只要配置来实现就好了。。。 附件中提供了 源码和jar   。。省的你们去反编译了。。嘿嘿。。。 ...
yii2-kindeditor:Yii 2 kindeditor是Yii 2.0小部件的WYSIWYG HTML编辑器
05-16
Yii2的KindEditor小部件 呈现一个小部件。 安装 安装此扩展的首选方法是通过 。 无论运行 composer require heyanlong/yii2-kindeditor:~1.0 或添加 " heyanlong/yii2-kindeditor " : " ~1.0 " 到应用程序的...
yii2-kindeditor:yii2-kindeditor
07-08
安装扩展后，只需通过以下方式在代码中使用它： <?= \sailinghang\kindeditor\ KindEditorWidget :: widget ([ 'name' => 'content' , 'options' => [], // html attributes 'clientOptions' => [ 'wi
yii2-kindeditor
07-17
安装扩展后，只需通过以下方式在代码中使用它： <?= \mkui\kindeditor\ KindEditorWidget :: widget ([ 'name' => 'content' , 'options' => [], // html attributes 'clientOptions' => [ 'width' => '680...
Yii KindEditor整合
花生——宁静致远
06-18 904
1.下载KindEditor，解压到protected\extensions\kindeditor\KindEditorWidget.php 2.修改对应的_form文件，增加如下代码 textAreaRow($model,'content',array('rows'=>6, 'cols'=>50)); ?> widget('ext.kindeditor.KindEditorWid
kindeditor自定义插件
jbgtwang的专栏
05-30 8706
kindeditor是一款比较好用的富文本，里面功能比较全面，还支持自定义插件。官网的自定义hello插件示例非常简单，想仿照此例做一个插入文本框的插件，一番折腾总算看到效果。 1.定义kindeditor/plugins/hello/hello.js KindEditor.plugin('hello', function(K) {         var editor = this
Yii-视图- kindeditor编辑器的应用
dreamzml的专栏
12-13 1942
比较喜欢用kindeditor,YII上的版本比较旧,所以自己重新整了个扩展 先在protected\extensions下创建KEditor文件夹用来放文件，keSource里放kindeditor的源文件，然后建三个类KEditor、KEditorManage和KEditorUpload，KEditor是扩展的主文件，KEditorManage是用来浏览服务器文件的，KEditorUpl
Thinkphp编辑器扩展类kindeditor使用方法
luxiuwen的专栏
07-09 2663
一， 使用前的准备。 使用前请确认你已经建立好了一个Thinkphp网站项目。 1，Keditor.class.php和JSON.class.php 是编辑器扩展类文件，将他们复制到你的网站项目的ThinkPHP\Lib\ORG\Net 文件夹下。 2，editor文件夹是kindeditor的核心包。将其复制到你项目的Public文件夹下（和入口文件同级的那个Public）,并在Publi
Yii2 之 富文本编辑器
RisenWang 的博客
12-02 2024
1 安装 kindEditorphp composer.phar require pjkui/kindeditor "*"2 在 controller 中 添加图片处理程序public function actions() { return [ 'Kupload' => [ 'class' => 'pjkui\kindeditor\KindEdito
yii2框架实现引导安装功能
梨子心
07-05 589
最近有在学习yii框架，想着做一个小型的cms。 一个cms最开始的动作当然时安装引导，参考lulucms的代码，学习实现的结果如下。第一步 安装介绍 (install.php?r=install/step_one)第二步 环境检查 (install.php?r=install/step_two)第三步 数据库配置 (install.php?r=install/step_three)第四步 安装
YII中自定义Kindeditor扩展的整合教程
本文提供的是一种在YII框架中扩展使用KindEditor的方法，通过自定义类和配置管理上传路径，实现了将这个流行的富文本编辑器与YII项目无缝集成。这对于提高Web应用的前端编辑功能具有重要意义，尤其是在处理文本内容...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值