Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Link menu doesn't display if the link is styled in iframe mode #393

Open
AigiulGasymova opened this issue Mar 14, 2024 · 0 comments
Open

Comments

@AigiulGasymova
Copy link

Hello, we faced the issue with styled links. The links in Edit mode work only when there is no extra styling. For example, I’ve added boldness to this link - and it doesn’t work anymore (clicking on it doesn’t display any link menu):
image

But if I remove boldness, link menu displays on click:
image

We have a paid Froala version 4.1.4, here are dependencies from our package.json:

"froala-editor": "^4.1.4"
"react-froala-wysiwyg": "^4.1.4"

This is our Froala config (simplified it a little to show only important configs):

import FroalaEditor from 'froala-editor';
import FroalaEditorComponent from 'react-froala-wysiwyg';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/js/plugins.pkgd.min.js';
import 'froala-editor/js/plugins/link.min.js';

const TextEditor = () => {
 return (
      <FroalaEditorComponent
        tag="textarea"
        config={{
          placeholderText: placeholder,
          key: process.env.GATSBY_FROALA_ACTIVATION_KEY,
          attribution: false,
          iframe: true,
          toolbarSticky: false,
          toolbarButtons: {
            moreText: {
              buttons: [
                'bold',
                'italic',
                'underline',
                'strikeThrough',
                'subscript',
                'superscript',
                'fontSize',
                'textColor',
                'clearFormatting',
              ],
            },
            moreParagraph: {
              buttons: [
                'alignLeft',
                'alignCenter',
                'formatOLSimple',
                'alignRight',
                'alignJustify',
                'formatOL',
                'formatUL',
                'paragraphFormat',
                'lineHeight',
                'outdent',
                'indent',
              ],
            },
            moreRich: {
              buttons: [
                'templates_button',
                'insertLink',
                'emoticons',
                'specialCharacters',
                'insertHR',
                'insertImage',
              ],
              buttonsVisible: 2,
            },
            moreMisc: {
              buttons: [
                'undo',
                'redo',
                'fullscreen',
                'print',
                'getPDF',
                'selectAll',
                'html',
                'help',
              ],
              align: 'right',
              buttonsVisible: 2,
            },
          },
          quickInsertButtons: ['ul', 'ol', 'hr'],
          imageInsertButtons: ['imageBack', '|', 'imageUpload'],
          imageMaxSize: 1024 * 1024 * 20,
          imageAllowedTypes: ['png', 'jpeg', 'jpg', 'gif'],
     
        model={model}
        onModelChange={handleModelChange}
      />
    </div>
  );
};

Styled links work when iframe: true is removed from the config, but it's important for us to keep the iframe mode. Do we have any fix or workaround for this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant