AI Toolbar Configuration
These editors verify that the AI Toolkit respects toolbar customization. The stock toolbar shows Ask AI, while customized toolbars can remove it without the plugin adding it back.
Example code
<div class="ai-toolbar-case-grid">
<section class="ai-toolbar-case">
<h4>Stock default toolbar</h4>
<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>
<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>
<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
});
</script>