javascript - 内联编辑但实例不存在

Question

我有自己的自定义非 jQuery ajax，用于编写 Web 应用程序。我最近在使用 TinyMCE 时遇到了 IE9 的问题，所以我尝试切换到 CKeditor

可编辑文本被包裹在 div 中，如下所示:

<div id='content'>
  <div id='editable' contenteditable='true'>
    page of inline text filled with ajax when links throughout the site are clicked
  </div> 
</div>

当我尝试使用文档中的示例获取可编辑内容的数据时，出现错误。

我这样做:

CKEDITOR.instances.editable.getData();

得到这个:

Uncaught TypeError: Cannot call method 'getData' of undefined

所以我认为它不知道编辑器在 dom 中的位置...我尝试通过所有编辑器来获取编辑器名称，但这不起作用 - 似乎找不到名称.

我已经尝试过这个:

for(var i in CKEDITOR.instances) { 
  alert(CKEDITOR.instances[i].name);
}

该警报只是空白 - 因此显然没有与之关联的名称。

我还应该提到，尽管我尽了最大努力，但我似乎无法让可编辑文本在其上方显示菜单，就像 Massive Inline Editing Example 中那样。

感谢您提供的任何帮助。

杰森·西尔弗

更新:

我在这里炫耀我缺乏知识，但我以前从未遇到过“contenteditable='true'”，所以认为因为我能够内联输入，因此编辑器以某种方式实例化......但是现在我想知道编辑器是否适用于我的 div。

更新2:

当页面加载并且最初调用脚本时，div 不存在。可编辑的 div 使用 AJAX 发送到 DOM。 @Zee 在下面留下了一条评论，这让我想知道是否应该调用其他命令才能将编辑器应用于该 div，因此我使用以下 onclick 在页面中创建了一个按钮作为测试此方法的方法: (改编自ajax示例)

var editor,html='';config = {};editor=CKEDITOR.appendTo('editable',config, html );

这会在 Chrome 中出现以下错误:

> Uncaught TypeError: Cannot call method 'equals' of undefined 
>  + CKEDITOR.tools.extend.getEditor ckeditor.js:101
>    b ckeditor.js:252
>    CKEDITOR.appendTo ckeditor.js:257
>    onclick www.pediatricjunction.com:410

我的方向正确吗？是否有另一种方法以编程方式告诉 CKEditor 将编辑器应用于 div？

更新3:

感谢@Reinmar，我有了一些新的尝试。对我来说，测试这是否是解决方案的最明显方法是在内容可编辑 div 上方放置一个按钮，分别调用 CKEDITOR.inlineAll() 和 inline('editable'):

<input type='button' onclick=\"CKEDITOR.inlineAll();\" value='InlineAll'/>
<input type='button' onclick=\"CKEDITOR.inline('editable');\" value='Inline'/>
<input type='button' onclick=\"var editor = CKEDITOR.inline( document.getElementById( 'editable' ) );\" value='getElementById'/>

这在 Chrome 中为所有三个按钮返回了相同类型的错误，即:

Uncaught TypeError: Cannot call method 'equals' of undefined ckeditor.js:101
+  CKEDITOR.tools.extend.getEditor ckeditor.js:101
   CKEDITOR.inline ckeditor.js:249
   CKEDITOR.inlineAll ckeditor.js:250
   onclick

更新4:

经过进一步的摆弄，我找到了与 json2007.js 相关的问题，这是我使用的一个与 Real Simple History (RSH.js) 一起使用的脚本。这些脚本的目的是跟踪 Ajax 历史记录，因此当我在浏览器中前后移动时，AJAX 页面 View 不会丢失。

这是 fiddle 页面:http://jsfiddle.net/jasonsilver/3CqPv/2/

Answer 1

当你想初始化内联编辑器时，有两种方法:

1. 如果页面加载时存在可编辑元素(具有 contenteditable 属性)，CKEditor 将自动为其初始化一个实例。它的名称将从该元素的 id 中获取，或者为 editor<number> 。您可以在 this sample 上找到自动初始化的编辑器.

2. 如果该元素是动态创建的，那么您需要自行初始化编辑器。 例如。添加 <div id="editor" contenteditable="true">X</div> 后到您应该调用的文档:

   CKEDITOR.inline( 'editor' )

   或

   CKEDITOR.inlineAll()

   参见docs和 docs 。 您可以在 this sample 上找到以这种方式初始化的编辑器.

appendTo 方法有不同的用途。您可以在指定元素内初始化主题(非内联)编辑器。当所有其他方法( CKEDITOR.inline 、 CKEDITOR.replace 、 CKEDITOR.inlineAll )从它们正在替换/使用的元素中获取数据时，此方法还接受编辑器的数据(作为第三个参数)。

更新

我检查了您与 CKEditor 一起使用的库编写得很差，并导致了您提到的错误。删除json2007.js和rsh.js CKEditor 工作正常。