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>

当我尝试使用文档中的示例对可编辑内容进行getData时，出现错误。

我这样做：

CKEDITOR.instances.editable.getData();

得到这个：

未捕获的TypeError：无法调用未定义的方法'getData'

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

我试过这个：

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

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

我还应该提一下，尽管我付出了最大的努力，但我似乎无法获得可编辑的文字，因为它在Massive Inline Editing Example

之上显示了一个菜单。

感谢您提供任何帮助。

Jason Silver

更新：

我在这里炫耀我缺乏知识，但我之前从未遇到过“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页面视图不会丢失。

这是小提琴页面：http://jsfiddle.net/jasonsilver/3CqPv/2/

Answer 1

如果要初始化内联编辑器，有两种方法：

如果加载页面时存在可编辑的元素（具有contenteditable属性），CKEditor将自动为其初始化实例。它的名称将取自该元素的id，或者它将是editor<number>。您可以在this sample上自动初始化编辑器。
如果动态创建此元素，则需要自行初始化编辑器。例如。在将<div id="editor" contenteditable="true">X</div>附加到文档后，您应该致电：

CKEDITOR.inline( 'editor' )

或

CKEDITOR.inlineAll()

请参阅docs和docs。你可以在this sample上找到以这种方式初始化的编辑器。

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

<强>更新

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

Answer 2

好的，所以我已经找到了问题。

我用来跟踪Ajax历史记录并记住后退按钮命令的库，名为Real Simple History，正在使用一个名为json2007的脚本，这个脚本是侵入性的，并将原生原型扩展到事情破坏的地步。

RSH.js有点陈旧了，无论如何我都没有使用它，所以我的最终解决方案是重写我需要的基本代码，即监听锚（哈希）的监听器更改URL，然后解析这些更改并重新提交ajax命令。

var current_hash = window.location.hash;
function check_hash() {
    if ( window.location.hash != current_hash ) {
        current_hash = window.location.hash;
        refreshAjax();
    }
}
hashCheck = setInterval( "check_hash()", 50 );

'refreshAjax（）'无论如何都是一个现有函数，所以这实际上是一个比我在Real Simple History中使用的更优雅的解决方案。

在删除json2007.js脚本之后，其他一切都正常工作，而CKEditor很漂亮。

非常感谢你的帮助，@ Reinmar ......感谢你们的耐心和努力。

内联编辑但实例不存在

2 个答案: