XiaoCMS后台增加CKEditor编辑器

最新推荐文章于 2024-05-14 09:17:59 发布

DexterLien

最新推荐文章于 2024-05-14 09:17:59 发布

阅读量577

点赞数

本文链接：https://blog.csdn.net/lpwmm/article/details/89792124

版权

php 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

xiaocms作为一款PHP开源轻量的CMS管理后台,非常适合快速建站需要,不过貌似官方14年开始就没有再更新维护过开源版的,后台的富文本编辑器用的KindEditor也好老了.那就自己动手更新一下后台中的富文本编辑器使用最新的CKEditor4

首先下载CKEditor4压缩包,解压后放到xiaocms/img/下面

https://ckeditor.com/cke4/builder

使用向导选择Full预设套装,挑套好看的皮肤(我觉得Office2013的就挺好看),加上中文语言包

下面开始撸代码,直接贴修改过的文件改动代码部分

xiaocms/core/library/fields.function.php

function form_editor($setting='') {
	$t = isset($setting['type']) && $setting['type'] ?  $setting['type'] : (!isset($setting['type']) ? 1 : 0);
	$w = isset($setting['width'])  ? $setting['width']  : '100';
	$h = isset($setting['height']) ? $setting['height'] : '300';
    return '
    <table width="98%" cellspacing="1" cellpadding="2">
    <tbody>
	<tr> 
      <td width="100">宽度 ：</td>
      <td><input type="text" class="input-text" size="10" value="' . $w. '" name="setting[width]">
      <font color="gray">%</font>
      </td>
    </tr>
    <tr> 
      <td>高度 ：</td>
      <td><input type="text" class="input-text" size="10" value="' . $h . '" name="setting[height]">
      <font color="gray">px</font>
      </td>
    </tr>
    <tr> 
      <td>类型 ：</td>
      <td>
      <input type="radio" value=2 name="setting[type]" ' . ($t == 2 ? 'checked' : '') . '> CKEditor&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="radio" value=1 name="setting[type]" ' . ($t == 1 ? 'checked' : '') . '> 完整模式&nbsp;&nbsp;&nbsp;&nbsp;
	  <input type="radio" value=0 name="setting[type]"' . ($t == 0 ? 'checked' : '') . '> 精简模式
      </td>
    </tr>
	<tr> 
      <td>默认值 ：</td>
      <td><textarea name="setting[default]" rows="2" cols="30" class="text">' . (isset($setting['default']) ? $setting['default'] : '') . '</textarea></td>
    </tr>
    </tbody>
	</table>';
}

function content_editor($name, $content='', $setting='') {
	$content = is_null($content[0]) ? get_content_value($setting['default']) : $content[0];
    $w       = isset($setting['width']) && $setting['width']   ? $setting['width']  : '98';
    $h       = isset($setting['height']) && $setting['height'] ? $setting['height'] : '400';
    $id      = $name;
	$type    = isset($setting['type']) && $setting['type'] ?  $setting['type'] : (!isset($setting['type']) ? 1 : 0);    //增加对CKEditor类型(2)的判定
    $str = '<textarea id="' . $id . '" name="data[' . $name . ']" style="width:' . $w . '%;height:' . $h . 'px;visibility:hidden;">' . $content . '</textarea>';
	$page    = !isset($setting['system']) && $name == 'content' ? ", '|', 'pagebreak'" : '';
	$source  = strpos($_SERVER['QUERY_STRING'], 's=admin') === false || strpos($_SERVER['QUERY_STRING'], 's=admin') === false ? '' : "'source', '|',";
	if ($type == 2){
	    //CKEditor初始化代码
        if (!defined('XIAOCMS_EDITOR_LD')) {
            $str.= '<script type="text/javascript" src="img/ckeditor/ckeditor.js"></script>';
            define('XIAOCMS_EDITOR_LD', 1);//防止重复加载JS
        }
        $str.= "  
        <script>      
            CKEDITOR.replace('" . $id . "', {customConfig: './config.js', height: " . $h . ", width: '" . $w . "%'});
        </script>     
        ";
    }
	elseif ($type == 1) {
        if (!defined('XIAOCMS_EDITOR_LD')) {
            $str.= '<script type="text/javascript" src="img/kindeditor/kindeditor.js"></script>';
            define('XIAOCMS_EDITOR_LD', 1);//防止重复加载JS
        }
        $str.= "
		<script type=\"text/javascript\">KindEditor.ready(function(K) { 
		    K.create('#" . $id . "', { 
			    allowFileManager : true,
				resizeType : 0,
				items : [
					" . $source . "  'preview', 'code', 'paste',
					'plainpaste', 'wordpaste', '|', 'image',
					'flash', 'media', 'table', 'hr',  'baidumap',  'link', 'unlink' , '|', 'justifyleft', 'justifycenter', 'justifyright',
					'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
					'superscript', 'clearhtml', 'quickformat',  '|', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor',  'bold',
					'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat'" . $page . "
				]
			});
		});
		</script>";
	} else {
        if (!defined('XIAOCMS_EDITOR_LD')) {
            $str.= '<script type="text/javascript" src="img/kindeditor/kindeditor.js"></script>';
            define('XIAOCMS_EDITOR_LD', 1);//防止重复加载JS
        }
	    $str.= "
		<script type=\"text/javascript\">KindEditor.ready(function(K) { 
			K.create('#" . $id . "', { 
				allowFileManager : true,
				allowImageUpload : false,
				resizeType : 0 ,
				items : [
				    " . $source . " 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
				    'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', '|', 'image', 'link' , 'clearhtml'
				]
			});
		});
		</script>";
	}

	if (!isset($setting['system']) && $name == 'content') {
	    $str .= '<div style="padding-top:3px;"><label><input type="checkbox" checked="" value="1" name="data[fn_add_introduce]">自动获取 </label><input type="text" size="2" value="200" name="data[fn_introcude_length]" class="input-text">字符描述<label><input type="checkbox" checked="" value="1" name="data[fn_auto_thumb]">自动获取第一张图为缩略图</div>';
	}
    return $str;
}

xiaocms/core/controllers/AttachementController.php(增加Action)

/**
     * CK上传
     */
    public function ckeditor_uploadAction() {

        //定义允许上传的文件扩展名
        $ext = 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'),
        );
        //检查目录
        $dir  = $this->get('dir') ? $this->get('dir') : 'image';
        if (!isset($ext[$dir])) {
            echo json_encode(array('error' => 1, 'message' => '上传目录('.$dir.')不正确'));exit;
        }
        $img  = $dir == 'image' ? 1 : 0;
        $size = 10;
        //检查文件大小
        if (is_null($_FILES['upload']['size']) || $_FILES['imgFile']['size'] > $size * 1024 * 1024) {
            echo json_encode(array('uploaded' => 0, 'message' => '不能超过'.$size.'MB'));exit;
        }
        $data = $this->upload('upload', $ext[$dir], $size, $img, null, $this->getAdmin(), 'ke');
        if ($data['result']) {
            echo json_encode(array('uploaded' => 0, 'message' => $data['result']));exit;
        } else {
            echo json_encode(array('uploaded' => 1, 'url' => $data['path']));exit;
        }
    }

xiaocms/img/ckeditor/config.js

/**
 * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
 */

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
    config.toolbarGroups = [
        { name: 'document', groups: [ 'doctools', 'mode', 'document' ] },
        { name: 'clipboard', groups: [ 'undo', 'clipboard' ] },
        { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
        { name: 'forms', groups: [ 'forms' ] },
        { name: 'colors', groups: [ 'colors' ] },
        { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
        { name: 'links', groups: [ 'links' ] },
        { name: 'insert', groups: [ 'insert' ] },
        { name: 'tools', groups: [ 'tools' ] },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'styles', groups: [ 'styles' ] },
        { name: 'others', groups: [ 'others' ] },
        { name: 'about', groups: [ 'about' ] }
    ];
    config.removeButtons = 'Save,NewPage,Templates,Preview,Print,Find,Replace,SelectAll,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Language,BidiRtl,BidiLtr,CreateDiv,Subscript,Superscript,Flash,Smiley,SpecialChar,PageBreak,Iframe,About,ShowBlocks';
    //图片上传URL设置
    config.filebrowserImageUploadUrl = sitepath + '?c=attachment&a=ckeditor_upload';
};

注:工具栏配置文件可以使用ckeditor/samples/index.html中的向导生成