css - Aloha Editor: aloha-multisplit-expand ボックスに新しいスタイル (aloha-button) を追加

Question

aloha-multisplit-expand ボックスに新しい aloha-button を追加するにはどうすればよいですか。（無制限の数のスタイルを追加する機能が必要です。もちろん、管理者経由ではなく、ハードコードされています）

Answer 1

アロハ エディターへのスタイルの追加: ここでは、「meg」という名前のシンプルなスタイルを追加する方法を示します。</p>

1. sites\all\libraries\aloha\aloha\plugins\common\format\nls ファイルのボタンの「ルート」に define を追加します。"button.meg.tooltip":"Meg 形式の説明"

2. sites\all\libraries\aloha\aloha\plugins\common\format\lib\format-plugin.js で、クラスの名前である「config」配列の「default button configuration」に次のように追加します。

   config: ['strong', 'meg', 'em'….]

3. 「initButtons」関数に初期化スタイル ボタンの実装を追加します。 switch(button) の下に、新しいスタイルの「case」を追加します。

   注意: 通常の CSS クラスをニュートラル タグで実装するために使用される 'span' タグ。

4. クラス「span.meg」を特別なスタイルとして定義します: css メイン ファイル (drupal サイト テーマの css) 内に「span.meg」クラスを追加します。

   span.meg {
   color: green; }
   

5. 再構築のためにサイトを更新し、フローティング アロハで新しいスタイルを使用する

サンプルコード

// Additional special styles
case 'charm-meg':
    that.multiSplitItems.push({
        'name' : button,
        'tooltip' : i18n.t('button.' + button + '.tooltip'),
        'iconClass' : 'aloha-button ' + i18n.t('aloha-button-' + button),
        'markup' : jQuery('<span class=' + button + '></span>'),
        'click' : function () {
            var
                markup = jQuery('<span class=' + button + '></span>'),
                rangeObject = Aloha.Selection.rangeObject,
                foundMarkup,
                selectedCells = jQuery('.aloha-cell-selected');

            // formating workaround for table plugin
            if ( selectedCells.length > 0 ) {
                var cellMarkupCounter = 0;
                selectedCells.each( function () {
                    var cellContent = jQuery(this).find('div'),
                        cellMarkup = cellContent.find(button);

                    if ( cellMarkup.length > 0 ) {
                        // unwrap all found markup text
                        // <td><b>text</b> foo <b>bar</b></td>
                        // and wrap the whole contents of the <td> into <b> tags
                        // <td><b>text foo bar</b></td>
                        cellMarkup.contents().unwrap();
                        cellMarkupCounter++;
                    }
                    cellContent.contents().wrap('<span class=' + button + '></span>');
                });

                // remove all markup if all cells have markup
                if ( cellMarkupCounter == selectedCells.length ) {
                    selectedCells.find(button).contents().unwrap();
                }
                return false;
            }
            // formating workaround for table plugin

            // check whether the markup is found in the range (at the start of the range)
            foundMarkup = rangeObject.findMarkup(function() {
                return this.nodeName.toLowerCase() == markup.get(0).nodeName.toLowerCase();
            }, Aloha.activeEditable.obj);

            if ( foundMarkup ) {
                // remove the markup
                if (rangeObject.isCollapsed()) {
                    // when the range is collapsed, we remove exactly the one DOM element
                    GENTICS.Utils.Dom.removeFromDOM(foundMarkup, rangeObject, true);
                } else {
                    // the range is not collapsed, so we remove the markup from the range
                    GENTICS.Utils.Dom.removeMarkup(rangeObject, markup, Aloha.activeEditable.obj);
                }
            } else {
                // when the range is collapsed, extend it to a word
                if (rangeObject.isCollapsed()) {
                    GENTICS.Utils.Dom.extendToWord(rangeObject);
                }

                // add the markup
                GENTICS.Utils.Dom.addMarkup(rangeObject, markup);
            }
            // select the modified range
            rangeObject.select();
            return false;
        },
        'tooltip' : i18n.t('<span class=' + button + '></span>'),
        'toggle' : true
    });
    break;