Support of Template Variables

[Stefan Walter]

Good day,

I am interested in using the Syncfusion rich text editor, but I can't find a particular feature.

As I want to create templates (i.e., for emails), I do have the demand to insert variables, which will be in a later stage interpolated.

Something like that: https://ambassify.github.io/tinymce-variable/ or even better like this https://www.tiny.cloud/docs/tinymce/6/mergetags/

Please let me know if this can be achieved with you rich text editor component.

[Vinitha Jeyakumar]

Hi Stefan Walter,

Your requirement to insert variables into the RichTextEditor can be achieved by using the custom toolbar. Please check the code and sample below,

Code snippet:

export class InsertSpecialCharacters extends SampleBase {

  rteObj;

  constructor(props) {

    super(props);

    this.rteSpecialCharEle = null;

  }

  selection = new NodeSelection();

  range;

  customBtn;

  saveSelection;

  // Rich Text Editor items list

  items = [

    'Bold',

    'Italic',

    'Underline',

    '|',

    'Formats',

    'Alignments',

    'OrderedList',

    'UnorderedList',

    '|',

    'CreateLink',

    'Image',

    '|',

    'SourceCode',

    {

      tooltipText: 'Insert Symbol',

      template:

        '<button class="e-tbar-btn e-btn" tabindex="-1" id="custom_tbar"  style="width:100%"><div class="e-tbar-btn-text" style="font-weight: 500;">Insert Variable</div></button>',

    },

    '|',

    'Undo',

    'Redo',

  ];

  //Rich Text Editor ToolbarSettings

  toolbarSettings = {

    items: this.items,

  };

  height = 'auto';

  onCreate() {

    this.customBtn = document.getElementById('custom_tbar');

    this.customBtn.onclick = (e) => {

      this.rteObj.contentModule.getEditPanel().focus();

      this.rteObj.executeCommand(

        'insertHTML',

        '<span id="act">Account ID</span>'

      );

    };

  }

  render() {

    return (

      <div className="control-pane">

        <div

          className="control-section e-rte-custom-tbar-section"

          id="rteCustomTool"

        >

          <div

            className="rte-control-section"

            ref={this.rteSectionRef}

            id="rteSection"

          >

            <RichTextEditorComponent

              id="specialCharRTE"

              ref={(scope) => {

                this.rteObj = scope;

              }}

              toolbarSettings={this.toolbarSettings}

              created={this.onCreate.bind(this)>

              

              <Inject

                services={[HtmlEditor, Toolbar, Link, Image, QuickToolbar]}

              />

            </RichTextEditorComponent>

          </div>

        </div>

      </div>

    );

  }

}

const root = createRoot(document.getElementById('sample'));

root.render(<InsertSpecialCharacters />);

Sample: https://stackblitz.com/edit/react-perqyh?file=index.js,index.html

Documentation: https://ej2.syncfusion.com/react/documentation/rich-text-editor/toolbar#custom-tool

Regards,

Vinitha

[Stefan Walter]

Hi Vinitha,

Thanks a lot for your feedback. This is almost what I wanted. The inserting of the variable looks excellent, but if I use the backspace, then I can delete the placed variable characters. Still, I would expect more that the whole variable will be removed with one keystroke. This means that the inserted variable is treated like a badge or a block rather than single characters.

How can that be achieved?

Here is a sample, that you can damage the variables.

[Vinitha Jeyakumar]

Hi Stefan,

Your requirement to remove the inserted variable with one keystroke, instead of deleting each character individually, can be achieved by setting the contenteditable attribute to "false" for the <span> element.. Please check the code and modified sample below,

Code snippet:

onCreate() {

    this.customBtn = document.getElementById('custom_tbar');

    this.customBtn.onclick = (e) => {

      this.rteObj.contentModule.getEditPanel().focus();

      this.rteObj.executeCommand(

        'insertHTML',

        '<span contenteditable="false" id="act">Account ID</span>'

      );

    };

  }

Sample: https://stackblitz.com/edit/react-perqyh-2qqdhr?file=index.js,index.html

Regards,

Vinitha

[Stefan Walter]

Thanks a lot Vinitha

[Vinitha Jeyakumar]

Hi Stefan,

We are glad to assist you.

Regards,

Vinitha