关于如何扩展 Aloha 编辑器,是否有任何真正的帮助?
我想做的是扩展他们的 float 菜单——我想添加一个带有自定义字段的下拉列表。
例如,如果用户选择一个自定义字段,则会在 html 中添加一个标签,例如:<special_field>
出现在可编辑的内容中。
更新:到目前为止我的插件初始化部分的代码......
EXAMPLE.Product.init = function() {
var that = this;
// floating menu "Insert template field"-button
var insertButton = new GENTICS.Aloha.ui.Button({
label: 'template field',
'size': 'small',
'onclick': function() {
that.insertfield();
},
'tooltip': this.i18n('button.insertfield'),
'toggle': false
});
GENTICS.Aloha.FloatingMenu.addButton(
'GENTICS.Aloha.continuoustext',
insertButton,
GENTICS.Aloha.i18n(GENTICS.Aloha, 'floatingmenu.tab.insert'),
2
);
// product scope & product attribute field
GENTICS.Aloha.FloatingMenu.createScope(this.getUID('product'), 'GENTICS.Aloha.global');
this.productField = new GENTICS.Aloha.ui.AttributeField();
//style for the drop down that appears when user searches for a fieldname
this.productField.setTemplate('<span><b>{name}</b>' +
'<br class="clear" /><i>{type}</i></span>');
// set the type of field that are allowed to be visible of field search
this.productField.setObjectTypeFilter(['specialfield','systemfield']);
this.productField.setDisplayField('name');
GENTICS.Aloha.FloatingMenu.addButton(
this.getUID('product'),
this.productField,
this.i18n('floatingmenu.tab.specialfield'),
1
);
// handle event as soon as a product block is clicked
GENTICS.Aloha.EventRegistry.subscribe(GENTICS.Aloha, 'selectionChanged', function(event, rangeObject) {
var foundMarkup = that.findProduct(rangeObject);
jQuery('.product-selected').removeClass('product-selected');
if (foundMarkup.length != 0) {
GENTICS.Aloha.FloatingMenu.setScope(that.getUID('product'));
that.productField.setTargetObject(foundMarkup, 'data-field-name');
foundMarkup.addClass('product-selected');
}
// re-layout the Floating Menu
GENTICS.Aloha.FloatingMenu.doLayout();
});
GENTICS.Aloha.EventRegistry.subscribe(
GENTICS.Aloha,
"editableDeactivated",
function(jEvent, aEvent) {
jQuery('.product-selected').removeClass('product-selected');
}
);
这只会向编辑器添加一个字段,然后我必须单击该字段本身以将其更改为正确的字段类型。
Update2:我最新的代码是:(下面有截图)
/**
* insert a template field at the cursor position
*/
function SetupButton(button) {
var scope = 'GENTICS.Aloha.continuoustext';
var definefield = '<label class="ui-specialfield" data-field-name="{0}" data-field-type="{1}" contentEditable="false">[{2}]</label>';
// floating menu "Insert template field"-button
var insertButton = new GENTICS.Aloha.ui.Button({
label: button.Name.substring(0, 11), //truncate fields to enable easy viewing for now
size: 'small',
onclick: function() {
console.debug(" field: " + button);
var range = GENTICS.Aloha.Selection.getRangeObject();
definefield = definefield.replace("{0}", button.Name);
definefield = definefield.replace("{1}", button.Type);
definefield = definefield.replace("{2}", button.Name);
var newTemplate = jQuery(definefield);
GENTICS.Utils.Dom.insertIntoDOM(newTemplate, range, jQuery(GENTICS.Aloha.activeEditable.obj));
range.startContainer = range.endContainer = newTemplate.contents().get(0);
range.select();
},
tooltip: button.Name,
toggle: false
});
switch (button.Type) {
case "sfield":
GENTICS.Aloha.FloatingMenu.addButton(scope, insertButton, button.Type, 1);
break;
case "pfield":
GENTICS.Aloha.FloatingMenu.addButton(scope, insertButton, button.Type, 1);
break;
case "afield":
GENTICS.Aloha.FloatingMenu.addButton(scope, insertButton, button.Type, 1);
break;
case "cfield":
GENTICS.Aloha.FloatingMenu.addButton(scope, insertButton, button.Type, 1);
break;
default:
break;
}
}
我会尽快查看您的代码回复并更新代码... 如您所见,按钮溢出... 您可能会注意到的另一件事是,如果有很多选项卡,则无法清楚地看到引脚...
最佳答案
他,
如果您想添加一个包含自定义内容的下拉列表,您可能想尝试使用 MultisplitButton(这是一种用于应用 h1、h2、h3 等的输入元素)。 Product 插件 ( http://aloha-editor.org/guides/writing_plugins.html ) 介绍了 MultisplitButton 以及将内容插入可编辑内容,该插件还包含一个演示。
所有指南目前位于 http://aloha-editor.org/guides/ .
关于javascript - 扩展 Aloha Editor 的格式插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5222610/