javascript - CKEditor 中自定义自闭合标签的问题

coder 2023-08-09 原文

我有一个插入标签的插件 <cut />在文本中。
它工作正常，结果是可以预期的，但在编辑器窗口 <cut />转换为 <cut></cut> , 包装下面的段落并妨碍进一步的编辑。

GIF - http://gyazo.com/dd7c36ba7cb7bc7cb00186cfb83e5fbc

任何想法如何解决它？

CKEDITOR.plugins.add('pagecut', {
lang: 'de,en,ru',
onLoad: function(){
    var css = ('display:block;clear:both;width:100%;border-top:#999 1px dotted;padding:0;height:1px;cursor:default;');
    var cssBefore = (
            'content:"";' +
            'background: url(' + CKEDITOR.getUrl( this.path + 'images/image.png' ) + ') no-repeat right center;' +
            'height:14px;width:25px;position:relative;display:block;top:-8px;float:right;'
        );
    CKEDITOR.addCss( 'cut{' + css + '} cut:before{' + cssBefore + '}' );
},
init: function(editor) {
    CKEDITOR.dtd['cut'] = {};
    CKEDITOR.dtd.$empty['cut'] = 1;
    CKEDITOR.dtd.$nonEditable['cut'] = 1;
    CKEDITOR.dtd.$object['cut'] = 1;
    editor.addCommand('insertPagecut', {
        exec: function(editor) {
            var element = CKEDITOR.dom.element.createFromHtml('<cut />');
            editor.insertElement(element);
        }
    });

    editor.ui.addButton('Pagecut', {
        label: editor.lang.pagecut.toolbar,
        command: 'insertPagecut',
        icon: this.path + 'images/icon.png',
        toolbar: 'links'
    });
}
});

最佳答案

嗯，我确定我在某个问题中彻底解释了这一点，但我找不到它，所以这里有另一种解释:D。

在尝试在 CKEditor 中编辑非 HTML 标签之前，必须了解两个重要事实:

CKEditor 是 HTML 编辑。

当然，自定义标签在 HTML 中开始越来越流行。您也可以说 XML 是 HTML 的某种概括(虽然不准确，因为它有其他规则)，所以如果 CKEditor 处理 HTML，为什么它不能同样处理其他标签。嗯 - 答案很简单 - 因为 HTML 标签有含义 CKEditor 知道这一点。但它不知道您的自定义标签的含义。标签的含义(什么是列表，它有项目，它们是 block 元素等)对于实现编辑算法至关重要。

很公平，你可以说。但是为什么 CKEditor 的配置(例如 CKEDITOR.dtd 对象)没有被概括，所以可以配置每个可能标签的含义？因为每一个概括都会增加复杂性，而 HTML 编辑已经足够复杂了。

那么为什么 CKEDITOR.dtd 对象存在吗？因为 CKEditor 的某些组件在某种程度上是可配置的。 DTD对CKEditor的HTML parser影响最大(主要在 data processing 期间使用)所以这是最可配置的组件。其他算法，如回车键处理、退格/删除、列表编辑(这是一项非常复杂的任务)只能进行少量配置，并且不能保证它们可以与您的自定义标签一起使用。

编辑在浏览器中进行 并且部分由浏览器处理。

这个事实很重要，因为这意味着浏览器的功能也在影响 CKEditor 的限制。浏览器必须能够解析和呈现您的标签(幸运的是，这部分在现代浏览器中运行良好 - IE8 是最后一个存在巨大问题的浏览器)并且必须能够编辑它。这意味着 - 渲染插入符号、处理选择、处理退格、回车等。因为浏览器不容易扩展，它们的 contentEditable 实现从一个版本到另一个版本，CKEditor 会覆盖越来越多的原生行为，它们是高度不一致、不兼容和错误的。还不是全部(实际上 - 它永远不会覆盖所有，因为由于某些原因这可能是灾难性的)，但数量很大。例如，所有回车键行为都是自定义的，在 Webkit 和 Blink CKEditor 上由于仍 Unresolved 错误(1 和 2)在许多情况下处理退格和删除，它实现了自己的撤消系统，拦截粘贴和删除的内容并执行自定义 HTML 插入(我记得当我们实现它时，这会关闭大量票证)等等，等等。

widgets system 是确保一致、可配置和强大的编辑体验的最大努力之一。 .它内部充满了黑客，但它暴露了一个干净且非常强大的API对开发人员和对最终用户的非常一致的行为。它允许实现“特殊的丰富内容单元，这些单元是在编辑器中被视为单个实体的元素组”。因此，小部件系统有能力封装您的部分内容并将其与浏览器隔离。

在这个简短的介绍之后，我终于可以回答你的问题了。 你需要实现你的 <cut>标记为小部件 .您已经很好地配置了 DTD(您只是忘记设置 <cut> 元素可以存在于哪些元素中，以及它更像是 block 元素还是内联元素)，因此解析器将接受它并将其作为空标签处理。现在你需要用一个小部件来包装它以隔离它，这样它就不会破坏编辑体验。这应该够了吧。

关于javascript - CKEditor 中自定义自闭合标签的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29581028/

自定闭合 CKEDITOR 39 javascript html

有关javascript - CKEditor 中自定义自闭合标签的问题的更多相关文章

ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2
我正在尝试设置一个puppet节点，但rubygems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由rubygems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby
ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2
我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer
ruby - 在院子里用@param 标签警告 - 2
我试图使用yard记录一些Ruby代码，尽管我所做的正是所描述的here或here#@param[Integer]thenumberoftrials(>=0)#@param[Float]successprobabilityineachtrialdefinitialize(n,p)#initialize...end虽然我仍然得到这个奇怪的错误@paramtaghasunknownparametername:the@paramtaghasunknownparametername:success然后生成的html看起来很奇怪。我称yard为:$yarddoc-mmarkdown我做错了什么？
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，如果没有检查，请帮助我，非常感谢,谢谢
ruby - 主要 :Object when running build from sublime 的未定义方法 `require_relative' - 2
我已经从我的命令行中获得了一切，所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时，我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗？我正在使用OSX并安装了rvm。最佳答案或者，您可以只使用“require”，它应该可以正常工作。我认为“require_relative”仅适用于ruby1.9+ 关于ruby-主要:Objectwhenrun
ruby - 在 Ruby 中有条件地定义函数 - 2
我有一些代码在几个不同的位置之一运行:作为具有调试输出的命令行工具，作为不接受任何输出的更大程序的一部分，以及在Rails环境中。有时我需要根据代码的位置对代码进行细微的更改，我意识到以下样式似乎可行:print"Testingnestedfunctionsdefined\n"CLI=trueifCLIdeftest_printprint"CommandLineVersion\n"endelsedeftest_printprint"ReleaseVersion\n"endendtest_print()这导致:TestingnestedfunctionsdefinedCommandLin
ruby - 定义方法参数的条件 - 2
我有一个只接受一个参数的方法:defmy_method(number)end如果使用number调用方法，我该如何引发错误？？通常，我如何定义方法参数的条件？比如我想在调用的时候报错:my_method(1) 最佳答案您可以添加guard在函数的开头，如果参数无效则引发异常。例如:defmy_method(number)failArgumentError,"Inputshouldbegreaterthanorequalto2"ifnumbereputse.messageend#=>Inputshouldbegreaterthano
ruby - 如何在 Grape 中定义哈希数组？ - 2
我使用Ember作为我的前端和GrapeAPI来为我的API提供服务。前端发送类似:{"service"=>{"name"=>"Name","duration"=>"30","user"=>nil,"organization"=>"org","category"=>nil,"description"=>"description","disabled"=>true,"color"=>nil,"availabilities"=>[{"day"=>"Saturday","enabled"=>false,"timeSlots"=>[{"startAt"=>"09:00AM","endAt"=>
ruby - 获取模块中定义的所有常量的值 - 2
我想获取模块中定义的所有常量的值:moduleLettersA='apple'.freezeB='boy'.freezeendconstants给了我常量的名字:Letters.constants(false)#=>[:A,:B]如何获取它们的值的数组，即["apple","boy"]？最佳答案为了做到这一点，请使用mapLetters.constants(false).map&Letters.method(:const_get)这将返回["a","b"]第二种方式:Letters.constants(false).map{|c
ruby - 这两个 Ruby 类初始化定义有什么区别？ - 2
我正在阅读一本关于Ruby的书，作者在编写类初始化定义时使用的形式与他在本书前几节中使用的形式略有不同。它看起来像这样:classTicketattr_accessor:venue,:datedefinitialize(venue,date)self.venue=venueself.date=dateendend在本书的前几节中，它的定义如下:classTicketattr_accessor:venue,:datedefinitialize(venue,date)@venue=venue@date=dateendend在第一个示例中使用setter方法与在第二个示例中使用实例变量之间是

javascript - CKEditor 中自定义自闭合标签的问题

有关javascript - CKEditor 中自定义自闭合标签的问题的更多相关文章

随机推荐