是否可以配置Aloha Editor以便它只显示粗体,斜体和下划线按钮,这样整个工具栏就不会超过它需要的大小?
答案 0 :(得分:6)
是的,要自定义工具栏,请查看配置设置:
http://aloha-editor.org/guides/ui.html#configuration
如果你在GitHub上检查demo-app,就会有一个配置文件开始使用,你可以添加这个设置。
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>
答案 1 :(得分: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>
该代码需要注意的关键点:
我可能不需要删除下标和上标,因为它们不在配置中我并不担心,因为这对我有用,我不在乎我是否有一些不需要的配置选项。