0

Webアプリケーションのプログラミングに使用する独自のカスタム非jQueryajaxがあります。最近、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();

そしてこれを入手してください：

Uncaught TypeError：未定義のメソッド'getData'を呼び出すことができません

ですから、エディターがどこにあるのかわからないことがわかります...すべてのエディターを調べてエディター名を取得しようとしましたが、うまくいきません。名前が見つからないようです。

私はこれを試しました：

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

アラートは空白になっているため、名前が関連付けられていないようです。

また、最善の努力にもかかわらず、大規模なインライン編集の例のように、編集可能なテキストをその上にメニューを表示させることはできないようです。

あなたがもたらすことができるどんな援助にも感謝します。

ジェイソンシルバー

アップデート：

ここでは知識不足を誇示していますが、これまで「contenteditable ='true'」に出くわしたことがなかったので、インラインで入力できたので、なんとかしてエディターがインスタンス化されたと思いました...でも今はmエディターが私の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

私は正しい方向に向かっていますか？エディターをdivに適用するようにプログラムでCKEditorに指示する別の方法はありますか？

更新3：

@Reinmarのおかげで、何か新しいことを試すことができました。これが解決策であるかどうかをテストするための最も明白な方法は、それぞれCKEDITOR.inlineAll（）とinline（'editable'）を呼び出すコンテンツ編集可能divの上にボタンを配置することでした。

<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で3つのボタンすべてに同じタイプのエラーが返されました。

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

インラインエディタを初期化する場合、2つの方法があります。

  1. ページがロードされたときに編集可能な（contenteditable属性を持つ）要素が存在する場合、CKEditorはそのインスタンスを自動的に初期化します。その名前は、その要素のIDから取得されるか、になりますeditor<number>。このサンプルでは、​​自動的に初期化されたエディターを見つけることができます。

  2. この要素が動的に作成される場合は、エディターを自分で初期化する必要があります。たとえば、ドキュメントに追加<div id="editor" contenteditable="true">X</div>した後、次のように呼び出す必要があります。

    CKEDITOR.inline( 'editor' )

    また

    CKEDITOR.inlineAll()

    docsとdocsを参照してください。このサンプルでは、​​この方法で初期化されたエディターを見つけることができます。

このappendTo方法にはさまざまな用途があります。指定された要素内でテーマ（インラインではない）エディターを初期化できます。このメソッドは、他のすべてのメソッド（、、）が置換/使用している要素からデータを取得するときに、エディターのデータ（3番目の引数として）も受け入れCKEDITOR.inlineます。CKEDITOR.replaceCKEDITOR.inlineAll

アップデート

CKEditorと一緒に使用するライブラリの記述が不十分で、前述のエラーが発生することを確認しました。とCKEditorを削除するjson2007.jsと正常に動作します。rsh.js

于 2013-02-14T16:30:05.523 に答える
0

OK、それで私は問題を突き止めました。

私が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（）'はとにかく既存の関数だったので、これは実際にはRealSimpleHistoryで使用していたよりも洗練されたソリューションです。

json2007.jsスクリプトを取り除いた後、他のすべては正常に機能し、CKEditorは美しいです。

助けてくれてありがとう、@Reinmar...あなたの忍耐と努力に感謝します。

于 2013-02-20T13:52:33.500 に答える