动态添加 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

我觉得你可以这样做。

$(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);
}

Answer 2

也许这两个代码笔会有所帮助：

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 );
}

动态添加 CKEditor 文本区域

Adding CKEditor textareas dynamically

javascript

jquery

ckeditor