Q&A
２つのCK Editor（ビジュアルエディター）を持つ要素をボタンで入れ替えようと思ったのですが、入れ替えた際に CKEditor の入力内容が消え、入力不可能になってしまいます。
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CKEditor</title> 6 <script src="https://cdn.ckeditor.com/4.11.1/standard/ckeditor.js"></script> 7 </head> 8 <style> 9 .box { 10 width: 600px; 11 margin: 1em 0; 12 } 13 </style> 14 <body> 15 <button id="btn1">入れ替え(JS)</button> 16 17 <div id="box1" class="box"> 18 <textarea name="editor1">EDITOR 1</textarea> 19 </div> 20 <div id="box2" class="box"> 21 <textarea name="editor2">EDITOR 2</textarea> 22 </div> 23 <script> 24 CKEDITOR.replace( 'editor1' ); 25 CKEDITOR.replace( 'editor2' ); 26 27 var box1 = document.getElementById('box1'); 28 var box2 = document.getElementById('box2'); 29 30 document.getElementById('btn1').addEventListener('click', function(){ 31 box2.parentNode.insertBefore(box2, box1); 32 }); 33 </script> 34 </body> 35</html>
また、入れ替え時には次のエラーが発生しています。
ckeditor.js:88 Uncaught TypeError: Cannot read property 'compatMode' of undefined at CKEDITOR.dom.window.getViewPaneSize (ckeditor.js:88)
CKEditorのない普通のテキストエリアであれば問題なく入れ替えができています。
入れ替えの際に一瞬要素が消えるのが原因のように思えますが、CKEditorを維持したまま要素を移動させるにはどのようにすればいいのでしょうか？
よろしくお願いいたします。
回答1件
0
ベストアンサー
insertBeforeではJavaScriptで設定したイベント等を引き継がないような。
入れ替える前にCKEditorを消して（そういう関数があると思う）、入れ替えた後に再度設定すれば出来ると思います。
ただ、兄弟要素ならCSSで並べ替えればいけそうな気がします。
【フレックスアイテムの並べ替え - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
投稿2018/11/30 10:32
総合スコア69400
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/01 07:59