Link copied!

Code Editor Examples

<vce-code-editor single-line>
  <vce-html-editor
    html="imageUrl"
    mode="null"
    editor="true"
    class="e-input e-inputgroup__item e-inputgroup__item-fluid e-inputgroup__item-first"
    placeholder="campaign.placeholders.cardImageUrl"
  >
  </vce-html-editor>
</vce-code-editor>
<vce-code-editor>

   <vce-code-editor-toolbar>
    <vce-code-editor-toolbar-item text-to-insert="Hello" label="Hello" icon="bell" />
    <vce-code-editor-toolbar-item text-to-insert="World" label="World" icon="bolt" />
    <vce-code-editor-toolbar-item text-to-insert="!" label="!" icon="exclamation" />
    <vce-code-editor-toolbar-personalization-prompt label="Prompt" />
  </vce-code-editor-toolbar>

  <vce-html-editor
    html="Content in the editor"
    mode="null"
    editor="true"
    class="e-input e-inputgroup__item e-inputgroup__item-fluid e-inputgroup__item-first"
    placeholder="Placeholder text"
    >
    <vce-html-editor-personalization-plugin>
  </vce-html-editor>
</vce-code-editor>
<vce-code-editor single-line>

   <vce-code-editor-toolbar>
    <vce-code-editor-toolbar-item text-to-insert="Hello" label="Hello" icon="bell" />
    <vce-code-editor-toolbar-item text-to-insert="World" label="World" icon="bolt" />
    <vce-code-editor-toolbar-item text-to-insert="!" label="!" icon="exclamation" />
    <vce-code-editor-toolbar-personalization-prompt label="Prompt" />
  </vce-code-editor-toolbar>

  <vce-html-editor
    html="Content in the editor"
    mode="null"
    editor="true"
    class="e-input e-inputgroup__item e-inputgroup__item-fluid e-inputgroup__item-first"
    placeholder="Placeholder text"
    >
    <vce-html-editor-personalization-plugin>
  </vce-html-editor>
</vce-code-editor>
<vce-code-editor disabled>

   <vce-code-editor-toolbar>
    <vce-code-editor-toolbar-item text-to-insert="Hello" label="Hello" icon="bell" />
    <vce-code-editor-toolbar-item text-to-insert="World" label="World" icon="bolt" />
    <vce-code-editor-toolbar-item text-to-insert="!" label="!" icon="exclamation" />
    <vce-code-editor-toolbar-personalization-prompt label="Prompt" />
  </vce-code-editor-toolbar>

  <vce-html-editor
    html="Content in the editor"
    mode="null"
    editor="true"
    class="e-input e-inputgroup__item e-inputgroup__item-fluid e-inputgroup__item-first"
    placeholder="Placeholder text"
    >
   <vce-html-editor-personalization-plugin>
  </vce-html-editor>
</vce-code-editor>
<vce-code-editor disabled single-line>

   <vce-code-editor-toolbar>
    <vce-code-editor-toolbar-item text-to-insert="Hello" label="Hello" icon="bell" />
    <vce-code-editor-toolbar-item text-to-insert="World" label="World" icon="bolt" />
    <vce-code-editor-toolbar-item text-to-insert="!" label="!" icon="exclamation" />
    <vce-code-editor-toolbar-personalization-prompt label="Prompt" />
  </vce-code-editor-toolbar>

  <vce-html-editor
    html="Content in the editor"
    mode="null"
    editor="true"
    class="e-input e-inputgroup__item e-inputgroup__item-fluid e-inputgroup__item-first"
    placeholder="Placeholder text"
    >
   <vce-html-editor-personalization-plugin>
  </vce-html-editor>
</vce-code-editor>
<vce-token
  name="tokenOne"
  data="string data for token one"
  >
</vce-token>

<vce-token
  name="tokenTwo"
  data="string data for token two"
  >
</vce-token>

<hr/>

<vce-code-editor >
  <vce-html-editor
    html="'Example Text with example token {{ contact.69 }}"
    mode="null"
    editor="true"
    class="e-input e-inputgroup__item e-inputgroup__item-fluid e-inputgroup__item-first"
    placeholder="Placeholder text"
    >
    <vce-html-editor-personalization-plugin></vce-html-editor-personalization-plugin>
  </vce-html-editor>
</vce-code-editor>
<vce-code-editor>
  <vce-code-editor-validation-status-display validation-status-display>
  <vce-code-editor-twig-validator twig-validator validation-url="http://example.com">
  <vce-html-editor
    html="Example text with example token"
    mode="null"
    editor="true"
    class="e-input e-inputgroup__item e-inputgroup__item-fluid e-inputgroup__item-first"
    placeholder="Placeholder text"
    >
    <vce-html-editor-personalization-plugin>
  </vce-html-editor>
</vce-code-editor>