RichTextEditor

FlutterFlow Marketplacemarketplace.flutterflow.io

Item on Marketplace

Setup Instructions

Update 03/02/2025 - Update to Library

The Widget has been updated and now works using a callback action instead of writing to FFAppState

• Create an app or page state e.g HTMLMessage and then

• Pass an action that updates the state value in the getEditorContent callback action

• The resulting HTML String can be presented in a webview on FlutterFlow.

Set widget parameters

Update state value

Update 03/07/2024 - Dependency issues

• Create an app state called HTMLMessage : the app state gets updated on text change

• After adding the code to your project, add the following javascript code snippet in your project headers

This code snippet is to resolve some issues with webview due to the Flutter version update.

<script type="application/javascript" src="/assets/packages/flutter_inappwebview_web/assets/web/web_support.js" defer></script>

<script type="application/javascript" defer>
window.flutter_inappwebview = {
    webViews: {},
    createFlutterInAppWebView: function(viewId, iframeId) {
        var webView = {
            viewId: viewId,
            iframeId: iframeId,
            iframe: null,
            iframeContainer: null,
            windowAutoincrementId: 0,
            windows: {},
            isFullscreen: false,
            documentTitle: null,
            functionMap: {},
            settings: {},
            disableContextMenuHandler: function(event) {
                event.preventDefault();
                event.stopPropagation();
                return false;
            },
            prepare: function(settings) {
                webView.settings = settings;
                var iframe = document.getElementById(iframeId);
                var iframeContainer = document.getElementById(iframeId + '-container');

                document.addEventListener('fullscreenchange', function(event) {
                    // document.fullscreenElement will point to the element that
                    // is in fullscreen mode if there is one. If there isn't one,
                    // the value of the property is null.
                    if (document.fullscreenElement && document.fullscreenElement.id == iframeId) {
                        webView.isFullscreen = true;
                        window.flutter_inappwebview.nativeCommunication('onEnterFullscreen', viewId);
                    } else if (!document.fullscreenElement && webView.isFullscreen) {
                        webView.isFullscreen = false;
                        window.flutter_inappwebview.nativeCommunication('onExitFullscreen', viewId);
                    } else {
                        webView.isFullscreen = false;
                    }
                });

                if (iframe != null) {
                    webView.iframe = iframe;
                    webView.iframeContainer = iframeContainer;
                    iframe.addEventListener('load', function (event) {
                        webView.windowAutoincrementId = 0;
                        webView.windows = {};

                        var url = iframe.src;
                        try {
                            url = iframe.contentWindow.location.href;
                        } catch (e) {
                            console.log(e);
                        }
                        window.flutter_inappwebview.nativeCommunication('onLoadStart', viewId, [url]);

                        try {
                            var oldLogs = {
                                'log': iframe.contentWindow.console.log,
                                'debug': iframe.contentWindow.console.debug,
                                'error': iframe.contentWindow.console.error,
                                'info': iframe.contentWindow.console.info,
                                'warn': iframe.contentWindow.console.warn
                            };
                            for (var k in oldLogs) {
                                (function(oldLog) {
                                    iframe.contentWindow.console[oldLog] = function() {
                                        var message = '';
                                        for (var i in arguments) {
                                            if (message == '') {
                                                message += arguments[i];
                                            } else {
                                                message += ' ' + arguments[i];
                                            }
                                        }
                                        oldLogs[oldLog].call(iframe.contentWindow.console, ...arguments);
                                        window.flutter_inappwebview.nativeCommunication('onConsoleMessage', viewId, [oldLog, message]);
                                    }
                                })(k);
                            }
                        } catch (e) {
                            console.log(e);
                        }

                        try {
                            var originalPushState = iframe.contentWindow.history.pushState;
                            iframe.contentWindow.history.pushState = function (state, unused, url) {
                                originalPushState.call(iframe.contentWindow.history, state, unused, url);
                                var iframeUrl = iframe.src;
                                try {
                                    iframeUrl = iframe.contentWindow.location.href;
                                } catch (e) {
                                    console.log(e);
                                }
                                window.flutter_inappwebview.nativeCommunication('onUpdateVisitedHistory', viewId, [iframeUrl]);
                            };

                            var originalReplaceState = iframe.contentWindow.history.replaceState;
                            iframe.contentWindow.history.replaceState = function (state, unused, url) {
                                originalReplaceState.call(iframe.contentWindow.history, state, unused, url);
                                var iframeUrl = iframe.src;
                                try {
                                    iframeUrl = iframe.contentWindow.location.href;
                                } catch (e) {
                                    console.log(e);
                                }
                                window.flutter_inappwebview.nativeCommunication('onUpdateVisitedHistory', viewId, [iframeUrl]);
                            };

                            var originalOpen = iframe.contentWindow.open;
                            iframe.contentWindow.open = function (url, target, windowFeatures) {
                                var newWindow = originalOpen.call(iframe.contentWindow, ...arguments);
                                var windowId = webView.windowAutoincrementId;
                                webView.windowAutoincrementId++;
                                webView.windows[windowId] = newWindow;
                                window.flutter_inappwebview.nativeCommunication('onCreateWindow', viewId, [windowId, url, target, windowFeatures]).then(function(){}, function(handledByClient) {
                                    if (handledByClient) {
                                        newWindow.close();
                                    }
                                });
                                return newWindow;
                            };

                            var originalPrint = iframe.contentWindow.print;
                            iframe.contentWindow.print = function() {
                                var iframeUrl = iframe.src;
                                try {
                                    iframeUrl = iframe.contentWindow.location.href;
                                } catch (e) {
                                    console.log(e);
                                }
                                window.flutter_inappwebview.nativeCommunication('onPrintRequest', viewId, [iframeUrl]);
                                originalPrint.call(iframe.contentWindow);
                            };

                            webView.functionMap = {
                                "window.open": iframe.contentWindow.open,
                                "window.print": iframe.contentWindow.print,
                                "window.history.pushState": iframe.contentWindow.history.pushState,
                                "window.history.replaceState": iframe.contentWindow.history.replaceState,
                            }

                            var initialTitle = iframe.contentDocument.title;
                            var titleEl = iframe.contentDocument.querySelector('title');
                            webView.documentTitle = initialTitle;
                            window.flutter_inappwebview.nativeCommunication('onTitleChanged', viewId, [initialTitle]);
                            if (titleEl != null) {
                                new MutationObserver(function(mutations) {
                                    var title = mutations[0].target.innerText;
                                    if (title != webView.documentTitle) {
                                        webView.documentTitle = title;
                                        window.flutter_inappwebview.nativeCommunication('onTitleChanged', viewId, [title]);
                                    }
                                }).observe(
                                    titleEl,
                                    { subtree: true, characterData: true, childList: true }
                                );
                            }

                            var oldPixelRatio = iframe.contentWindow.devicePixelRatio;
                            iframe.contentWindow.addEventListener('resize', function (e) {
                                var newPixelRatio = iframe.contentWindow.devicePixelRatio;
                                if(newPixelRatio !== oldPixelRatio){
                                    window.flutter_inappwebview.nativeCommunication('onZoomScaleChanged', viewId, [oldPixelRatio, newPixelRatio]);
                                    oldPixelRatio = newPixelRatio;
                                }
                            });

                            iframe.contentWindow.addEventListener('popstate', function (event) {
                                var iframeUrl = iframe.src;
                                try {
                                    iframeUrl = iframe.contentWindow.location.href;
                                } catch (e) {
                                    console.log(e);
                                }
                                window.flutter_inappwebview.nativeCommunication('onUpdateVisitedHistory', viewId, [iframeUrl]);
                            });

                            iframe.contentWindow.addEventListener('scroll', function (event) {
                                var x = 0;
                                var y = 0;
                                try {
                                    x = iframe.contentWindow.scrollX;
                                    y = iframe.contentWindow.scrollY;
                                } catch (e) {
                                    console.log(e);
                                }
                                window.flutter_inappwebview.nativeCommunication('onScrollChanged', viewId, [x, y]);
                            });

                            iframe.contentWindow.addEventListener('focus', function (event) {
                                window.flutter_inappwebview.nativeCommunication('onWindowFocus', viewId);
                            });

                            iframe.contentWindow.addEventListener('blur', function (event) {
                                window.flutter_inappwebview.nativeCommunication('onWindowBlur', viewId);
                            });
                        } catch (e) {
                            console.log(e);
                        }

                        try {

                            if (!webView.settings.javaScriptCanOpenWindowsAutomatically) {
                                iframe.contentWindow.open = function() {
                                    throw new Error('JavaScript cannot open windows automatically');
                                };
                            }

                            if (!webView.settings.verticalScrollBarEnabled && !webView.settings.horizontalScrollBarEnabled) {
                                var style = iframe.contentDocument.createElement('style');
                                style.id = "settings.verticalScrollBarEnabled-settings.horizontalScrollBarEnabled";
                                style.innerHTML = "body::-webkit-scrollbar { width: 0px; height: 0px; }";
                                iframe.contentDocument.head.append(style);
                            }

                            if (webView.settings.disableVerticalScroll) {
                                var style = iframe.contentDocument.createElement('style');
                                style.id = "settings.disableVerticalScroll";
                                style.innerHTML = "body { overflow-y: hidden; }";
                                iframe.contentDocument.head.append(style);
                            }

                            if (webView.settings.disableHorizontalScroll) {
                                var style = iframe.contentDocument.createElement('style');
                                style.id = "settings.disableHorizontalScroll";
                                style.innerHTML = "body { overflow-x: hidden; }";
                                iframe.contentDocument.head.append(style);
                            }

                            if (webView.settings.disableContextMenu) {
                                iframe.contentWindow.addEventListener('contextmenu', webView.disableContextMenuHandler);
                            }
                        } catch (e) {
                            console.log(e);
                        }

                        window.flutter_inappwebview.nativeCommunication('onLoadStop', viewId, [url]);
                    });
                }
            },
            setSettings: function(newSettings) {
                var iframe = webView.iframe;
                try {
                    if (webView.settings.javaScriptCanOpenWindowsAutomatically != newSettings.javaScriptCanOpenWindowsAutomatically) {
                        if (!newSettings.javaScriptCanOpenWindowsAutomatically) {
                            iframe.contentWindow.open = function() {
                                throw new Error('JavaScript cannot open windows automatically');
                            };
                        } else {
                            iframe.contentWindow.open = webView.functionMap["window.open"];
                        }
                    }

                    if (webView.settings.verticalScrollBarEnabled != newSettings.verticalScrollBarEnabled &&
                        webView.settings.horizontalScrollBarEnabled != newSettings.horizontalScrollBarEnabled) {
                        if (!newSettings.verticalScrollBarEnabled && !newSettings.horizontalScrollBarEnabled) {
                            var style = iframe.contentDocument.createElement('style');
                            style.id = "settings.verticalScrollBarEnabled-settings.horizontalScrollBarEnabled";
                            style.innerHTML = "body::-webkit-scrollbar { width: 0px; height: 0px; }";
                            iframe.contentDocument.head.append(style);
                        } else {
                            var styleElement = iframe.contentDocument.getElementById("settings.verticalScrollBarEnabled-settings.horizontalScrollBarEnabled");
                            if (styleElement) { styleElement.remove() }
                        }
                    }

                    if (webView.settings.disableVerticalScroll != newSettings.disableVerticalScroll) {
                        if (newSettings.disableVerticalScroll) {
                            var style = iframe.contentDocument.createElement('style');
                            style.id = "settings.disableVerticalScroll";
                            style.innerHTML = "body { overflow-y: hidden; }";
                            iframe.contentDocument.head.append(style);
                        } else {
                             var styleElement = iframe.contentDocument.getElementById("settings.disableVerticalScroll");
                            if (styleElement) { styleElement.remove() }
                        }
                    }

                    if (webView.settings.disableHorizontalScroll != newSettings.disableHorizontalScroll) {
                        if (newSettings.disableHorizontalScroll) {
                            var style = iframe.contentDocument.createElement('style');
                            style.id = "settings.disableHorizontalScroll";
                            style.innerHTML = "body { overflow-x: hidden; }";
                            iframe.contentDocument.head.append(style);
                        } else {
                             var styleElement = iframe.contentDocument.getElementById("settings.disableHorizontalScroll");
                            if (styleElement) { styleElement.remove() }
                        }
                    }

                    if (webView.settings.disableContextMenu != newSettings.disableContextMenu) {
                        if (newSettings.disableContextMenu) {
                            iframe.contentWindow.addEventListener('contextmenu', webView.disableContextMenuHandler);
                        } else {
                            iframe.contentWindow.removeEventListener('contextmenu', webView.disableContextMenuHandler);
                        }
                    }
                } catch (e) {
                    console.log(e);
                }

                webView.settings = newSettings;
            },
            reload: function() {
                var iframe = webView.iframe;
                if (iframe != null && iframe.contentWindow != null) {
                    try {
                        iframe.contentWindow.location.reload();
                    } catch (e) {
                        console.log(e);
                        iframe.contentWindow.location.href = iframe.src;
                    }
                }
            },
            goBack: function() {
                var iframe = webView.iframe;
                if (iframe != null) {
                    try {
                        iframe.contentWindow.history.back();
                    } catch (e) {
                        console.log(e);
                    }
                }
            },
            goForward: function() {
                var iframe = webView.iframe;
                if (iframe != null) {
                    try {
                        iframe.contentWindow.history.forward();
                    } catch (e) {
                        console.log(e);
                    }
                }
            },
            goBackOrForward: function(steps) {
                var iframe = webView.iframe;
                if (iframe != null) {
                    try {
                        iframe.contentWindow.history.go(steps);
                    } catch (e) {
                        console.log(e);
                    }
                }
            },
            evaluateJavascript: function(source) {
                var iframe = webView.iframe;
                var result = null;
                if (iframe != null) {
                    try {
                        result = JSON.stringify(iframe.contentWindow.eval(source));
                    } catch (e) {}
                }
                return result;
            },
            stopLoading: function(steps) {
                var iframe = webView.iframe;
                if (iframe != null) {
                    try {
                        iframe.contentWindow.stop();
                    } catch (e) {
                        console.log(e);
                    }
                }
            },
            getUrl: function() {
                var iframe = webView.iframe;
                var url = iframe.src;
                try {
                    url = iframe.contentWindow.location.href;
                } catch (e) {
                    console.log(e);
                }
                return url;
            },
            getTitle: function() {
                var iframe = webView.iframe;
                var title = null;
                try {
                    title = iframe.contentDocument.title;
                } catch (e) {
                    console.log(e);
                }
                return title;
            },
            injectJavascriptFileFromUrl: function(urlFile, scriptHtmlTagAttributes) {
                var iframe = webView.iframe;
                try {
                    var d = iframe.contentDocument;
                    var script = d.createElement('script');
                    for (var key of Object.keys(scriptHtmlTagAttributes)) {
                        if (scriptHtmlTagAttributes[key] != null) {
                            script[key] = scriptHtmlTagAttributes[key];
                        }
                    }
                    if (script.id != null) {
                        script.onload = function() {
                            window.flutter_inappwebview.nativeCommunication('onInjectedScriptLoaded', webView.viewId, [script.id]);
                        }
                        script.onerror = function() {
                            window.flutter_inappwebview.nativeCommunication('onInjectedScriptError', webView.viewId, [script.id]);
                        }
                    }
                    script.src = urlFile;
                    if (d.body != null) {
                        d.body.appendChild(script);
                    }
                } catch (e) {
                    console.log(e);
                }
            },
            injectCSSCode: function(source) {
                var iframe = webView.iframe;
                try {
                    var d = iframe.contentDocument;
                    var style = d.createElement('style');
                    style.innerHTML = source;
                    if (d.head != null) {
                        d.head.appendChild(style);
                    }
                } catch (e) {
                    console.log(e);
                }
            },
            injectCSSFileFromUrl: function(urlFile, cssLinkHtmlTagAttributes) {
                var iframe = webView.iframe;
                try {
                    var d = iframe.contentDocument;
                    var link = d.createElement('link');
                    for (var key of Object.keys(cssLinkHtmlTagAttributes)) {
                        if (cssLinkHtmlTagAttributes[key] != null) {
                            link[key] = cssLinkHtmlTagAttributes[key];
                        }
                    }
                    link.type = 'text/css';
                    var alternateStylesheet = "";
                    if (cssLinkHtmlTagAttributes.alternateStylesheet) {
                        alternateStylesheet = "alternate ";
                    }
                    link.rel = alternateStylesheet + "stylesheet";
                    link.href = urlFile;
                    if (d.head != null) {
                        d.head.appendChild(link);
                    }
                } catch (e) {
                    console.log(e);
                }
            },
            scrollTo: function(x, y, animated) {
                var iframe = webView.iframe;
                try {
                    if (animated) {
                        iframe.contentWindow.scrollTo({top: y, left: x, behavior: 'smooth'});
                    } else {
                        iframe.contentWindow.scrollTo(x, y);
                    }
                } catch (e) {
                    console.log(e);
                }
            },
            scrollBy: function(x, y, animated) {
                var iframe = webView.iframe;
                try {
                    if (animated) {
                        iframe.contentWindow.scrollBy({top: y, left: x, behavior: 'smooth'});
                    } else {
                        iframe.contentWindow.scrollBy(x, y);
                    }
                } catch (e) {
                    console.log(e);
                }
            },
            printCurrentPage: function() {
                var iframe = webView.iframe;
                try {
                    iframe.contentWindow.print();
                } catch (e) {
                    console.log(e);
                }
            },
            getContentHeight: function() {
                var iframe = webView.iframe;
                try {
                    return iframe.contentDocument.documentElement.scrollHeight;
                } catch (e) {
                    console.log(e);
                }
                return null;
            },
            getContentWidth: function() {
                var iframe = webView.iframe;
                try {
                    return iframe.contentDocument.documentElement.scrollWidth;
                } catch (e) {
                    console.log(e);
                }
                return null;
            },
            getSelectedText: function() {
                var iframe = webView.iframe;
                try {
                    var txt;
                    var w = iframe.contentWindow;
                    if (w.getSelection) {
                        txt = w.getSelection().toString();
                    } else if (w.document.getSelection) {
                        txt = w.document.getSelection().toString();
                    } else if (w.document.selection) {
                        txt = w.document.selection.createRange().text;
                    }
                    return txt;
                } catch (e) {
                    console.log(e);
                }
                return null;
            },
            getScrollX: function() {
                var iframe = webView.iframe;
                try {
                    return iframe.contentWindow.scrollX;
                } catch (e) {
                    console.log(e);
                }
                return null;
            },
            getScrollY: function() {
                var iframe = webView.iframe;
                try {
                    return iframe.contentWindow.scrollY;
                } catch (e) {
                    console.log(e);
                }
                return null;
            },
            isSecureContext: function() {
                var iframe = webView.iframe;
                try {
                    return iframe.contentWindow.isSecureContext;
                } catch (e) {
                    console.log(e);
                }
                return false;
            },
            canScrollVertically: function() {
                var iframe = webView.iframe;
                try {
                    return iframe.contentDocument.body.scrollHeight > iframe.contentWindow.innerHeight;
                } catch (e) {
                    console.log(e);
                }
                return false;
            },
            canScrollHorizontally: function() {
                var iframe = webView.iframe;
                try {
                    return iframe.contentDocument.body.scrollWidth > iframe.contentWindow.innerWidth;
                } catch (e) {
                    console.log(e);
                }
                return false;
            },
            getSize: function() {
                var iframeContainer = webView.iframeContainer;
                var width = 0.0;
                var height = 0.0;
                if (iframeContainer.style.width != null && iframeContainer.style.width != '' && iframeContainer.style.width.indexOf('px') > 0) {
                    width = parseFloat(iframeContainer.style.width);
                }
                if (width == null || width == 0.0) {
                    width = iframeContainer.getBoundingClientRect().width;
                }
                if (iframeContainer.style.height != null && iframeContainer.style.height != '' && iframeContainer.style.height.indexOf('px') > 0) {
                    height = parseFloat(iframeContainer.style.height);
                }
                if (height == null || height == 0.0) {
                    height = iframeContainer.getBoundingClientRect().height;
                }

                return {
                    width: width,
                    height: height
                };
            }
        };

        return webView;
    },
    getCookieExpirationDate: function(timestamp) {
        return (new Date(timestamp)).toUTCString();
    }
};
</script>

​