javascript - CKEditor，带子对象的自定义对象

Question

我正在尝试为 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 将每个部分视为单独的，这使得对象的删除（带有退格键）以一种奇怪的方式进行，只有部分被删除，需要多次按退格键才能删除整个对象。

score 4 · Accepted Answer

我是 CKEditor 核心开发人员，我想我有一个有趣的消息要告诉你：)。巧合的是，现在我们正在开发Widgets 功能，这正是您的意思。

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

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

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

score 2 · Accepted Answer

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

看起来这个错误报告是关于这个问题的：
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键，您可以在对象之前键入。似乎也可以用鼠标点击左上角，可以在对象之前添加内容。

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

您不能使用backspace删除对象，但您可以单击对象将其选中，然后将其删除。

我在 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 和 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/cwmarinsertsnippet/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 可以是您喜欢的任何内容。

javascript - CKEditor，带子对象的自定义对象

2 回答 2

Related

Reference