How to create editor template

Editor template is one of the 8 types of add-ons that Elanat framework supports. Editor templates are part of a html page template; each of the editor templates helps content writers use a ready-made template to present their content in an orderly and best way.

Step 1:

First, get the raw editor template file. After the get raw editor template file, unzip the zip file. After this action, you will see two directories, one is the root directory and the other is a directory named editor_template. The root directory is empty and we will deal with it in the next steps. After opening the editor_template directory, we see 4 files, one of which is an HTML file named template, an icon file, an image file, and an XML file named catalog.

You can download raw editor template in link below:
elanat.net/upload/english_presentation_download_center/editor_template.zip

Step 2:

Second, edit catalog.xml file. Open the catalog.xml file for editing. Add a name for your add-on in the value attribute in the editor_template_name tag. Add your name or your company’s name in the value attribute in the editor_template_author tag. The value attribute in the editor_template_directory_path tag specifies the path of the add-on, and it is better to just be the name of a directory. The value attribute in the editor_template_physical_name tag specifies the physical name of the add-on, which is template.html here; If you rename this section, you must also edit the template.html file to the same name. The editor_template_replace tag contains the Elanat core variants of the framework, which is a detailed topic and we will skip its explanation here. If you are creating a server-side add-on, the editor_template_cache_parameters tag is used to cache the add-on based on query string parameters; Write the cache parameters inside this tag and separate them with the comma (,). In the editor_template_static_head tag, you can call scripts and styles; In this tag, a javascript tag has been added and a method called AddHelloWorld has been added to it, and the string “Hello World!” puts it in the ElanatVariant.EditorTemplateValue variant; The values of the editor_template_static_head tag can be implemented on the add-on physical file, allowing you to access the values of the HTML inputs.The catalog.xml file contains other values as well, and only the important ones are mentioned in this explanation.

Step 3:

Third, change HTML file. Edit the HTML file named template; as you can see, this file contains only one button that calls two JavaScript functions. The first function is AddHelloWorld(), which we already explained in step 2. After this function el_InsertEditorTemplateValueToWysiwyg() has been added; this function must be called. You can edit this file as you want and design it from scratch.

Step 4:

Fourth, create the zip file again. you can put your additional files that you want to add in any path of Elanat framework in the root directory. Redesign the icon and image file according to the add-on and create the zip file again in the last step. Your zip file is a editor template add-on that you can add to the Elanat framework open-source system.

The catalog.xml file format:

    <?xml version=”1.0" encoding=”UTF-8" standalone=”yes”?>

    <editor_template_catalog_root> <editor_template_name value=”” />

    <editor_template_category value=”other” />

    <editor_template_author value=”” />

    <editor_template_directory_path value=”” />

    <editor_template_physical_name value=”template.html” />

    <editor_template_replace use_language=”false” use_replace_part=”false” use_module=”false” use_plugin=”false” use_elanat=”false” use_item=”false” use_fetch=”false” />

    <editor_template_cache_parameters>/editor_template_cache_parameters>

    <editor_template_version value=”1.0.0.0" /><editor_template_release_date value=”2022/07/01"/>

    <editor_template_info></editor_template_info>

    <editor_template_license></editor_template_license>

    <editor_template_static_head><script type=”text/javascript”><![CDATA[ function AddHelloWorld() { ElanatVariant.EditorTemplateValue = “Hello World!”; } ]]> </script> </editor_template_static_head>

    <editor_template_load_tag></editor_template_load_tag>

    <editor_template_view_static_head></editor_template_view_static_head>

    <editor_template_view_load_tag></editor_template_view_load_tag>

    <editor_template_version_support><version value=”1.0.0.0" /></editor_template_version_support>

    <editor_template_author_website></editor_template_author_website>

    <editor_template_install_path value=”” />

    <editor_template_uninstall_path value=”” />

    </editor_template_catalog_root>

Tips:

You can add the el_InsertEditorTemplateValueToWysiwyg() function in the last line of your javascript function.
You can create a multipurpose editor template containing a large number of sets of values.
When the editor template is added to Wysiwyg, a br tag is also added so that the editor template is separated from the next lines by one line; So you don’t need to add this tag.
After the editor template is added to Wysiwyg, ElanatVariant.EditorTemplateValue variant takes a null value.

Note:

The el_InsertEditorTemplateValueToWysiwyg() function should be called after the ElanatVariant.EditorTemplateValue variable is filled.