草庐IT

javascript - 修改 CKEditor 链接对话框以将自定义属性添加到链接

coder 2024-05-09 原文

我在网站上使用 CKEditor，我需要能够在通过编辑器创建的一些链接上放置特殊的数据属性。用户将通过选中链接对话框中的复选框来表明他们需要链接上的特殊属性。我设法使用以下代码向链接对话框添加了一个复选框:

CKEDITOR.on('dialogDefinition', function(ev) {
    if (ev.data.name == "link") {
        var info = dialog.getContents("info");
        info.elements.push({
            type: "vbox",
            id: "urlOptions",
            children: [{
                type: "hbox",
                children: [{
                    id: "button",
                    type: "checkbox",
                    label: "Button",
                    commit: function(data) {
                        data.button = this.getValue()
                        console.log("commit", data.button, data);
                    },
                    setup: function(data) {
                        this.setValue(data.button);
                        console.log("setup", data.button, data);
                    }
                }]
            }]
        });
    }
});

现在我有两个问题。第一个是尽管我在 commit 和 setup 函数中添加了应该保存复选框状态的代码，但它不起作用。就好像 data 除了默认情况下的参数之外不能保存任何其他参数。

第二个问题是我不知道如何在我的链接上添加/删除数据属性。在我看来，我应该在对话框的 onOk 回调中这样做，但是，链接对话框已经有一个 onOk 回调，所以我不确定如何我应该继续。我当然不想直接修改 CKEditor 的任何文件。

我怎样才能完成这些事情？

最佳答案

您最好的选择是修改插件。所以需要打开源码，找到文件links.js在c:\ckeditor_3.6.5\ckeditor\_source\plugins\link\dialogs\

源代码很大 (40k)，但您可以在这里随意修改对话框。当你完成后，只需将它复制到你的插件文件夹，并压缩它:http://jscompress.com/

我已经完成了你需要我自己做的。整个未压缩的文件在这里:https://gist.github.com/3940239

你需要做什么:

首先在附加对话框“浏览”按钮之前添加这一行。约行:547:

                        {
                            id: "button",
                            type: "checkbox",
                            label: "Button",
                            setup: function (data) {
                                this.allowOnChange = false;

                                if (data.button)
                                    this.setValue(data.button);

                                this.allowOnChange = true;
                            },
                            commit: function (data) {
                                data.button = this.getValue()
                                this.allowOnChange = false;
                            }
                        },

这部分实际上是您的代码。我只是复制并粘贴了它。

然后，转到onOk函数，大约。在第 1211 行:并在 commitContent 之后添加此代码:

this.commitContent( data );

//My custom attribute
if (data.button)
    attributes["custom-attribute"] = "button";
else
    attributes["custom-attribute"] = "";

这将修改您的链接，将属性添加到元素，例如 <a href="#" custom-attribute="button">text</a>

就是这样。虽然，您可能还想加载复选框的当前状态。然后，转到函数 parseLink .约第 179 行加载属性:

...
if ( element )
{
    retval.button = element.getAttribute('custom-attribute');

    var target = element.getAttribute( 'target' );
...

关于javascript - 修改 CKEditor 链接对话框以将自定义属性添加到链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12903425/

自定javascriptcode34datackeditor

有关javascript - 修改 CKEditor 链接对话框以将自定义属性添加到链接的更多相关文章

  1. ruby-on-rails - 如果为空或不验证数值，则使属性默认为 0 - 2

    我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初，我将所有3列的:default=>0放在表格中，但我不想要这样，因为它已经填充了字段，我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val

  2. ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2

    我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗？ 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话，Rails使用#method_missing作为属性setter，因此您的模块将优先，阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost)，那么您的实例方法需要进入一个特殊的模块:classBlah

  3. ruby-on-rails - form_for 中不在模型中的自定义字段 - 2

    我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢

  4. ruby - 多个属性的 update_column 方法 - 2

    我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法，但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案 您可以使用update_columns(attr1:val1,attr2:val2

  5. ruby - Nokogiri 剥离所有属性 - 2

    我有这个html标记:我想得到这个:我如何使用Nokogiri做到这一点？ 最佳答案 require'nokogiri'doc=Nokogiri::HTML('')您可以通过xpath删除所有属性:doc.xpath('//@*').remove或者，如果您需要做一些更复杂的事情，有时使用以下方法遍历所有元素会更容易:doc.traversedo|node|node.keys.eachdo|attribute|node.deleteattributeendend 关于ruby-Nokog

  6. ruby-on-rails - Rails 模型——非持久类成员或属性？ - 2

    对于Rails模型，是否可以/建议让一个类的成员不持久保存到数据库中？我想将用户最后选择的类型存储在session变量中。由于我无法从我的模型中设置session变量，我想将值存储在一个“虚拟”类成员中，该成员只是将值传递回Controller。你能有这样的类(class)成员吗？ 最佳答案 将非持久属性添加到Rails模型就像任何其他Ruby类一样:classUser扩展解释:在Ruby中，所有实例变量都是私有(private)的，不需要在赋值前定义。attr_accessor创建一个setter和getter方法:classUs

  7. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  8. ruby-on-rails - 如何生成传递一些自定义参数的 `link_to` URL？ - 2

    我正在使用RubyonRails3.0.9，我想生成一个传递一些自定义参数的link_toURL。也就是说，有一个articles_path(www.my_web_site_name.com/articles)我想生成如下内容:link_to'Samplelinktitle',...#HereIshouldimplementthecode#=>'http://www.my_web_site_name.com/articles?param1=value1¶m2=value2&...我如何编写link_to语句“alàRubyonRailsWay”以实现该目的？如果我想通过传递一些

  9. ruby-on-rails - 如何在 Rails 3 中创建自定义脚手架生成器？ - 2

    有这些railscast。http://railscasts.com/episodes/218-making-generators-in-rails-3有了这个，你就会知道如何创建样式表和脚手架生成器。http://railscasts.com/episodes/216-generators-in-rails-3通过这个，您可以了解如何添加一些文件来修改脚手架View。我想把两者结合起来。我想创建一个生成器，它也可以创建脚手架View。有点像RyanBates漂亮的生成器或web_app_themegem(https://github.com/pilu/web-app-theme)。我

  10. ruby-on-rails - Prawn - 表格单元格内的链接 - 2

    我正在尝试用Prawn生成PDF。在我的PDF模板中，我有带单元格的表格。在其中一个单元格中，我有一个电子邮件地址:cell_email=pdf.make_cell(:content=>booking.user_email,:border_width=>0)我想让电子邮件链接到“mailto”链接。我知道我可以这样链接:pdf.formatted_text([{:text=>booking.user_email,:link=>"mailto:#{booking.user_email}"}])但是将这两行组合起来(将格式化文本作为内容)不起作用:cell_email=pdf.make_c

随机推荐