Search code examples
javascriptjqueryckeditor

Duplicate CKEditor widget appears as disabled


I have a list of concept forms in which concepts can be added by clicking on a button. The problem is that when I click and duplicate the concept form there is a form field that works with ckeditor, and the new duplicate appears as disabled and cannot be written to.

I take the form, copy it and try to initialize it but appears the error:

TypeError: $element.ckeditor is not a function

base.html:

<script type="text/javascript" src="{% static 'ckeditor/ckeditor-init.js' %}"></script>
<script type="text/javascript" src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>
<script type="text/javascript" src="{% static 'ckeditor/ckeditor/adapters/jquery.js' %}"></script>

functions.js:

$('.add-form').click( function(e) {
  console.log('add form function');
  var $form = $('#concept-0');
  var $copy = $form.clone();
  var $element = $copy.find('#id_concept-0-description');
  $element.ckeditor();

Solution

  • From the copy I select the element that corresponds to the ckeditor widget and I re-initialize it with the desired configuration, finally the copied content is deleted

    functions.js:

    var $element = $copy.find('#id_concept-0-description');
    $element.ckeditor({
      "skin": "moono-lisa",
      "toolbar_Basic": [["Source", "-", "Bold", "Italic"]],
      "toolbar_Full": [
        ["Styles", "Format", "Bold", "Italic", "Underline", "Strike", "SpellChecker", "Undo", "Redo"],
        ["Link", "Unlink", "Anchor"],
        ["Image", "Flash", "Table", "HorizontalRule"],
        ["TextColor", "BGColor"],
        ["Smiley", "SpecialChar"],
        ["Source"]
      ],
      "toolbar": "Custom",
      "height": "200",
      "width": "100%",
      "filebrowserWindowWidth": 940,
      "filebrowserWindowHeight": 725,
      "extraPlugins": "autogrow,resize",
      "resize_enabled": true,
      "toolbar_Custom": [
        {
          "name": "clipboard",
          "items": ["Cut", "Copy", "Paste", "-", "Undo", "Redo"]
        },
        {
          "name": "basicstyles",
          "items": ["Bold", "Italic", "Underline", "Strike", "-", "RemoveFormat"]
        },
        {
          "name": "links",
          "items": ["Link", "Unlink"]
        }
      ],
      "language": "es"
    });
    
    $element.editor.setData('');