aloha-editor - アロハ エディターのカスタマイズ

Question

Aloha Editorは、太字、斜体、および下線付きのボタンのみを表示し、ツールバー全体が必要以上に大きくならないように構成できますか?

Answer 1

はい、ツールバーをカスタマイズするには、構成設定を見てください。

http://aloha-editor.org/guides/ui.html#configuration

また、GitHub のデモアプリを確認すると、この設定を追加できる構成ファイルが使用されるようになります。

https://github.com/alohaeditor/Aloha-Editor/blob/dev/src/demo/demo-app/app/js/demo-app-load.js

また、次の demo/3col のソース コードで確認できる別の方法もあります。

http://aloha-editor.org/demos/3col/

<script>
    var Aloha = window.Aloha || ( window.Aloha = {} );

    Aloha.settings = {
        locale: 'en',
        plugins: {
            format: {
                config: [  'b', 'i', 'p', 'sub', 'sup', 'del', 'title', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'removeFormat' ],
                editables : {
                    // no formatting allowed for title
                    '#title'    : [ ]
                }
            },
            link: {
                editables : {
                    // No links in the title.
                    '#title'    : [  ]
                }
            },
            list: {
                editables : {
                    // No lists in the title.
                    '#title'    : [  ]
                }
            },
            abbr: {
                editables : {
                    // No abbr in the title.
                    '#title'    : [  ]
                }
            },
            image: {
                'fixedAspectRatio': true,
                'maxWidth': 1024,
                'minWidth': 10,
                'maxHeight': 786,
                'minHeight': 10,
                'globalselector': '.global',
                'ui': {
                    'oneTab': false
                },
                editables : {
                    // No images in the title.
                    '#title'    : [  ]
                }
            }
        },
        sidebar: {
            disabled: true
        },
        contentHandler: {
            allows: {
                elements: [
                    'a', 'abbr', 'b', 'blockquote', 'br', 'caption', 'cite', 'code', 'col',
                    'colgroup', 'dd', 'del', 'dl', 'dt', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
                    'i', 'img', 'li', 'ol', 'p', 'pre', 'q', 'small', 'strike', 'strong',
                    'sub', 'sup', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'u',
                    'ul', 'span', 'hr', 'object', 'div'
                ],

                attributes: {
                    'a': ['href', 'title', 'id', 'class', 'target', 'data-gentics-aloha-repository', 'data-gentics-aloha-object-id'],
                    'div': [ 'id', 'class'],
                    'abbr': ['title'],
                    'blockquote': ['cite'],
                    'br': ['class'],
                    'col': ['span', 'width'],
                    'colgroup': ['span', 'width'],
                    'img': ['align', 'alt', 'height', 'src', 'title', 'width', 'class'],
                    'ol': ['start', 'type'],
                    'q': ['cite'],
                    'p': ['class'],
                    'table': ['summary', 'width'],
                    'td': ['abbr', 'axis', 'colspan', 'rowspan', 'width'],
                    'th': ['abbr', 'axis', 'colspan', 'rowspan', 'scope', 'width'],
                    'ul': ['type'],
                    'span': ['class','style','lang','xml:lang']
                },

                protocols: {
                    'a': {'href': ['ftp', 'http', 'https', 'mailto', '__relative__']},
                    'blockquote': {'cite': ['http', 'https', '__relative__']},
                    'img': {'src' : ['http', 'https', '__relative__']},
                    'q': {'cite': ['http', 'https', '__relative__']}
                }
            }
        }
    };
</script>

<script type="text/javascript" src="http://cdn.aloha-editor.org/latest/lib/aloha.js"
            data-aloha-plugins="common/ui,
                                common/format,
                                common/table,
                                common/list,
                                common/link,
                                common/highlighteditables,
                                common/block,
                                common/undo,
                                common/image,
                                common/contenthandler,
                                common/paste,
                                common/commands,
                                common/abbr"></script>

<!-- turn an element into editable Aloha continuous text -->
<script type="text/javascript">
Aloha.ready(function() {
    $('#title').aloha();
    $('#multicolumnElement').aloha();
});

</script>

Answer 2

この回答を読んだ後でも、同じことを行う方法を理解するのにしばらく時間がかかりました。

これが私がしたことです：

<script language="javascript">
        Aloha = window.Aloha || {};

        Aloha.settings = {
            plugins: {
                format: {
                    config:  [ 'b', 'i', 'u','del']
                }
            },
            toolbar: {
                exclude: ['formatBlock', '\n','subscript', 'superscript']
            },
            sidebar: {
                disabled: true
            }
        };

        </script>
        <script src="/src/aloha/lib/aloha.js"
        data-aloha-plugins="common/ui,common/format"></script>

そのコードから注目すべき重要な点は次のとおりです。

• aloha.js をインクルードする前に Aloha.settings を定義
• plugins.format.config は、フォーマット プラグインで使用できるボタンを設定します。
• toolbar.exclude は、不要なものを取り除きます。
• 私の設定には、取り消し線オプションであり、OP の要求されたオプションの一部ではない「del」が含まれています。

下付き文字と上付き文字は構成に含まれていないため、削除する必要はないかもしれません。