aloha-editor - Aloha 编辑器自定义

Question

是否可以将Aloha 编辑器配置为仅显示粗体、斜体和下划线按钮，从而使整个工具栏不超过所需大小？

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.settings 在包含 aloha.js 之前定义
• plugins.format.config 设置格式插件可用的按钮
• toolbar.exclude 摆脱了我不想要的东西。
• 我的配置包括“del”，它是删除线选项，而不是 OP 请求的选项的一部分。

我可能不需要删除下标和上标，因为它们不在配置中我并不担心，因为这对我有用，而且我不在乎我是否有一些不需要的配置选项。