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: "template1.png",
    description: "Quickclick 1 template",
    html_et: "<span>test1</span>",
    html:'  <span>test</span>'
}]

When the user selects a template, the html is loaded which is fine. But also, it would be great if there is a way to get the property of the current selected template from the CKEditor instance.

I need to get the html_et property value in this case. I didn't find anything in the documentation related to this. Any help would be appreciated.

回答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.

回答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);

来源：https://stackoverflow.com/questions/50331630/ckeditor-how-to-get-the-template-attributes

标签

javascript

html

ckeditor

wysiwyg