Examples

Example code

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
        <script type="text/javascript" src="/richtexteditor/rte.js"></script>
        <script type="text/javascript" src="/richtexteditor/plugins/all_plugins.js"></script>

        <div class="ai-toolbar-case-grid">
            <section class="ai-toolbar-case">
                <h4>Stock default toolbar</h4>
                <p>The default preset keeps the built-in Ask AI button.</p>
                <span id="stock_status" class="ai-toolbar-status">Checking toolbar...</span>
                <div id="stock_editor">
                    <p>Ask AI should appear in this toolbar.</p>
                </div>
            </section>

            <section class="ai-toolbar-case">
                <h4>Customized default toolbar</h4>
                <p>This overrides <code>toolbar_default</code> without <code>aiassist</code>. The plugin should not add it back.</p>
                <span id="custom_status" class="ai-toolbar-status">Checking toolbar...</span>
                <div id="custom_editor">
                    <p>Ask AI should not appear in this toolbar.</p>
                </div>
            </section>

            <section class="ai-toolbar-case">
                <h4>Explicit auto-injection opt-out</h4>
                <p>This keeps AI Toolkit loaded but disables automatic toolbar button injection.</p>
                <span id="optout_status" class="ai-toolbar-status">Checking toolbar...</span>
                <div id="optout_editor">
                    <p>Ask AI should not appear in this toolbar.</p>
                </div>
            </section>
        </div>

        <script>
            var stockEditor = new RichTextEditor("#stock_editor", {
                toolbar: "default"
            });

            var customEditor = new RichTextEditor("#custom_editor", {
                toolbar: "default",
                toolbar_default: "{bold,italic,underline,forecolor,backcolor}|{justifyleft,justifycenter,justifyright,justifyfull}|{insertorderedlist,insertunorderedlist,indent,outdent,insertblockquote,insertemoji}" +
                    "#{toggleborder,fullscreenenter,fullscreenexit,undo,redo,togglemore}"
            });

            var optOutEditor = new RichTextEditor("#optout_editor", {
                toolbar: "basic",
                aiToolkitAutoToolbarButtons: false
            });

            function setStatus(id, passed, message) {
                var node = document.getElementById(id);
                node.className = "ai-toolbar-status " + (passed ? "is-pass" : "is-fail");
                node.innerText = message;
            }

            function hasAiButton(editorId) {
                var editorRoot = document.getElementById(editorId);
                var shell = editorRoot && editorRoot.closest ? editorRoot.closest(".richtexteditor") : null;
                if (!shell) {
                    shell = editorRoot && editorRoot.parentNode;
                }
                return !!(shell && shell.querySelector(".rte_command_aiassist"));
            }

            window.setTimeout(function () {
                var stockHasAi = hasAiButton("stock_editor");
                var customHasAi = hasAiButton("custom_editor");
                var optOutHasAi = hasAiButton("optout_editor");

                setStatus("stock_status", stockHasAi, stockHasAi ? "PASS: Ask AI is visible." : "FAIL: Ask AI is missing.");
                setStatus("custom_status", !customHasAi, customHasAi ? "FAIL: Ask AI was re-added." : "PASS: Ask AI stays removed.");
                setStatus("optout_status", !optOutHasAi, optOutHasAi ? "FAIL: Ask AI was injected." : "PASS: auto-injection is disabled.");
            }, 350);
        </script>