Squizee Rich Text Editor API Guide

🔹 Quick Start

1. Include the Rich Text Editor script:

   <script src="https://rich-text-editor.squizee.in/main-js.js" defer></script>

2. Add the editor placeholder in your HTML:

   <textarea id="squizee-canvas" name="content"></textarea>

3. Optionally define buttons to hide before initialization:

   window.hiddenButtons = ['downloadPDF', 'insertEmoji'];

4. Available buttons:

   hideButtons([
       // Undo / Redo
       'undo', 'redo', 'help',
   
       // Style
       'clear', 'clearcontent', 'style',
   
       // Font formatting
       'bold', 'italic', 'underline', 'strikethrough',
       'superscript', 'subscript', 'uppercase',
       'lowercase', 'propercase',
   
       // Font controls
       'fontname', 'fontsize', 'fontsizeunit',
   
       // Colors
       'forecolor', 'backcolor',
   
       // Lists
       'listStylesDropdown',
   
       // Paragraph
       'paragraph', 'height',
   
       // Insert
       'link', 'picture', 'video', 'hr',
       'emoticons', 'captureImage',
       'insertSection',
   
       // Emoji / symbols
       'insertEmoji', 'insertSymbol', 'insertIcon',
   
       // Table
       'table',
   
       // View
       'fullscreen', 'codeview', 'increaseheight',
       'decreaseheight',
   
       // Alignment
       'alignLeft', 'alignCenter', 'alignRight',
       'alignJustify',
   
       // File tools
       'findReplace', 'loadFile', 'writeWithAI',
   
       // Custom download / preview
       'preview', 'download', 'downloadPDF',
       'downloadTXT'
   ]);

5. Initialize the editor manually if needed:

   initializeEditor();

   Note: This is usually called automatically when the script loads.
6. Interact with the editor using the API:

   pasteHtml(...); getHtml(); disableEditor(); hideButtons([...]); disableButtons(); enableButtons(); clearEditorContent();

🔹 Common API Methods & Usage Examples

pasteHtml('<h1>Hello, Squizee!</h1>');

getHtml();

disableEditor();  // Makes the editor read-only

hideButtons(['preview', 'downloadTXT']);  // Hide toolbar buttons

enableButtons();  // Enable all buttons again

These let you modify content, UI state, and editor accessibility programmatically.

🔹 Advanced Utility Functions

enableCodeView(maxRetries = 20, delay = 200);

disableCodeView(maxRetries = 20, delay = 200);

enableButtons(selector = '.note-btn, .custom-btn', maxRetries = 20, delay = 200);

disableButtons(selector = '.note-btn, .custom-btn', maxRetries = 20, delay = 200);

hideButtons(array = []);

injectCustomStyles(customStyles = '');

openFindReplaceModal();

showAlert(message, duration = 3000);

resetSectionStyle();

clearEditorContent();

Use these helper methods for advanced UI control, customization, and feedback within the editor environment.

🔹 Troubleshooting Tips

• Ensure #squizee-canvas exists in the DOM before calling initializeEditor().
• Open DevTools and inspect for JS load errors or warnings.
• Use correct button keys in window.hiddenButtons (case-sensitive).
• Wait until window.isEditorLoaded is true before accessing UI controls.
• Use logs or breakpoints in checkIfResourcesReady() for deeper debugging.

For extra help, visit the Developer API page or reach out to support.