// まずHTMLに値を代入する $('#hoge').val('代入する文字列'); // それからWYSIWYG化する CKEDITOR.replace('hoge');
CKEditorが有効になった後にJavaScriptでデータを書き換えたい時はsetDataを使うと書き換えることが可能です。
→ CKEditorの内容をJavaScriptから変更する
ただ、CKEditorが有効になるのとほぼ同時にデータを書き換えようとすると失敗する場合があります。
そういう時はinstanceReadyを使う事で回避する事が出来ます。
→ CKEditorの初期値が反映されない場合があるときの対処法
今回、非同期にデータを取得した後、CKEditorの内容を書き換えようとするとこれらでは対応できません。
Promiseを使うのも手ですが、今回は非同期にデータを取得した後
CKEditorの準備がまだの場合、ウェイトを入れ処理を待たせるようにしました。
let loop = function(i){ if(CKEDITOR['instances']['htmlCkeditor'].status == "ready"){ CKEDITOR['instances']['htmlCkeditor'].setData(html); return; }; if(i >= 100) return; setTimeout(function(){ loop( i + 1) }, 10); }; loop(0);
一応、無限ループ対策として100で処理を強制終了させています。
]]>CKEDITOR.on('dialogDefinition', function(e){ if(e.data.name === 'link'){ let tabInfo = e.data.definition.getContents('info'); if(tabInfo) tabInfo.get('protocol')['default'] = 'https://'; let tabTar = e.data.definition.getContents('target'); if(tabTar) tabTar.get('linkTargetType')['default'] = '_top'; }; });]]>
The each() function is deprecated. This message will be suppressed on further calls HOGEHOGE
次のようにカスタマイズしてみた
118行目付近
} elseif (is_array($image)) { // list($key, $width) = each($image); // list($key, $height) = each($image); //***** Ys Customize 2019.01.15 *****// $width = $image[0]; $height = $image[1]; //***** END Ys Customize 2019.01.15 *****// $img = $this->getBlankImage($width, $height); } else]]>
ブラウザ標準の“貼り付け”は行えるので、
コンテキストメニューをブラウザのものを表示させてみた
今回のCKEditorは
ckeditor_4.9.2_full
を使用
ckeditor.js
// 置換前 on("contextmenu" // 置換 on("_contextmenu"
4つほど存在するので、全て置換した
]]>記事「KCFinderを導入してみる」からのカスタマイズです。
上記記事では『サーバブラウザ』からのアップロードに対応できました
今回は、D&Dも出来るようにカスタマイズしてみました
今回のバージョンは・・・
ckeditor_4.9.2_full
kcfinder-3.12
カスタマイズしたファイルはcore/class/uploader.php
// 374行目 if (strlen($message) && method_exists($this, 'errorMsg')) $this->errorMsg($message); else // $this->callBack($url, $message); //***** Ys Customize 2018.04.27 *****// $ckeditor = array( 'fileName' => $this->file['name'] ,'uploaded' => 1 ,'url' => $this->typeURL . "/" . basename($target) ); header("Content-Type: application/json"); echo json_encode($ckeditor); //***** END Ys Customize 2018.04.27 *****//]]>
記事「CKEditorをとりあえず動かしてみる」からのカスタマイズです。
CKEDITOR.config.contentsCss = [ './ckeditor.css' ];]]>
以前は次のコードで対応していましたが、
それでも反映されない時がありました
// インスタンス準備完了イベント CKEDITOR.on('instanceReady',function(e){ // 代入処理 CKEDITOR.instances.ELEMENTID.setData('<strong>ここにタグを記載</strong>'); });
CKEditorをWYSIWYG化するタイミングと
instnceReadyが読み込まれるタイミングによって
反映されないのでしょうか?
なので、htmlに代入してからWYSIWYG化するようにしました
今までtextareaで指定していたclass=”ckeditor”は、指定しない
<textarea id="hoge"></textarea>
// まずHTMLに値を代入する $('#hoge').val('代入する文字列'); // それからWYSIWYG化する CKEDITOR.replace('hoge');]]>
CKEDITOR.instances.ELEMENTID.ホゲホゲ;
などで設定するが、
ELEMENTIDの部分にhoge[0]のように括弧等を使用していると正常に動かない
この場合、次のようにすると良い
CKEDITOR['instances']['hoge[0]'].ホゲホゲ;]]>
$('#color').change(function(){ $('iframe').contents().find('body').css('background-color', $(this).val()); }); CKEDITOR.on('instanceReady',function(e){ $('iframe').contents().find('body').css('background-color', $('#color').val()); ]);]]>
CKEDITORにデフォルト文字列を配置する時に、
準備が整う前に処理をしてしまうと
デフォルトとして表示されない対処法
// インスタンス準備完了イベント CKEDITOR.on('instanceReady',function(e){ // 代入処理 CKEDITOR.instances.ELEMENTID.setData('<strong>ここにタグを記載</strong>'); });]]>