CODEWITHSUNDEEP
froala
Vic Omundsen
Vic Omundsen

Reputation: 1

When I set froala edit to 'off', the links in the editor stop working

When displaying text with a link in the froala editor, if the editor is set as non-editable, the link does not work.

<script>function loadEditor(){ var frEditor = new FroalaEditor('#imessage', { height: 350, width: 500},function(){frEditor.edit.off();});}</script><body onload="loadEditor()"><div id="imessage"><p>Some text</p><p><a href="https://stackoverflow.com/" rel="noopener noreferrer" target="_blank">StackOverFlow</a></p></div></body>

Is there a setting required to enable the link to respond to a mouse-click while in read-only mode?

Upvotes: 0

Views: 1099

Answers (4)

Daniel Quinn
Daniel Quinn

Reputation: 1

For a pure JavaScript answer I did the following. I had a problem with the listeners being added multiple times so I added the anchor-click-listener attribute exists check. This also handles multiple links.

events: {
    initialized: ((e: any) => {
        e.getEditor().edit.off();

        // Froala link doesn't work in readonly - workaround
        const linkObjs = document.querySelectorAll('.fr-element a');
        if (linkObjs?.length > 0) {
            linkObjs.forEach(linkObj => {
                if (linkObj.getAttribute('anchor-click-listener') !== 'true') {
                    const link = linkObj.getAttribute('href');
                    linkObj.addEventListener("click", function () {
                        window.open(link);
                    });
                    linkObj.setAttribute('anchor-click-listener', 'true');
                }
            });
        }
    }),
},

Upvotes: 0

Carl Cruz
Carl Cruz

Reputation: 11

Can you try with this code?

function loadEditor() {
  var frEditor = new FroalaEditor('#imessage', {
    height: 350,
    width: 500
  }, function() {
    frEditor.edit.off();
    //froala link doesn't work in readonly - workaround
    $('div.fr-element.fr-view.fr-disabled a').click(function() {
      window.open($(this).prop('href'));
    })

  });
}

Edit: This code initializes a read-only FroalaEditor instance on an element with the ID "imessage." It includes a workaround to ensure links are clickable even in read-only mode:

Upvotes: 0

amrit singh sohi
amrit singh sohi

Reputation: 1

This helped in resolving an issue related to Opening YouTube videos added by link in Froala, in the initialization function, I added this for videos (tested it for multiple videos as well):

if ($('.fr-element').find('iframe').length > 0) {
    $('div.fr-element.fr-view').eq(0).on('click', function (e) {
        if ($(e.target).is('span') && $(e.target).find('iframe').length > 0) {
            var iframeSrc = $(e.target).find('iframe').attr('src');
            console.log('IFrame src:', $(e.target).find('iframe'));
            window.open(iframeSrc);
        }
    });
}

Upvotes: 0

Vic Omundsen
Vic Omundsen

Reputation: 1

When initialising the editor, add a click function to the 'initialized' event to open the link:

events: {
    'initialized': function () {
        this.edit.off();
        //froala link doesn't work in readonly - workaround
        if ($('.fr-element').find('a').length > 0) {
            var linkobj = $('.fr-element').find('a')[0];
            var link = $(linkobj).prop('href');
            $('div.fr-element.fr-view.fr-disabled').click(function () { window.open(link); })
        }
    }
}

Upvotes: 0

Related Questions