Ckeditor - How To Get The Template Attributes

I'm using CKEditor's template plugin to load the templates in the editor. In the templates I've defined likt this. templates: [ { title: 'Quickclick 1', image: 'templat

Solution 1:

@Lingasamy Sakthivel that is not how you define templates in CKEditor.

If you want to use templates, you need to create a file like the default one in templates plugin: https://github.com/ckeditor/ckeditor-dev/blob/major/plugins/templates/templates/default.js

NOTE: when defining my test template file, I have named the file my_template.js and have given the same name to template definition CKEDITOR.addTemplates( 'my_templates', {... for simplicity.

Now, Once you have the file ready, you can assign it to editor. To do that you need to specify path to your file (full or relative to context of your application) and definitions that should be loaded.

In the example below I'm loading the default CKEditor file as well as my custom one:

var editor = CKEDITOR.replace( 'editor1', {
        language: 'en',
        templates_files : [
            '/myApp/ckeditor/plugins/templates/templates/default.js',
            '/myApp/ckeditor/my_templates.js'
        ],
        templates : 'default,my_templates'
});

• This is for files - https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html#cfg-templates_files
• This is for definitions - https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html#cfg-templates

---

Now the hard part. You have written you want to know which template was selected but to be honest I don't know any way in which you could do that except for changing plugin code.

When template definition is loaded, templates inside it are loaded one by one and assigned an onclick handler. This is IMHO the place we you could add your custom code for getting the html_et property - https://github.com/ckeditor/ckeditor-dev/blob/major/plugins/templates/dialogs/templates.js#L53-L55.

To do that you would need to get the source version of the editor, make changes in template plugin and then building your editor (recommended approach):

• https://docs.ckeditor.com/ckeditor4/latest/guide/dev_source.html
• https://docs.ckeditor.com/ckeditor4/latest/guide/dev_build.html

Alternatively you can download CKEditor without the templates plugin (can be done using online builder where you can remove templates plugin from your build). Next you need to manually download that plugin, make your changes and add that plugin to editor by dropping plugin folder inside ckeditor/plugins folder and using the extraPlugins setting.

Solution 2:

Can you try like this?

var editor = CKEDITOR.replace('editor1', {
    templates: [
        {
            title: "Quickclick 1",
            image: "template1.png",
            description: "Quickclick 1 template",
            html_et: "<span>test1</span>",
            html:'  <span>test</span>'
        }
    ]
});

alert(editor.config.templates[0].html_et);