Custom source editor?

[Thierry Tremblay]

Currently we can view the html source of the rich text control when clicking on the 'source code' toolbar button.

We would like to use a different source code editor, something like https://ace.c9.io/ . It makes it easier to make change to the source code.

Is this possible? if so, how do you suggest we do this?

Thanks in advance

[Vinitha Jeyakumar]

Hi Thierry,

We need some more information about your requirements in Rich Text Editor for the better understanding from our end. are you looking for a live HTML editor support in Rich Text Editor like in the below sample,

https://ej2.syncfusion.com/demos/rich-text-editor/online-html-editor/

If we misunderstood your requirements, can you please provide a video or image illustration to further validate on our end.

Regards,

Vinitha

[Thierry Tremblay]

Thank you for the example. Currently when clicking on the "Source Code" toolbar button, I do not see the same thing as in your example. see below.

In you your example I see the html which seems to be properly indented with line numbers.

How do I get the same behavior by clicking   on the "Source Code" toolbar button?

[Vinitha Jeyakumar]

Hi Thierry,

You can achieve the same by rendering the Code Mirror libraries with Rich Text Editor. please check the code below,

Code snippet:

let defaultRTE: RichTextEditor = new RichTextEditor({ toolbarSettings: {
  items: ['SourceCode']},
  showCharCount: true,
  actionComplete: actionCompleteHandler});
defaultRTE.appendTo('#defaultRTE');

let myCodeMirror: any;

function mirrorConversion(e?: any): void {
  let textArea: HTMLElement = defaultRTE.contentModule.getEditPanel() as HTMLElement;
  let id: string = defaultRTE.getID() + 'mirror-view';
  let mirrorView: HTMLElement = defaultRTE.element.querySelector('#' + id) as HTMLElement;
  let charCount: HTMLElement = defaultRTE.element.querySelector('.e-rte-character-count') as HTMLElement;
  if (e.targetItem === 'Preview') {
      textArea.style.display = 'block';
      mirrorView.style.display = 'none';
      textArea.innerHTML = myCodeMirror.getValue();
      charCount.style.display = 'block';
  } else {
      if (!mirrorView) {
          mirrorView = createElement('div', { className: 'e-content' });
          mirrorView.id = id;
          textArea.parentNode.appendChild(mirrorView);
      } else {
          mirrorView.innerHTML = '';
      }
      textArea.style.display = 'none';
      mirrorView.style.display = 'block';
      renderCodeMirror(mirrorView, defaultRTE.value);
      charCount.style.display = 'none';
  }
}

function renderCodeMirror(mirrorView: HTMLElement, content: string): void {
  myCodeMirror = CodeMirror(mirrorView, {
      value: content,
      lineNumbers: true,
      mode: 'text/html',
      lineWrapping: true,

  });
}

function actionCompleteHandler(e: any): void {
    if (e.targetItem && (e.targetItem === 'SourceCode' || e.targetItem === 'Preview')) {
        this.sourceCodeModule.getPanel().style.display = 'none';
        mirrorConversion(e);
    } else {
        setTimeout(() => { defaultRTE.toolbarModule.refreshToolbarOverflow(); }, 400);
    }
}

For further reference, please refer to the documentation below

Documentation: https://ej2.syncfusion.com/documentation/rich-text-editor/third-party-integration/

Regards,

Vinitha