欢迎各位兄弟 发布技术文章

这里的技术是共享的

为OneThink后台添加ckeditor编辑器


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’。


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

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

QQ截图20150519144025

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

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

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


  1. {// 富文本 }
  2. <if condition="$addons_config['editor_wysiwyg'] eq 1">
  3. <input type="hidden" name="parse" value="0">
  4. <link rel="stylesheet" href="__STATIC__/kindeditor/default/default.css" />
  5. <script charset="utf-8" src="__STATIC__/kindeditor/kindeditor-min.js"></script>
  6. <script charset="utf-8" src="__STATIC__/kindeditor/zh_CN.js"></script>
  7. <script type="text/javascript">
  8. var editor;
  9. KindEditor.ready(function(K) {
  10. editor = K.create('textarea[name="{$addons_data.name}"]', {
  11. allowFileManager : false,
  12. themesPath: K.basePath,
  13. width: '100%',
  14. height: '{$addons_config.editor_height}',
  15. resizeType: <eq name="addons_config.editor_resize_type" value="1">1<else />0</eq>,
  16. pasteType : 2,
  17. urlType : 'absolute',
  18. fileManagerJson : '{:U('fileManagerJson')}',
  19. //uploadJson : '{:U('uploadJson')}' }
  20. uploadJson : '{:addons_url("EditorForAdmin://Upload/ke_upimg")}'
  21. });
  22. });
  23.  
  24. $(function(){
  25. //传统表单提交同步
  26. $('textarea[name="{$addons_data.name}"]').closest('form').submit(function(){
  27. editor.sync();
  28. });
  29. //ajax提交之前同步
  30. $('button[type="submit"],#submit,.ajax-post').click(function(){
  31. editor.sync();
  32. });
  33. })
  34. </script>
  35. <elseif condition="$addons_config['editor_wysiwyg'] eq 2"/>
  36. <script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/ueditor.config.js"></script>
  37. <script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/ueditor.all.js"></script>
  38. <script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/lang/zh-cn/zh-cn.js"></script>
  39. <script type="text/javascript">
  40. $('textarea[name="{$addons_data.name}"]').attr('id', 'editor_id_{$addons_data.name}');
  41. window.UEDITOR_HOME_URL = "__STATIC__/ueditor";
  42. window.UEDITOR_CONFIG.initialFrameHeight = parseInt('{$addons_config.editor_height}');
  43. window.UEDITOR_CONFIG.scaleEnabled = <eq name="addons_config.editor_resize_type" value="1">true<else />false</eq>;
  44. window.UEDITOR_CONFIG.imageUrl = '{:addons_url("EditorForAdmin://Upload/ue_upimg")}';
  45. window.UEDITOR_CONFIG.imagePath = '';
  46. window.UEDITOR_CONFIG.imageFieldName = 'imgFile';
  47. UE.getEditor('editor_id_{$addons_data.name}');
  48. </script>
  49. <elseif condition="$addons_config['editor_wysiwyg'] eq 3"/>
  50. <script type="text/javascript" src="__STATIC__/ckeditor/ckeditor.js"></script>
  51. <input type="hidden" name="parse" value="0">
  52. <input type="hidden" id="isckeditor" value="1" />
  53. <script type="text/javascript">
  54. $('textarea[name="{$addons_data.name}"]').attr('id', 'editor_id_{$addons_data.name}');
  55. CKEDITOR.replace('editor_id_{$addons_data.name}', {
  56. language: 'zh-cn',
  57. //filebrowserBrowseUrl:'{:addons_url("EditorForAdmin://Upload/ck_imgdir")}',
  58. filebrowserImageUploadUrl: '{:addons_url("EditorForAdmin://Upload/ck_upimg")}'//ckeditor的图片上传地址
  59. });
  60. </script>
  61. </if>

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

如下图

QQ截图20150519144258

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

注意

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

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


  1. form = $('.'+target_form);

在此行下添加


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

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

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


唯物品评历史

关注"唯物品评历史",跟着泪痕春雨先生,读懂历史,看彻人生

打开隐藏二维码