- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
关于如何扩展 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/
我在互联网上搜索了很多小时,但没有找到满意的结果,所以 -VSTO Addin 和 COM Addin(我们作为类库项目制作并使用 Excel 对象)之间有什么区别?VSTO 项目是否有任何限制,例如
我在互联网上搜索了很多小时,但没有找到满意的结果,所以 -VSTO Addin 和 COM Addin(我们作为类库项目制作并使用 Excel 对象)之间有什么区别?VSTO 项目是否有任何限制,例如
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的,
我正在寻找有关如何构建可扩展 WCF 服务器(具有动态加载的服务)的建议,最好使用 System.Addins 或 MEF。 服务器应托管实现最小“插件”API(StartService/StopSe
有没有一种方法可以使用加载浏览器扩展/插件/插件的 headless 浏览器(即 PhantomJS、Selenium)来运行自动测试? 更具体地说,我想模拟广告拦截器(如 Ghostery、ad-b
我是 gradle 的新手,我使用 artifactory 作为我的 repo 服务器。我在网上查看了如何将我的项目发布到我的 repo 服务器,发现我可以使用 maven-publish 或使用 a
我想禁用某些状态的点击/事件,并仅使少数状态可点击。我通读了http://newsignature.github.io/us-map/处的文档,并且找不到与此问题相关的任何内容。 最佳答案 http:
据我了解,在Intellij中使用idea插件打开Maven构建的项目并不是最好的方法,即调用: mvn idea:idea 但是直接打开pom文件(Intellij有默认的Maven插件);同样的事
使用Artifactory plugin对于 Jenkins pipeline 来说是一种幸福,只要遵循文档就可以了。但后来我介绍了Maven Flatten plugin解析父模块和子模块 mvn
我已经安装了Elasticsearch版本1.7.1。一切正常。我也安装了 JDBC 驱动程序。检查下面我的插件文件夹 目录E:\Xampp\htdocs\my-elastic\elasticsear
在我使用 webpack common chunks 插件创建包含第三方库(如 angular、react、lodash 等)的 vendor 包之前,但后来我知道了 webpack dll
我们正在尝试使用(Jenkins、sonar、eclipse ...)安装 CI 平台。 为了让每个开发人员都可以在提交之前对他的代码进行分析,我想知道两种选择: 使用 Sonar 插件运行本地分析。
我知道这是一个比较特殊的问题。尽管如此,也许有些人知道这一点: 我想在 Eclipse 中使用 Maven 编译 Hector=> 分支:0.7.0 和标签:hector-0.7.0-29(https
我卡住了。我一直在尝试寻找或自己创建一个简单的准系统示例,说明如何为 VS 2010 Express 创建 Outlook 插件。我知道这在 VS 2010 Pro 中更简单,但是,在快速版本中真的不
我有以下排除过滤器来忽略所有 R 文件类: findbugs-exclude-filter.xml 当我将它用于 FindBugs-IDEA 插件时,它可以
我刚开始玩 CakePHP,我发现了 Wildflower CMS .我喜欢这个想法,并打算开始修补它。不过,我有一个问题。 在自述文件中,我发现了以下内容:“Wildflower 不是也不会是 Ca
虽然现在大部分情况都是使用n-api来编写插件,但是底层毕竟是v8(和libuv),使用v8编写简单的插件,同时熟悉v8的使用。 本文介绍在写c++插件时,简单又常用的写法,其实本质上,写插件
本篇是 Python 系列教程第 3 篇,更多内容敬请访问我的 Python 合集 Visual Studio Code的安装非常简单,就不放这里增加文章篇幅了。 相比PyCharm,V
Maven – 插件 什么是 Maven 插件? Maven 实际上是一个依赖插件执行的框架,每个任务实际上是由插件完成。Maven 插件通常被用来: 创建 jar 文件 创建 war
我正在编写一个插件来添加带有标签 [deposit_page] 的页面;该标记应替换为一些 PHP 代码。 这就是我所拥有的,但它不起作用。有什么我遗漏或做错了什么吗? function deposi
我是一名优秀的程序员,十分优秀!