ckeditorの呼び出し方が解りません

Question

ページ内に”ckeditor.ｊｓ”を使用してtextareaタグ内をclassで「ckeditor」指定してリッチテキスト化しています。
↓

<textarea type="text" class="ckeditor"（省略） 同じページ内の画面下に＋（プラス）ボタンがあり、このボタンを押下すると、既存のリッチテキストの下に空のリッチテキストを新規で表示したいのですが、同じコーディングをしているにも関わらず、普通のtextareaとなってしまいます。 ＋（プラス）ボタンをおした場合でも、「ckeditor」が適応されたtextareaにするにはどのようにすればいいでしょうか？ どなたかアドバイスをお願い致します。 呼び出し元PHP： <button type="button" class="btn btn-round btn-lg btn-primary" id="getDirectInputForm"><i class="fa fa-plus"></i></button> 呼び出し先javascript側： $('#getDirectInputForm').on('click', function() { var addedItems =`echo '<textarea type="text" class="" rows="8" name="' . $detailValue['name'] (省略)`; 　　$('#addedItems').append(addedItems); 　　}); ckeditor.jsの取得先： サーバーから取得しています。 <script src="../vendors/ckeditor/ckeditor.js"></script>です。

バージョンも追記：
Copyright (c) 2003-2018と書いてありました。
バージョンは解りませんでした。

Comments

[m.ts10806]

提示の情報だけでは他者が再現できません。
なるべく全体のコード（ミニマムコードで結構ですが）、他者がコピペで再現できるコードをご提示ください。ckeditor.jsの取得先、バージョンも追記してください。
また、PHPはどのように関係するのでしょうか。

[t-ju]

mts10806様

ご指摘頂き済みません。
見て頂くのに必要そうなコードやバージョンを追記しました。

[yasutomi]

より詳細なコードと画面キャプチャがなければ
この質問には誰も回答できないです。

[yasutomi]

入れ違いでコードが追加されましたが
コードブロックが使用されていないので論外です。

[m.ts10806]

うんまあ・・
マークダウンはちゃんと利用できるようになりましょう。ヘルプに書いてありますし他の質問や回答を見ればどのようになるか分かるはずです。
他者が何の添削等することなくワンクリックでコードをコピーできないと正しく再現確認することにはなりません。
またPHPコードのようなものがありますが、そのデータが何か分からないことにはこれもまた他者が再確認できませんので、データ’PHPの変数）をvar_export()したものを提示するか、PHPが直接関係ないのでしたらブラウザに表示させた後に「ページのソースを表示」から取得したHTMLを提示してください。

追記依頼はちゃんと読んでそれに応えているかは投稿前に確認してください。
>サーバーから取得しています。
それだけで他者に伝わるでしょうか。URLを提示してください。
>Copyright (c) 2003-2018と書いてありました。
コピーライトの意味はご存知でしょうか。バージョンについては通常は取得先のどこか、またはダウンロードしたものでればファイルの一式のreadmeとか.mdファイルとかに書いてあります。

Answer 1

javascriptはcssと違い、後から追加したDOMに対して一律の操作ができません。
jqueryのスクリプトはできるだけbodyの最後に書け、または$(function (){})に入れろといわれているのはそういう由来です。

スクリプトが実行された時点でのDOMの中からclassがckeditorの物を探し出し、
そのDOMをckeditorに変更する、という動作を取っているはずです。

今回であれば、初回は上記の動作をとりますが、初期化された後のDOMについては何も指示されていないのでこうなっています。

どうすれば良いか、ですが、指示がされていないので、もう一度指示を出せばいいだけのことです

Comments

[t-ju]

mikkame様

＞どうすれば良いか、ですが、指示がされていないので、もう一度指示を出せばいいだけのことです

ckeditorのサイトでもう一度指示を出す方法をみてみたのですが、わかりませんでした。
技術力不足で申し訳ありません。
ckeditorをもう一度指示（呼び出す？）する方法をもう少し詳細を教えて頂けないでしょうか？
よろしくお願い致します。

[mikkame]

ckeditorのサイトに書いてありますよ

https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR.html#method-replace

> Replaces a <textarea> or a DOM element (<div>) with a CKEditor instance. For textareas, the initial value in the editor will be the textarea value. For DOM elements, their innerHTML will be used instead. It is recommended to use <textarea> and <div> elements only.

https://jsfiddle.net/j5to4bfL/
実装例

[t-ju]

mikkame様

サンプルまで頂き有難うございます。
mikkame様のアドバイスで実現したかった事ができました。
本当に有難うございました！

[mikkame]

単純にjavascriptとdomの関係がわかっていれば、ckeditorに精通していなくても出来る事かと思いますので
場当たり的な対応ではなく、基礎の理解を深める事が重要かと思います