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
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!--
  ~ Copyright (C) 2007-2020 Crafter Software Corporation. All Rights Reserved.
  ~
  ~ This program is free software: you can redistribute it and/or modify
  ~ it under the terms of the GNU General Public License as published by
  ~ the Free Software Foundation, either version 3 of the License, or
  ~ (at your option) any later version.
  ~
  ~ This program is distributed in the hope that it will be useful,
  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  ~ GNU General Public License for more details.
  ~
  ~ You should have received a copy of the GNU General Public License
  ~ along with this program.  If not, see <http://www.gnu.org/licenses/>.
  -->

<code-editor-config>
  <theme>light</theme>       <!-- default theme: light | dark -->
  <snippets>
    <snippet>
      <key>freemarker-example</key>
      <label>Freemarker Example</label>
      <type>freemarker</type>       <!-- freemarker | groovy -->
      <content>
        <![CDATA[
        <#assign imageSrc = contentModel.image!"" />
        ]]>
      </content>
    </snippet>
    <snippet>
      <key>groovy-example</key>
      <label>Groovy Example</label>
      <type>groovy</type>           <!-- freemarker | groovy -->
      <content>
        <![CDATA[
        logger.info('MY MESSAGE')
        ]]>
      </content>
    </snippet>
  </snippets>
</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 siteConfigConfigurationCode Editor Configuration

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

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