【问题标题】:CKEditor, custom object with childrenCKEditor,带子对象的自定义对象
【发布时间】:2013-05-06 03:32:39
【问题描述】:

我正在尝试为 CKEditor 创建一个插件,它可以添加一个带有子对象的自定义对象。

例子:

<div>
    <img src="someimage.jpg" />
    <p>
        Some text
        <span>Some subtext</span>
    </p>
    <img src="someStaticImage.jpg" />
</div>

在我的 onOk 函数中:

---snip---
this.imgElement.setAttribute('src',path + data.imageSrc);
this.staticImgElement.setAttribute('src',path + 'images/staticimg.jpg');
this.imgElement.appendTo(this.element);
this.imgElement.appendTo(this.element);
this.staticImgElement.appendTo(this.element);
---snip---

我希望这个块表现为单个元素,这意味着按退格键会删除整个块,双击它会打开编辑对话框...

知道我该怎么做吗?

我设置好了

this.element.setAttribute('contenteditable','false');

但是,如果 "it" 是 ckedit 窗口中的第一个元素,则这不允许在 "it" 之前插入内容。

编辑:

更多信息: 我正在使用 CKEditor 4.0,内联版本 我希望我的“对象”像“图像”插件一样,当您双击图像时,会打开一个对话框,与创建对象时的对话框相同(您在其中设置 src、宽度...) . 我设法使它与它相似,但因为它是一个带有子元素的 div,CKEditor 将每个部分视为单独的,这使得对象的删除(带有退格键)以一种奇怪的方式进行,只有部分被删除,需要多次按退格键才能删除整个对象。

【问题讨论】:

  • 如果你让插件在插入块之前插入一个空的div,也许你可以将光标放在它之前插入内容,即使它在顶部?
  • 好主意,但是 CKEditor 会自动插入一个  在一个空元素内(我希望其他元素具有该功能),因此在元素上方创建了一个空间,这是我不想要的。而且,我希望能够单击元素的右侧以使插入符号出现,就像图像一样。
  • 你能提供更多细节吗?您使用的是哪个版本的 CkEditor?如果 4,您使用的是标准方法还是内联方法?如果您包含更完整的代码示例,会更容易提供帮助:完整的 &lt;body&gt; 包含特定于问题的所有内容。 &lt;head&gt; 中使用的任何脚本。插件代码。看起来您是在插件之外添加对象,那么插件有什么作用?我创建了一个插件,可以将块插入编辑器(CkEditor 3.x),因此可以将其作为插件的一部分。
  • 您说“双击它会打开编辑对话框”,而“按退格键会删除整个块”。如果您已经在编辑器中,双击如何打开编辑对话框?您是否将其视为由插件控制的对象类型,就像由 CkEditor 图像插件控制的图像元素一样?
  • @codewaggle 你能分享那个插件,这样我就可以检查我的问题的答案是否在那里?另外,我编辑了帖子,添加了其他信息,希望它能更好地解释我的问题。

标签: javascript ckeditor


【解决方案1】:

您表示您已经创建了处理对象的插件,但是您要解决的问题是当对象是第一项时,无法在对象之前插入内容。

看起来这个错误报告是关于这个问题的:
Can't move cursor behind non-editable element (or placeholder) in CKEditor

我使用我的插件将这段代码插入到编辑器中:

  <div contenteditable="false">
      <img src="someimage.jpg" />
      <p>
          Some text
          <span>Some subtext</span>
      </p>
      <img src="someStaticImage.jpg" />
  </div>

如果需要,您还可以添加 display: inline-block; 样式(请参阅下面的讨论):

根据我的测试,您似乎无法使用后退箭头将内容放在对象之前,但是如果您将箭头返回到该行内容并按 home 键,您可以键入在对象之前。好像也可以用鼠标点击左上角,可以在对象前添加内容。

这两种方法都将对象推到下一行,因为它是&lt;div&gt;,如果您希望对象留在第一行,可以将 div 的样式更改为display: inline-block;。我尝试将对象 &lt;div&gt; 改为 &lt;span&gt;,但随后可以编辑对象的某些部分。

你不能使用退格删除对象,但是你可以点击对象选择它然后删除它。

我在 Win 7 上使用 Firefox 20 和 IE 9 检查了上面讨论的信息。Google Chrome 有很多问题:
当使用插件插入 HTML 块时,contenteditable="false" 属性被剥离。

所以我试着看看如果我只是在源代码模式下将该代码块粘贴到 CkEditor 中它是如何工作的。 contenteditable="false" 属性没有被删除,但整个内容区域变得不可编辑。

我的测试使用的是 CkEditor 3.6.1,所以这在 CkEditor 4.X 中可能不是问题。

这个错误报告似乎是关于我在使用 Chrome 时无法在内容区域执行任何操作时遇到的问题,报告指出版本 3.X:
ContentEditable, Image and Chrome

其他信息
这是一个来自 CKSource 的插件,可能会有所帮助:
Magic Line

说明:
使用此插件,您可以在通常无法到达的空间中创建新段落。例如,在文档开头的表格上方。


这是我将内容插入编辑器的插件,它不能解决您遇到的问题,但您可以使用它为插件添加功能。如果没有创建插件的人发现这个并想尝试一下,我会写完整的说明。

这是ckeditor/plugins/cwmarinsertsnippet/plugin.js 文件中的代码:

/**
 * Plugin to insert the contents of an element into the editor content area.
 */

// Register the plugin with the editor. cwmarinsertsnippet
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.plugins.html
CKEDITOR.plugins.add( 'cwmarinsertsnippet',
{
    // The plugin initialization logic goes inside this method.
    // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.pluginDefinition.html#init
    init: function( editor )
    {
        // Define an editor command that grabs the content of an element and inserts it into the content area.
        // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#addCommand
        editor.addCommand( 'cwMarInsertSnippet',
    {
      // Define a function that will be fired when the command is executed.
      // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.commandDefinition.html#exec
      exec : function( editor )
      {
        // Create an element based on a native DOM element.
        var codesnippet = new CKEDITOR.dom.element( document.getElementById( 'resmar' ) );
        //alert( codesnippet.getHtml() );

        // Insert the element content into the document.
        // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#insertHtml
        editor.insertHtml( codesnippet.getHtml() );
      }
    });

        // Create a toolbar button that executes the plugin command.
        // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.html#addButton
        editor.ui.addButton( 'CwMarInsertSnippet',
        {
            // Toolbar button tooltip.
            label: 'Insert Search Box',
            // Reference to the plugin command name.
            command: 'cwMarInsertSnippet',
            // Button's icon file path.
            icon: this.path + 'images/buttonicon.gif'
        });
    }
});

需要添加到配置文件中:

config.extraPlugins = 'cwmarinsertsnippet';

为了使按钮可见,按钮名称“CwMarInsertSnippet”需要添加到配置工具栏条目:

CKEDITOR.config.toolbar_XXXX
  [
Snip...
    { name: 'tools',        items : [ 'About','CwMarInsertSnippet' ] },
... End Snip
  ];

插件的按钮应该是 13px X 13px(对于 CkEditor 3.X,不确定版本 4.X)。它被放置在这里:
ckeditor/plugins/cwmarinsertsn-p/images

名称应与插件代码末尾的editor.ui.addButton 函数中使用的名称匹配(此路径实际上可以是您想要的任何位置)。


下面是添加到使用 CkEditor 的页面的代码示例:

<div id ="resmar">
  <div contenteditable="false">
      <img src="someimage.jpg" />
      <p>
          Some text
          <span>Some subtext</span>
      </p>
      <img src="someStaticImage.jpg" />
  </div>
</div>

如果需要,您还可以添加 display: inline-block; 样式:

  <div style="display:inline-block" contenteditable="false">

如果容器元素不应该出现在页面上,可以通过样式隐藏它。

基本上,只要把你要插入的内容放在带有目标ID的元素里面

<div id ="resmar">
  Content to be inserted.
</div>

当然,插件名称和元素 ID 可以是任何你喜欢的。

【讨论】:

    【解决方案2】:

    我是 CKEditor 核心开发人员,我想我有一个有趣的消息要告诉你:)。巧合的是,现在我们正在处理Widgets feature,这正是您的意思。

    通过设置contenteditable=false 使页面的某些片段不可编辑,使其无法使用。选择、复制和粘贴、右键单击、使用箭头键——所有这些至少部分被破坏了。如果您尝试添加嵌套的可编辑元素(在不可编辑中可编辑),情况会更糟,因为例如可以从里面删除。

    这就是为什么我们决定实现一个很好的 API 来创建小部件并在后台修复所有这些错误。也许一开始并不是所有的错误和所有的浏览器,因为它们的数量很大(真的......我的意思是huuuuge :P),当然浏览器之间根本没有标准行为。但这将是一个好的开始。将在即将发布的 CKEditor 4.2 中发布的第一个小部件版本应该可以使用 - 这是我们的目标。然后我们将专注于稳定实现。

    PS。 CKEditor Roadmap 说 CKE 4.2 将在 11 天内准备好,不幸的是,这不是真的。我们推迟了,但我现在不想估计多少。

    【讨论】:

    • 好消息!我想我会用一个临时的乱七八糟的 javascript 让它以某种方式工作,直到新版本出来,希望很快:)
    • 伟大的概念!我正准备开始使用 4.x,这是转换的另一个动力。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-05-16
    • 1970-01-01
    • 1970-01-01
    • 2014-11-06
    • 2011-01-13
    相关资源
    最近更新 更多