Hello,
I'm working on a tool providing email templates to modify for user.
The user would
- choose a template
- choose a variation
- edit the template
- clic on a button and having a cleaned html code to paste in their mail
Each template has modifiable areas with attribute contenteditable="true". Of course none of these are similar : there are template with 2 editables areas, some with 7 or 8 ...
I load template into the DOm with an ajax request, but the editor doesn't seems to load (i have no error in the console)
The templates are loaded in a div #email_constructor
They could look look like :
<table width="100%" style="background-color:#00ff00"> <tr> <td><h1 name="editablemodele2-1" id="editablemodele2-1" contenteditable="true">editablemodele2-1</h1></td> <td><div name="editablemodele2-2" id="editablemodele2-2" contenteditable="true">editablemodele2-2</div></td> </tr> <tr> <td><div name="editablemodele2-3" id="editablemodele2-3">Not editable</div></td> <td><div name="editablemodele2-4" id="editablemodele2-4" contenteditable="true">editablemodele2-4</div></td> </tr> <tr> <td colspan="2"><h1 name="editablemodele2-5" id="editablemodele2-5" contenteditable="true">editablemodele2-5</h1></td> </tr> </table>
Here my CKEditor config for inline editing stuff (h1, h2 have different toolbar than other inline editor areas)
//custom setup for CKEditor inline tags (<hx> ou other) function setupCK(){ console.log("OUTSIDE"); CKEDITOR.on( 'instanceCreated', function( event ) { console.log("INSIDE"); var editor = event.editor, element = editor.element; CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;//to avoid default <p> CKEDITOR.config.autoParagraph = false; editor.on( 'configLoaded', function() { if ( element.is( 'h1', 'h2', 'h3' ) || element.getAttribute( 'id' ) == 'taglist' ) { // Remove unnecessary plugins to make the editor simpler. editor.config.removePlugins = 'find,flash,forms,iframe,image,newpage,removeformat,' + 'smiley,specialchar,templates'; // Rearrange the layout of the toolbar. editor.config.toolbarGroups = [ { name: 'styles' }, { name: 'colors' }, ]; }else{ editor.config.toolbar = [ { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Templates' ] }, { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'PasteText', '-', 'Undo', 'Redo' ] }, { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] }, '/', { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] }, { name: 'links', items: [ 'Link', 'Unlink' ] }, { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] }, '/', { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] }, { name: 'colors', items: [ 'TextColor', 'BGColor' ] } ]; editor.config.toolbarGroups = [ { name: 'document', groups: [ 'mode', 'document', 'doctools' ] }, { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] }, '/', { name: 'paragraph', groups: [ 'list', 'indent', 'align' ] }, { name: 'links' }, { name: 'insert' }, '/', { name: 'styles' }, { name: 'colors' }, ]; } }); }); }
Then the ajax call when a template/subtemlpate is chosen
$.ajax({ url: "get_subtemplate.php", global: false, type: "POST", dataType: "json", data: "id="+selectedtemplate, success: function(data, result) { $("#email_constructor").html(data[selectedsubtemplate][1]); //Should reload the configuraton for new template inline areas setupCK(); } });
But the inline areas have no CKEditor loaded
Since there are no errors thown in console, and no editor seen in dev view, the reload of CK setup seems not to be done. But i used a console.log() inside my setupCK() function, and this function is called but only OUTSIDE => It doesn't go insde :
CKEDITOR.on( 'instanceCreated', function( event ) {
What could be the problem ? In such a case (ajax call loads new template) should i destroy old instances ? How then ? And how should i add the new instances ?