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了.

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编辑器。

如下图

既然后台编辑器都配置好了，前台编辑器也可以用同样的方法配置，只不过修改路径为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配置图片上传功能。