首页 > 开源系统应用 > Thinkphp > 为OneThink后台添加ckeditor编辑器
网站建设、切图、企业建站、微信开发 联系QQ:404658186 tel:18716186715
2015
06-11

为OneThink后台添加ckeditor编辑器

OneThink是一个简单而强大的内容管理框架,基于ThinkPHP开发,能让WEB开发更快速!

OneThink后台默认使用的是Kindeditor和百度的Ueditor,这两个编辑器也还不错,只是有一个缺点让我无法忍受,添加的内容时产生的冗余代码很多,跟cdeditor编辑器比差距不是一点不点,所以谋划着在后台添加个ckeditor编辑器。

废话不多说,直接进入主题。

1.下载ckeditor,放入/Public/static文件夹。

2.修改Addons/EditorForAdmin/config.php文件,在第27行左右,’2’=>’Ueditor(百度编辑器)’下面添加 ‘3’=>’ckeditor’。

'editor_wysiwyg'=>array(
     'title'=>'富文本编辑器:',
     'type'=>'select',
     'options'=>array(
          '1'=>'Kindeditor',
          '2'=>'Ueditor(百度编辑器)',
          '3'=>'ckeditor'  //添加cdeditor
     ),
     'value'=>1
 ),

现在你就可以在后台插件管理里配置ckeditor了.

QQ截图20150519144025

3.修改Addons/EditorForAdmin/content.html文件

第一步只是为后台插件管理添加了一个选项,现在还要配置模板,加载ckeditor。

第9行左右,把{// 富文本 }<case value=”2″>******</case>里******的内容替换为下面的代码.

{// 富文本 }
 <if condition="$addons_config['editor_wysiwyg'] eq 1"> 
 <input type="hidden" name="parse" value="0"> 
     <link rel="stylesheet" href="__STATIC__/kindeditor/default/default.css" />
     <script charset="utf-8" src="__STATIC__/kindeditor/kindeditor-min.js"></script>
     <script charset="utf-8" src="__STATIC__/kindeditor/zh_CN.js"></script>
     <script type="text/javascript">
        var editor;
        KindEditor.ready(function(K) {
        editor = K.create('textarea[name="{$addons_data.name}"]', {
        allowFileManager : false,
        themesPath: K.basePath,
        width: '100%',
        height: '{$addons_config.editor_height}',
        resizeType: <eq name="addons_config.editor_resize_type" value="1">1<else />0</eq>,
        pasteType : 2,
        urlType : 'absolute',
        fileManagerJson : '{:U('fileManagerJson')}',
        //uploadJson : '{:U('uploadJson')}' }
        uploadJson : '{:addons_url("EditorForAdmin://Upload/ke_upimg")}'
 });
 });

 $(function(){
     //传统表单提交同步
     $('textarea[name="{$addons_data.name}"]').closest('form').submit(function(){
     editor.sync();
 });
     //ajax提交之前同步
 $('button[type="submit"],#submit,.ajax-post').click(function(){
     editor.sync();
     });
 })
 </script> 
 <elseif condition="$addons_config['editor_wysiwyg'] eq 2"/>
      <script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/ueditor.config.js"></script>
      <script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/ueditor.all.js"></script>
      <script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/lang/zh-cn/zh-cn.js"></script>
      <script type="text/javascript">
          $('textarea[name="{$addons_data.name}"]').attr('id', 'editor_id_{$addons_data.name}');
          window.UEDITOR_HOME_URL = "__STATIC__/ueditor";
          window.UEDITOR_CONFIG.initialFrameHeight = parseInt('{$addons_config.editor_height}');
          window.UEDITOR_CONFIG.scaleEnabled = <eq name="addons_config.editor_resize_type" value="1">true<else />false</eq>;
          window.UEDITOR_CONFIG.imageUrl = '{:addons_url("EditorForAdmin://Upload/ue_upimg")}';
          window.UEDITOR_CONFIG.imagePath = '';
          window.UEDITOR_CONFIG.imageFieldName = 'imgFile';
          UE.getEditor('editor_id_{$addons_data.name}');
     </script> 
 <elseif condition="$addons_config['editor_wysiwyg'] eq 3"/>
     <script type="text/javascript" src="__STATIC__/ckeditor/ckeditor.js"></script>
     <input type="hidden" name="parse" value="0">
     <input type="hidden" id="isckeditor" value="1" />
     <script type="text/javascript"> 
        $('textarea[name="{$addons_data.name}"]').attr('id', 'editor_id_{$addons_data.name}'); 
        CKEDITOR.replace('editor_id_{$addons_data.name}', {
          language: 'zh-cn',
          //filebrowserBrowseUrl:'{:addons_url("EditorForAdmin://Upload/ck_imgdir")}',
          filebrowserImageUploadUrl: '{:addons_url("EditorForAdmin://Upload/ck_upimg")}'//ckeditor的图片上传地址
 }); 
      </script> 
 </if>

经过这三步就配置好OneThink后台添加ckeditor编辑器。

如下图

QQ截图20150519144258

既然后台编辑器都配置好了,前台编辑器也可以用同样的方法配置,只不过修改路径为Addons/Editor/。

注意

OneThink采用的是Ajax方式提交Post数据,这里在提交时对ckeditor进行一些判断。

打开文件/Public/Admin/js/common.js,找到代码

form = $('.'+target_form);

在此行下添加

if($("#isckeditor").val()==1){
	for ( instance in CKEDITOR.instances ){ 
		CKEDITOR.instances[instance].updateElement(); 
	} 
}

这段代码的意思是,如果使用的是ckeditor编辑器,要先让ckeditor更新相关字段的属性值,这样才不会丢失数据。

ckeditor是添加好了,但是ckeditor默认并未添加图片上传功能,请看下一篇,为ckeditor配置图片上传功能

最后编辑:
作者:码农一号
这个作者貌似有点懒,什么都没有留下。
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

留下一个回复

你的email不会被公开。

*