4

最大10個のボタンに新しい「章」クリックを追加できる動的フォームを作成しようとしています。これは「簡単」ですが、テキストフィールドにCKEditorを実装したいので、機能させることができません。チャプターをスムーズに追加できました。編集できるのは最後のインスタンスのみです。また、最後のチャプターを編集して「新しいチャプターを追加」をクリックすると、最後のチャプターが削除されます。私はこのスレッドに基づいて試みました。

これまでに入手したJavascriptコード：

num_chapter = 1;
var editor = new Array();

function createEditor()
  {
  if (num_chapter <= 10)
    {
    var num=num_chapter+1;
    document.getElementById('editor').innerHTML += "<br><br><h3 style='display:inline'>Chapter " + num + ": </h3><input style='display:inline' type='text' name='titlechapter_" + num + "' placeholder='Title for chapter " + num + "'><br><br>";    

    // Create a new editor inside the <div id="editor">, setting its value to html
    var config = {};
    editor[num_chapter] = CKEDITOR.appendTo( 'editor' , config, '' );
    }
  else
    {
    document.getElementById('chapters').innerHTML += "<br />Maximum is 10 chapters.";
    }
  num_chapter += 1;
  }

HTMLコード：

<h3 style='display:inline'>Chapter 1: </h3> <input style='display:inline' type="text" name="titlechapter_1" placeholder="Title chapter 1"><br><br>
<textarea class="ckeditor" onChange="editing('Chapter 1');" name="chapter_1"></textarea>
  <div id="editor">
  </div><br>
  <input type="button" onclick="createEditor(); editing('Chapter 1');" value=" Add chapter ">

ご覧のとおり、editorsオブジェクトを配列に入れようとしましたが、うまくいきませんでした。私はJavascriptをあまり知らないので（ほとんど何も言わないでください）、どんな助けでもありがたいです！

4

3 に答える 3

4

合計3〜4時間でようやく解決しました。思ったより簡単でしたが、それほどエレガントではありませんでした。これは、phpとjavascriptを使用して「少し」エレガントにすることができますが、テキストフィールドが少ない場合は、単純な古いhtmlとJavascriptでもうまくいきます。

まず、HTML / PHP：

<h3 style='display:inline'>Chapter 1: </h3> 
  <input style='display:inline' type="text" name="titlechapter_1" placeholder="Title chapter 1"><br><br>
  <textarea class="ckeditor" onChange="editing('Chapter 1');" name="chapter_1"></textarea>
  <?php for ($i=2; $i<=10; $i++)
    echo "<div id='div_editor_".$i."' style='display:none;'><textarea id='editor_".$i."' name='editor".$i."'></textarea></div>"; ?>
  <br><br>
  <input type="button" onclick="createEditor();" value=" Add chapter ">
<br><br>

すべてのdivが作成されることを認識してください。ただし、それらには何もないため、表示されません。次に、Javascript：

num_chapter = 2;
var editor = new Array();

function createEditor()
  {
  if (num_chapter <= 10)
    {
    toggle_visibility('div_editor_' + num_chapter );

    document.getElementById('div_editor_' + num_chapter).insertAdjacentHTML( "afterbegin", "<br><br><h3 style='display:inline'>Chapter " + num_chapter + ": </h3><input style='display:inline' type='text' name='titlechapter_" + num_chapter + "' placeholder='Title for chapter " + num_chapter + "'><br><br>");

    // Create a new editor inside the <div id="editor">, setting its value to html
    CKEDITOR.replace( 'editor_' + num_chapter );

    num_chapter += 1;
    }
  else
    {
    alert("Sorry, maximum is 10 chapters.");
    }
  }

このコードは、CKeditorで適切に機能する10のチャプターを生成します。11番目を作成しようとすると、ポップアップに警告が表示されます。for ($i=1; $i<10; $i++)この行、これnum_chapter < 10、およびこれnum_chapter == 10がすべて同じ値（私の場合は10）であることが重要です。

于 2012-10-08T12:52:09.210 に答える
1

いくつかの試行錯誤の末、私はついにこの問題の解決策を見つけました。

これは、「ckeditorインスタンスを動的に作成する方法」を探して、私が行ったようにここに到達する可能性のある検索に答えるためです。

秘訣は、ckeditor.jsライブラリに加えて、CKEDITORに含まれているアダプタライブラリをhtmlスクリプトに含めることです。

ckeditor/adapters/jquery.js

そして、JavaScriptでこれらの要素を初期化します

 var elem = $(this).find('.your_selector')
 elem.ckeditor()

（.your_selectorがckeditorインスタンスに変換されるテキストエリアのクラスであることを確認してください）

これがまだこのスレッドを見つけているかもしれない人々に役立つことを願っています。

于 2016-10-03T01:46:02.263 に答える
0

CKEditor 4を要素に動的に追加して、CKEditorの複数のインスタンスを作成します

Javascript

function createNewEditor(targetElement) {
  var element = document.createElement("textarea");
  $(element)
    .addClass(".ckeditor")
    .appendTo(targetElement);
  return CKEDITOR.replace(element);
}

$(document).ready(function() {
  $(".ckeditor").each(function(_, ckeditor) {
    CKEDITOR.replace(ckeditor);
  });

  $(".chapter-video").each(function(_, chapterVideo) {
    var chapterVideoInput = $(chapterVideo).find(".file-input");
    var chapterFileUploadName = $(chapterVideo).find(".upload-file-name");
    $(chapterVideoInput).on("change", function(e) {
      var filesLength = e.target.files.length;
      if (filesLength) {
        $(chapterFileUploadName)
          .find("span")
          .text(e.target.files[0].name);
      }
    });
  });
  $(".add-chapter-para").each(function(_, addParaBtn) {
    var addTo = $(addParaBtn).data("add-to");
    $(addParaBtn).on("click", function() {
      createNewEditor(addTo);
    });
  });
});

HTML

<div class="container">
  <form action="#">
    <div class="" id="main-container">
      <div class="editor">
        <textarea class="ckeditor" name="chapterContent[]"></textarea>
      </div>
    </div>
    <div class="my-2">
      <button class="btn btn-primary">Submit</button>
    </div>
  </form>
</div>

<hr />
<button
  class="btn btn-danger add-chapter-para"
  data-add-to="#main-container"
  type="button"
>
  Add Paragraph
</button>

Button Elementにはdata-attribute、ckeditorを追加する要素があります。

ワーキングCodepenリンク

于 2020-01-27T09:34:41.633 に答える