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