0

我有自己的自定义非 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();

得到这个：

未捕获的类型错误：无法调用未定义的方法“getData”

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

我试过这个：

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

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

我还应该提到，尽管我尽了最大努力，但我似乎无法像在大规模内联编辑示例中那样让可编辑文本出现在其上方的菜单

感谢您提供的任何帮助。

杰森西尔弗

更新：

我在这里炫耀我缺乏知识，但我以前从未遇到过“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/

4

2 回答 2

2

当您要初始化内联编辑器时，有两种方法：

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

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

    CKEDITOR.inline( 'editor' )

    或者

    CKEDITOR.inlineAll()

    请参阅文档和文档。您可以在此示例中找到以这种方式初始化的编辑器。

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

更新

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

于 2013-02-14T16:30:05.523 回答
0

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

我用于跟踪 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 ...我感谢您的耐心和努力。

于 2013-02-20T13:52:33.500 回答