Skip to content
Advertisement

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

Advertisement

Answer

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('');
Advertisement