Добавление текстовых областей CKEditor динамически

Question

Я создаю приложение, в которое пользователи могут загружать файлы и добавлять описание и заголовок файла для каждого файла.

Я использую jQuery для динамического добавления дополнительных входных данных, я хотел добавить базовую разметку, такую ​​какполужирный текст, курсив и т. д. к описанию и решено использовать CKEditor.

Первая текстовая область работает правильно и запускается, как только пользователь открывает страницу.

Однако те, которыеЯ пытаюсь добавить динамически, не инициируется как текстовое поле CKEditor.

Я пробовал этот сценарий, но он не работает.Любая помощь приветствуется.

<script type="text/javascript">
$(document).ready(function() {
    var CKeditor = $(this).find('.dynamic-ckeditor-textarea')
    CKeditor.ckeditor()
});
</script>

Это форма, которую я использую.

<div class="row bg-custom">
  <div class="col-12">
    <form class="add-post-form form-signin widthfix" enctype="multipart/form-data" action="upload-handler.php?id=<?php echo $lastId; ?>" method="post">
      <ul id="fieldList">
        <li>
          <input class="form-control topborder" type='file' name='postFile[]'>
        </li>
        <li>
          <input class="form-control fixborder" type='text' name='postName[]' placeholder='File title / name'>
        </li>
        <li>
          <textarea class='form-control fixborder' id="image-desc-editor" name='postDesc[]' placeholder='File description'></textarea>
        </li>
      </ul>
      <button type="button" class="form-control" id="addMore" name="button">Another file</button>
      <br>
      <input type="submit" name=""  class="form-control" value="Upload files">
    </form>
  </div>
</div>

Это jQuery, который я использую для добавления дополнительных входных данных:

$(function() {
  $("#addMore").click(function(e) {
    e.preventDefault();
    $("#fieldList").append("<li>&nbsp;</li>");
    $("#fieldList").append("<li><input type='file' class='form-control topborder' name='postFile[]'></li>");
    $("#fieldList").append("<li><input type='text' class='form-control fixborder' name='postName[]' placeholder='File title / name'></li>");
    $("#fieldList").append("<li><textarea id='image-desc-editor' class='form-control fixborder dynamic-ckeditor-textarea' name='postDesc[]' placeholder='File description'></textarea></li>");
  });
});

Answer 1

Может быть, эти два кодекса помогут:

• https://codepen.io/j_swiderski/pen/WMvvMR

• https://codepen.io/j_swiderski/pen/WMvvMR

  var editor, html = '';
  
  function createEditor() {
      if ( editor )
          return;
  
      var config = {};
      editor = CKEDITOR.appendTo( 'editor', config, html );
  }
  
  function insertEditorScript(){
      var externalScript = document.createElement( 'script' );
      externalScript.setAttribute( 'src','https://cdn.ckeditor.com/4.9.2/standard/ckeditor.js' );
      document.head.appendChild( externalScript );
  
      var createCKE = window.setInterval( function() {
         if( CKEDITOR ) {
             createEditor();
             clearInterval( createCKE );
         }
       }, 100 );
  }
  

Answer 2

Я думаю, вы можете сделать это таким образом.

$(document).ready(function() {
    CKEditorChange('image-desc-editor-0');
});

var i = 1;

$(function() {
  $("#addMore").click(function(e) {
    e.preventDefault();
    $("#fieldList").append("<li>&nbsp;</li>");
    $("#fieldList").append("<li><input type='file' class='form-control topborder' name='postFile[]'></li>");
    $("#fieldList").append("<li><input type='text' class='form-control fixborder' name='postName[]' placeholder='File title / name'></li>");
    $("#fieldList").append("<li><textarea id='image-desc-editor-"+i+"' class='form-control fixborder dynamic-ckeditor-textarea' name='postDesc[]' placeholder='File description'></textarea></li>");
    CKEditorChange('image-desc-editor-' + $(this).attr('rel'));
    $(this).attr('rel', parseInt($(this).attr('rel')) + parseInt(1));
    i++;
  });
});

function CKEditorChange(name) {

  CKEDITOR.replace(name, {
    toolbar: [{
        name: 'document',
        items: ['Print']
      },
      {
        name: 'clipboard',
        items: ['Undo', 'Redo']
      },
      {
        name: 'styles',
        items: ['Format', 'Font', 'FontSize']
      },
      {
        name: 'basicstyles',
        items: ['Bold', 'Italic', 'Underline', 'Strike', 'RemoveFormat', 'CopyFormatting']
      },
      {
        name: 'colors',
        items: ['TextColor', 'BGColor']
      },
      {
        name: 'align',
        items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']
      },
      {
        name: 'links',
        items: ['Link', 'Unlink']
      },
      {
        name: 'paragraph',
        items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote']
      },
      {
        name: 'insert',
        items: ['Image', 'Table']
      },
      {
        name: 'tools',
        items: ['Maximize']
      },
      {
        name: 'editing',
        items: ['Scayt']
      }
    ],
    filebrowserUploadUrl: 'request.php?pID=Upload',
    customConfig: '',
    disallowedContent: 'img{width,height,float}',
    extraAllowedContent: 'img[width,height,align]',
    extraPlugins: 'tableresize,uploadimage,uploadfile',
    height: 800,
    contentsCss: ['https://cdn.ckeditor.com/4.8.0/full-all/contents.css'],
    bodyClass: 'document-editor',
    format_tags: 'p;h1;h2;h3;pre',
    removeDialogTabs: 'image:advanced;link:advanced',
    stylesSet: [{
        name: 'Marker',
        element: 'span',
        attributes: {
          'class': 'marker'
        }
      },
      {
        name: 'Cited Work',
        element: 'cite'
      },
      {
        name: 'Inline Quotation',
        element: 'q'
      },
      {
        name: 'Special Container',
        element: 'div',
        styles: {
          padding: '5px 10px',
          background: '#eee',
          border: '1px solid #ccc'
        }
      },
      {
        name: 'Compact table',
        element: 'table',
        attributes: {
          cellpadding: '5',
          cellspacing: '0',
          border: '1',
          bordercolor: '#ccc'
        },
        styles: {
          'border-collapse': 'collapse'
        }
      },
      {
        name: 'Borderless Table',
        element: 'table',
        styles: {
          'border-style': 'hidden',
          'background-color': '#E6E6FA'
        }
      },
      {
        name: 'Square Bulleted List',
        element: 'ul',
        styles: {
          'list-style-type': 'square'
        }
      }
    ]
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/4.8.0/full-all/ckeditor.js"></script>

<div class="row bg-custom">
  <div class="col-12">
    <form class="add-post-form form-signin widthfix" enctype="multipart/form-data" action="upload-handler.php?id=<?php echo $lastId; ?>" method="post">
      <ul id="fieldList">
        <li>
          <input class="form-control topborder" type='file' name='postFile[]'>
        </li>
        <li>
          <input class="form-control fixborder" type='text' name='postName[]' placeholder='File title / name'>
        </li>
        <li>
          <textarea class='form-control fixborder' id="image-desc-editor-0" name='postDesc[]' placeholder='File description'></textarea>
        </li>
      </ul>
      <button type="button" class="form-control" id="addMore" rel="1" name="button">Another file</button>
      <br>
      <input type="submit" name="" class="form-control" value="Upload files">
    </form>
  </div>
</div>

Обновление: Это простейшее использование.

function CKEditorChange(name) {
   CKEDITOR.replace(name);
}