Links are not opening/clickable when editor.edit is in off mode

[karthickbabu94]

links in the content are not clickable or link is not opening. if the editor is in readonly mode

[DineshMadanlal]

+1

[grumd]

+1

After calling editor.edit.off() all links are no longer clickable.

[williamverdolini]

+1

[DineshMadanlal]

We can achieve this programatically. Load the non-editable content in an iFrame.

HTML CODE:

`<iframe ref="nonEditableEmailRef" :srcdoc="editorModelValue" frameborder="0" scrolling="no" @load="onLoadIframe"

`

---

JAVASCRIPT CODE:

`const onLoadIframe = () => {
  if (state.nonEditableEmailRef) {
    const iframe = state.nonEditableEmailRef;
    const contentDocument = iframe.contentWindow.document;

    /** Set the height to the scrollHeight of the content
     * -> Extra 40 is added because of the extra padding set */
    state.nonEditableEmailRef.style.height = `${contentDocument.documentElement.scrollHeight + props.addExtraHeightForIframe || 0}px`;
   // apply font family
    contentDocument.body.style.font = '14px/1.4 DM Sans,sans-serif';

    // Modify links in the iframe content - add target=_blank by default
    const links = contentDocument.getElementsByTagName('a');

    if (links) {
      // Convert HTMLCollection to array and then use forEach
      Array.from(links).forEach((eachLink) => {
        eachLink.setAttribute('target', '_blank');
      });
    }
  }
};`

---

Feel free to use ChatGPT to convert the code into your preferred programming language. In my case, I'm using Vue 3.