Code Editor Configuration

The code editor configuration file allows the user to create snippets/template code examples for use in Studio by other users in addition to the available examples out of the box.

To modify/add to the code editor configuration, click on siteConfig from the bottom of the Sidebar, then click on Configuration and select Code Editor Configuration from the dropdown list.

Configurations - Open Code Editor Configuration

Sample

CRAFTER_HOME/data/repos/sites/SITENAME/sandbox/config/studio/code-editor-config.xml
 1<code-editor-config>
 2  <theme>light</theme>       <!-- default theme: light | dark -->
 3  <snippets>
 4    <snippet>
 5      <key>freemarker-example</key>
 6      <label>Freemarker Example</label>
 7      <type>freemarker</type>       <!-- freemarker | groovy -->
 8      <content>
 9        <![CDATA[
10        <#assign imageSrc = contentModel.image!"" />
11        ]]>
12      </content>
13    </snippet>
14    <snippet>
15      <key>groovy-example</key>
16      <label>Groovy Example</label>
17      <type>groovy</type>           <!-- freemarker | groovy -->
18      <content>
19        <![CDATA[
20        logger.info('MY MESSAGE')
21        ]]>
22      </content>
23    </snippet>
24  </snippets>
25</code-editor-config>

Adding a Template Code Example

Let’s take a look at an example of adding the template code example for freemarker from above using a site created using the Website Editorial blueprint.

  1. Open the Sidebar and click on siteConfig ➜ Configuration ➜ Code Editor Configuration

  2. Uncomment the snippet freemarker-example and save your changes

     1<code-editor-config>
 2  <version>2</version><!-- <theme>light</theme> --><!-- default theme: light | dark -->
 3 <enable-basic-autocompletion>true</enable-basic-autocompletion>
 4 <enable-live-autocompletion>true</enable-live-autocompletion>
 5 <font-size>11pt</font-size>
 6 <tab-size>4</tab-size>
 7 <snippets>
 8  <snippet>
 9    <key>freemarker-example</key>
10    <label>Freemarker Example</label>
11    <type>freemarker</type>
12    <content>
13      <![CDATA[
14      <#assign imageSrc = contentModel.image!"" />
15      ]]>
16    </content>
17  </snippet>
18  </snippets>
19</code-editor-config>

  3. We should now be able to see the snippet we added above in the code editor. Open the Sidebar then navigate to /templates/web/pages. Right click on the article.ftl, then click on Edit. The code editor will then come up.

    Configurations - Code Editor Configuration Example

    At the top of the code editor, click on the dropdown for Template code examples. You should see our newly added snippet titled Freemarker Example

    Configurations - Code Editor Configuration Example Dropdown List

    Inside the code editor, start typing the name of our snippet, freemarker, the code editor will give you suggestions of matches and you should see the snippet we added. In the image below, you can see the letters fre inputted and one of the suggestions is the snippet we added in the code editor configuration file.

    Configurations - Code Editor Configuration Example autocomplete