calendar nao-pon/blog/2013.01

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

<?php
/**
 * プリロードで ckeditor4 の CKEditor の設定を行うサンプル
 *
 * @author nao-pon
 *
 */
 
if (!defined('XOOPS_ROOT_PATH')) exit();
 
class Ckeditor4CustomConfig extends XCube_ActionFilter
{
    function postFilter() {
        
        // Smarty プラグインがから渡されたパラメタをカスタムする用
        $this->mRoot->mDelegateManager->add('Ckeditor4.Utils.PreBuild_ckconfig', 'Ckeditor4CustomConfig::setParams');
        
        // ckeditor.config をカスタムする用 (Params 解釈前: Smarty プラグインで指定した toolbar や管理画面:一般設定の config は上書きできない)
        $this->mRoot->mDelegateManager->add('Ckeditor4.Utils.PreParseBuild_ckconfig', 'Ckeditor4CustomConfig::setConfig');
        
        // ckeditor.config をカスタムする用 (最終段階: すべての config を上書きできる)
        //$this->mRoot->mDelegateManager->add('Ckeditor4.Utils.PostBuild_ckconfig', 'Ckeditor4CustomConfig::setConfig');
    }
    
    function setParams(& $params) {
        
        // class 名を付加してみる
        $params['class'] .= ' hoge';
        
        // inline style を付加してみる(あんまり意味はないけど)
        $params['style'] .= ';width: 100%;';
        
        // cols, rows を指定してみる(あんまり意味はないけど)
        $params['cols'] = '60';
        $params['rows'] = '30';
        
    }
    
    
    function setConfig(& $config, $params) {
        // CKEditor.config: http://docs.ckeditor.com/#!/api/CKEDITOR.config
        
        if ($params['editor'] === 'bbcode') {
            // BB-Code エディタの場合のツールバーを指定してみる
            $config['toolbar'] =<<< EOD
[
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike' ] },
    { name: 'paragraph', groups: [ 'list', 'indent', 'align' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent' ] },
    { name: 'links', items: [ 'Link', 'Unlink' ] },
    { name: 'others', items: [ '-' ] },
    { name: 'about', items: [ 'About' ] }
]
EOD;
        } else {
            // HTML エディタの場合のツールバーを指定してみる
            $config['toolbar'] =<<< EOD
[
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', 'Styles' ] },
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent' ] },
    { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
    { name: 'others', items: [ '-' ] },
    { name: 'about', items: [ 'About' ] }
]
EOD;
        
            // Styles set を設定してみる (http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-stylesSet)
            $config['stylesSet'] =<<< EOD
[
    { name: '強調点', element: 'strong' },
    { name: '重要点', element: 'em', styles: {'color' : 'red'} },
    { name: 'バッチ', element: 'span', styles: {'color': '#FFF', 'background-color': '#808000', 'border': '1px solid #bdb76b', 'border-radius': '6px', 'display': 'inline-block', 'padding': '0px 8px 0 8px', 'white-space': 'nowrap', 'textDecoration': 'none', 'font-family': 'Meiryo', 'margin': '5px' } }
]
EOD;
        }
        
        // 幅を指定してみる
        $config['width'] = '600px';
        
        // その他、ckeditor.config の値を自由に指定できます。
    }
}