thanks for the question.

When iframe: true is disabled in Froala Editor, the editor is rendered directly into the DOM, rather than inside an isolated <iframe>.

This means that options like iframeStyle and iframeStyleFiles will no longer apply since those are specifically intended to affect the inner document of the iframe.

How to style the Froala editor without using iframe: true

Since you're rendering the editor inline (without an iframe), you can style it just like any other DOM element.

Option 1: Use a dedicated CSS file

You can define your custom styles in a regular CSS or SCSS file and import it into your component:

/* editor-custom.css */
.froala-editor {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: #333;
}

.froala-editor p {
  line-height: 1.6;
}

/* target other elements inside the editor as needed */

Then import it into your React component:

import 'froala-editor/js/froala_editor.pkgd.min.js';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import './editor-custom.css'; // your custom styles

import FroalaEditor from 'react-froala-wysiwyg';

function MyEditorComponent() {
  return (
    <FroalaEditor
      tag="textarea"
      config={{
        iframe: false,
        // other config options
      }}
    />
  );
}

Option 2: Inline styles or styled wrapper

If you prefer inline styles or styled-components, you can wrap the editor in a styled container and apply styles that way.

However, this only applies to outer container styles and won't target internal elements within the editor content, like paragraphs, headers, etc.

const EditorWrapper = styled.div`
  .fr-wrapper,
  .fr-element {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #333;
  }
`;

function MyEditorComponent() {
  return (
    <EditorWrapper>
      <FroalaEditor config={{ iframe: false }} />
    </EditorWrapper>
  );
}

Summary

When iframe: false:

• iframeStyle and iframeStyleFiles are ignored.
• Style the editor using external CSS, styled-components, or global styles.
• Use standard CSS class selectors like .fr-wrapper, .fr-element, etc., to target the editor content.

Let me know if you want help targeting specific parts of the editor! Thanks,