Hello, World!
"); // Get raw IR content var irContent = oEditors.getById["ir1"].getIR(); // Set IR content directly oEditors.getById["ir1"].setIR("Direct IR content
"); // Update the hidden textarea before form submission oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []); ``` ### Response #### Success Response (200) - **getContents()**: Returns the current content of the editor as an HTML string. - **getIR()**: Returns the current content of the editor as an IR string. #### Response Example ```json { "htmlContent": "This is the editor content.
", "irContent": "[IR representation of content]" } ``` ``` -------------------------------- ### Manage Text Selection and Range Source: https://context7.com/naver/smarteditor2/llms.txt Utilize HuskyRangeManager to get selection details (text, HTML, collapsed state), modify content (wrap, insert HTML), and save/restore selection bookmarks. ```javascript // Get current selection object var oSelection = this.oApp.getSelection(); // Get selected text var selectedText = oSelection.getText(); // Get selected HTML var selectedHtml = oSelection.getHTML(); // Check if selection is collapsed (cursor only) var isCollapsed = oSelection.isCollapsed(); // Wrap selection with a tag oSelection.surroundContents(document.createElement("strong")); // Insert HTML at cursor position oSelection.insertHTML("Highlighted"); // Save and restore selection (bookmark) var bookmark = oSelection.getXPathBookmark(); // ... do some operations ... oSelection.moveToXPathBookmark(bookmark); // Select all content this.oApp.exec("SELECT_ALL", []); // Example: Custom formatting plugin $ON_APPLY_HIGHLIGHT: function() { var oSelection = this.oApp.getSelection(); if (oSelection.isCollapsed()) { alert("Please select some text first"); return; } this.oApp.exec("RECORD_UNDO_ACTION", ["BEFORE HIGHLIGHT", {sSaveTarget: "BODY"}]); var span = this.oApp.getWYSIWYGDocument().createElement("span"); span.style.backgroundColor = "#FFFF00"; oSelection.surroundContents(span); this.oApp.exec("RECORD_UNDO_ACTION", ["AFTER HIGHLIGHT", {sSaveTarget: "BODY"}]); } ``` -------------------------------- ### Get and Set Editor Content Source: https://context7.com/naver/smarteditor2/llms.txt Retrieve or update the editor's HTML content using getContents() and setContents(). Use UPDATE_CONTENTS_FIELD message to sync content to the textarea before form submission. Raw IR content can be accessed and set using getIR() and setIR(). ```javascript // Get the current HTML content from the editor var htmlContent = oEditors.getById["ir1"].getContents(); console.log("Editor content:", htmlContent); // Set new content in the editor oEditors.getById["ir1"].setContents("Hello, World!
"); // Update the hidden textarea field before form submission function submitForm(form) { // Sync editor content to textarea oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []); // Validate content var content = document.getElementById("ir1").value; if (content.trim() === "" || content === "") { alert("Please enter some content"); return false; } // Submit the form form.submit(); return true; } // Get raw IR (Intermediate Representation) content var irContent = oEditors.getById["ir1"].getIR(); // Set IR content directly oEditors.getById["ir1"].setIR("
Direct IR content
"); ``` -------------------------------- ### Configuration Options Source: https://context7.com/naver/smarteditor2/llms.txt Configure the editor's behavior, paths, and accessibility features using the nhn.husky.SE2M_Configuration object before initialization. ```APIDOC ## Configuration Options ### Description Configure the editor behavior through the `SE2M_Configuration` object. Set these options before initializing the editor to define CSS paths, accessibility IDs, and feature toggles. ### Configuration Objects - **SE2B_CSSLoader** - Sets the base URI for CSS files. - **SE_EditingAreaManager** - Defines paths for blank pages used in the editing area. - **SE2M_Accessibility** - Sets element IDs for navigation (before, after, and title). - **SE2M_Hyperlink** - Toggles automatic URL detection. - **SE2M_ColorPalette** - Toggles the display of recently used colors. - **Quote** - Sets the base URL for quote styling images. ``` -------------------------------- ### Initialize SmartEditor2 Editor Source: https://context7.com/naver/smarteditor2/llms.txt Use EZCreator.createInIFrame to initialize the editor. Ensure the HuskyEZCreator.js script is included and a textarea placeholder is present. Configure options like vertical resizer, mode changer, and locale. ```html ``` -------------------------------- ### Configure Smart Editor 2 Options Source: https://context7.com/naver/smarteditor2/llms.txt Set editor behavior like CSS paths, editing area URLs, accessibility, autolinking, and color palettes before initialization. ```javascript // Configure CSS and editing area paths nhn.husky.SE2M_Configuration.SE2B_CSSLoader = { sCSSBaseURI: "css" }; nhn.husky.SE2M_Configuration.SE_EditingAreaManager = { sCSSBaseURI: "css", sBlankPageURL: "smart_editor2_inputarea.html", sBlankPageURL_EmulateIE7: "smart_editor2_inputarea_ie8.html" }; // Accessibility configuration nhn.husky.SE2M_Configuration.SE2M_Accessibility = { sBeforeElementId: 'beforeEditor', // Element ID before editor sNextElementId: 'afterEditor', // Element ID after editor sTitleElementId: 'postTitle' // Title input element ID }; // Hyperlink configuration nhn.husky.SE2M_Configuration.SE2M_Hyperlink = { bAutolink: true // Enable automatic URL detection and linking }; // Color palette configuration nhn.husky.SE2M_Configuration.SE2M_ColorPalette = { bUseRecentColor: false // Show recently used colors }; // Quote styling configuration nhn.husky.SE2M_Configuration.Quote = { sImageBaseURL: 'http://example.com/static/img' }; ``` -------------------------------- ### Define and Register a Custom Plugin Source: https://context7.com/naver/smarteditor2/llms.txt Create a plugin by extending jindo.$Class and register it with the editor instance. Plugins use specific method prefixes to handle lifecycle and custom messages. ```javascript // Define a custom plugin nhn.husky.SE_TimeStamper = jindo.$Class({ name: "SE_TimeStamper", // Initialize plugin with app container reference $init: function(elAppContainer) { this._assignHTMLObjects(elAppContainer); }, // Cache DOM elements _assignHTMLObjects: function(elAppContainer) { this.oDropdownLayer = jindo.$$.getSingle( "DIV.husky_seditor_TimeStamper_layer", elAppContainer ); this.oInputButton = jindo.$$.getSingle( ".se_button_time", elAppContainer ); }, // Called when all plugins are ready $ON_MSG_APP_READY: function() { // Register toolbar button click event this.oApp.exec("REGISTER_UI_EVENT", [ "TimeStamper", // Button class suffix "click", // Event type "SE_TOGGLE_TIMESTAMPER_LAYER" // Message to fire ]); // Register browser event on custom button this.oApp.registerBrowserEvent( this.oInputButton, 'click', 'PASTE_NOW_DATE' ); }, // Handler for toggle layer message $ON_SE_TOGGLE_TIMESTAMPER_LAYER: function() { this.oApp.exec("TOGGLE_TOOLBAR_ACTIVE_LAYER", [this.oDropdownLayer]); }, // Handler for inserting current date/time $ON_PASTE_NOW_DATE: function() { var now = new Date(); var dateStr = now.toLocaleDateString() + " " + now.toLocaleTimeString(); this.oApp.exec("PASTE_HTML", [dateStr]); this.oApp.exec("HIDE_ACTIVE_LAYER", []); } }); // Register the plugin in SE2BasicCreator.js oEditor.registerPlugin(new nhn.husky.SE_TimeStamper(elAppContainer)); ``` -------------------------------- ### Register and Implement Lazy Loading Plugins Source: https://context7.com/naver/smarteditor2/llms.txt Register messages in the main plugin file to trigger lazy loading, then define the plugin logic in a separate file using nhn.husky.HuskyCore.mixin. ```javascript // In the main plugin file, register lazy messages $ON_MSG_APP_READY: function() { // Register UI event as normal this.oApp.exec("REGISTER_UI_EVENT", ["hyperlink", "click", "TOGGLE_HYPERLINK_LAYER"]); // Register messages that should trigger lazy loading this.oApp.registerLazyMessage( ["TOGGLE_HYPERLINK_LAYER", "APPLY_HYPERLINK"], // Messages to intercept ["hp_SE2M_Hyperlink$Lazy.js"] // Files to load ); } // In the lazy-loaded file (hp_SE2M_Hyperlink$Lazy.js) // Mark file as loaded nhn.husky.HuskyCore.addLoadedFile("hp_SE2M_Hyperlink$Lazy.js"); // Mixin additional functionality to existing plugin nhn.husky.HuskyCore.mixin(nhn.husky.SE2M_Hyperlink, { $ON_TOGGLE_HYPERLINK_LAYER: function() { // Full implementation loaded on demand this._showHyperlinkLayer(); }, $ON_APPLY_HYPERLINK: function() { // Apply hyperlink logic var url = this.oLinkInput.value; if (url && url.indexOf("http") !== 0) { url = "http://" + url; } this.oApp.exec("EXECCOMMAND", ["createLink", false, url]); this.oApp.exec("HIDE_ACTIVE_LAYER", []); } }); ``` -------------------------------- ### HuskyCore Message Execution Source: https://context7.com/naver/smarteditor2/llms.txt Details on how to use the `exec()` method to trigger various editor functionalities and commands via message passing. ```APIDOC ## HuskyCore Message Execution ### Description Utilizes the `exec()` method, the core API for interacting with the SmartEditor2 editor, to trigger actions and commands by passing messages. ### Method `exec(messageName, params)` ### Endpoint N/A (Client-side JavaScript method) ### Parameters #### Path Parameters N/A #### Query Parameters N/A #### Request Body - **messageName** (String) - Required - The name of the message/command to execute (e.g., "FOCUS", "PASTE_HTML"). - **params** (Array) - Optional - An array of parameters required by the specific message. ### Request Example ```javascript // Execute a message with parameters oEditors.getById["ir1"].exec("MESSAGE_NAME", [param1, param2]); // Focus on the editing area oEditors.getById["ir1"].exec("FOCUS", []); // Change editing mode oEditors.getById["ir1"].exec("CHANGE_EDITING_MODE", ["WYSIWYG"]); // Paste HTML content oEditors.getById["ir1"].exec("PASTE_HTML", ["Inserted text"]); // Apply font formatting oEditors.getById["ir1"].exec("APPLY_FONTNAME", ["Arial"]); oEditors.getById["ir1"].exec("APPLY_FONTSIZE", ["18px"]); // Apply text styles using EXECCOMMAND oEditors.getById["ir1"].exec("EXECCOMMAND", ["bold"]); // Delayed message execution oEditors.getById["ir1"].delayedExec("FOCUS", [], 100); ``` ### Response #### Success Response (200) Execution of commands via `exec()` typically modifies the editor state or performs an action. There is no direct response body, but the editor's behavior will change accordingly. #### Response Example N/A ``` -------------------------------- ### Adding Toolbar UI Elements Source: https://context7.com/naver/smarteditor2/llms.txt Extend the editor toolbar by modifying the skin HTML and implementing a custom plugin handler. ```APIDOC ## Adding Toolbar UI Elements ### Description Custom toolbar buttons are added by defining the UI in `SmartEditor2Skin.html` and creating a plugin class that registers events and actions with the editor application. ### Implementation Steps 1. Add the button HTML structure to `SmartEditor2Skin.html`. 2. Define the button icon in `smart_editor2.css`. 3. Create a plugin class using `jindo.$Class` to handle events like `TOGGLE_CUSTOM_LAYER` or `DO_CUSTOM_ACTION`. 4. Register the plugin using `oEditor.registerPlugin()`. ``` -------------------------------- ### Execute HuskyCore Editor Messages Source: https://context7.com/naver/smarteditor2/llms.txt Trigger editor actions using the exec() method with message names and optional parameters. Common operations include focusing, changing modes, pasting HTML, applying formatting, and executing commands. ```javascript // Execute a message with parameters oEditors.getById["ir1"].exec("MESSAGE_NAME", [param1, param2]); // Focus on the editing area oEditors.getById["ir1"].exec("FOCUS", []); // Change editing mode (WYSIWYG, HTML, TEXT) oEditors.getById["ir1"].exec("CHANGE_EDITING_MODE", ["WYSIWYG"]); oEditors.getById["ir1"].exec("CHANGE_EDITING_MODE", ["HTML"]); oEditors.getById["ir1"].exec("CHANGE_EDITING_MODE", ["TEXT"]); // Paste HTML content at cursor position oEditors.getById["ir1"].exec("PASTE_HTML", ["Inserted text"]); // Apply text formatting oEditors.getById["ir1"].exec("APPLY_FONTNAME", ["Arial"]); oEditors.getById["ir1"].exec("APPLY_FONTSIZE", ["18px"]); oEditors.getById["ir1"].exec("APPLY_FONTCOLOR", ["#FF0000"]); oEditors.getById["ir1"].exec("APPLY_BGCOLOR", ["#FFFF00"]); // Apply text styles oEditors.getById["ir1"].exec("EXECCOMMAND", ["bold"]); oEditors.getById["ir1"].exec("EXECCOMMAND", ["italic"]); oEditors.getById["ir1"].exec("EXECCOMMAND", ["underline"]); // Delayed message execution (with timeout in ms) oEditors.getById["ir1"].delayedExec("FOCUS", [], 100); ``` -------------------------------- ### Handle Undo/Redo Operations Source: https://context7.com/naver/smarteditor2/llms.txt Manage editor history by recording states before and after actions, and triggering navigation commands. ```javascript // Record current state before making changes this.oApp.exec("RECORD_UNDO_ACTION", ["BEFORE MY_ACTION", { sSaveTarget: "BODY" // Save entire body content }]); // Perform your changes here... this.oApp.exec("PASTE_HTML", ["New content
"]); // Record state after changes this.oApp.exec("RECORD_UNDO_ACTION", ["AFTER MY_ACTION", { sSaveTarget: "BODY" }]); // Trigger undo operation this.oApp.exec("UNDO", []); // Trigger redo operation this.oApp.exec("REDO", []); // Two-step action recording (for complex operations) this.oApp.exec("RECORD_UNDO_BEFORE_ACTION", ["TABLE_EDIT", { bTwoStepAction: true, sSaveTarget: "TABLE" }]); // ... perform table editing ... this.oApp.exec("RECORD_UNDO_AFTER_ACTION", ["TABLE_EDIT", { bTwoStepAction: true, sSaveTarget: "TABLE" }]); // Get undo history for debugging var history = oEditors.getById["ir1"].getUndoHistory(); var currentIdx = oEditors.getById["ir1"].getUndoStateIdx(); ``` -------------------------------- ### Selection and Range Management Source: https://context7.com/naver/smarteditor2/llms.txt Access and manipulate text selections using the HuskyRangeManager to implement custom formatting features. ```APIDOC ## Selection and Range Management ### Description Use the `oApp.getSelection()` method to retrieve the current selection object, allowing for text/HTML extraction, content wrapping, and cursor manipulation. ### Key Methods - **getText()** - Returns the selected text. - **getHTML()** - Returns the selected HTML content. - **isCollapsed()** - Checks if the selection is a single cursor position. - **surroundContents(element)** - Wraps the selection with a DOM element. - **insertHTML(html)** - Inserts HTML at the current cursor position. - **getXPathBookmark() / moveToXPathBookmark()** - Saves and restores selection state. ``` -------------------------------- ### Register Keyboard Hotkeys Source: https://context7.com/naver/smarteditor2/llms.txt Define keyboard shortcuts using the REGISTER_HOTKEY message. Supports modifier keys like ctrl, alt, shift, and meta. ```javascript $ON_MSG_APP_READY: function() { // Register Ctrl+K for hyperlink (Windows/Linux) this.oApp.exec("REGISTER_HOTKEY", ["ctrl+k", "TOGGLE_HYPERLINK_LAYER", []]); // Register Cmd+K for hyperlink (Mac) if (jindo.$Agent().os().mac) { this.oApp.exec("REGISTER_HOTKEY", ["meta+k", "TOGGLE_HYPERLINK_LAYER", []]); } // Register Ctrl+Shift+S for custom save this.oApp.exec("REGISTER_HOTKEY", ["ctrl+shift+s", "CUSTOM_SAVE_ACTION", []]); // Register multiple hotkeys this.oApp.exec("REGISTER_HOTKEY", ["ctrl+b", "EXECCOMMAND", ["bold"]]); this.oApp.exec("REGISTER_HOTKEY", ["ctrl+i", "EXECCOMMAND", ["italic"]]); this.oApp.exec("REGISTER_HOTKEY", ["ctrl+u", "EXECCOMMAND", ["underline"]]); } ``` -------------------------------- ### Control Editing Area Resize Source: https://context7.com/naver/smarteditor2/llms.txt Programmatically adjust the editor dimensions or configure auto-resize behavior. ```javascript // Resize editing area to specific dimensions this.oApp.exec("MSG_EDITING_AREA_RESIZE_STARTED", []); this.oApp.exec("RESIZE_EDITING_AREA", [800, 600]); // width, height in pixels this.oApp.exec("MSG_EDITING_AREA_RESIZE_ENDED", []); // Resize by delta values this.oApp.exec("MSG_EDITING_AREA_RESIZE_STARTED", []); this.oApp.exec("RESIZE_EDITING_AREA_BY", [0, 100]); // Increase height by 100px this.oApp.exec("MSG_EDITING_AREA_RESIZE_ENDED", []); // Get current dimensions var width = oEditors.getById["ir1"].getEditingAreaWidth(); var height = oEditors.getById["ir1"].getEditingAreaHeight(); // Auto-resize feature (expand as content grows) // Enable in configuration: htParams: { SE_EditingAreaManager: { bAutoResize: true } } // Stop auto-resize programmatically this.oApp.exec("STOP_AUTORESIZE_EDITING_AREA", []); ``` -------------------------------- ### Manage Message Flow Source: https://context7.com/naver/smarteditor2/llms.txt Control editor features by enabling or disabling specific messages via the oApp interface. ```javascript // Disable a specific message (it will be ignored when fired) this.oApp.exec("DISABLE_MESSAGE", ["TOGGLE_HYPERLINK_LAYER"]); // Re-enable the message this.oApp.exec("ENABLE_MESSAGE", ["TOGGLE_HYPERLINK_LAYER"]); // Direct method call (alternative approach) this.oApp.disableMessage("PASTE_HTML", true); // Disable this.oApp.disableMessage("PASTE_HTML", false); // Enable // Example: Disable features based on conditions $ON_MSG_APP_READY: function() { if (this.bReadOnlyMode) { // Disable editing features in read-only mode this.oApp.exec("DISABLE_MESSAGE", ["PASTE_HTML"]); this.oApp.exec("DISABLE_MESSAGE", ["EXECCOMMAND"]); this.oApp.exec("DISABLE_MESSAGE", ["APPLY_FONTNAME"]); } } ``` -------------------------------- ### Style Custom Toolbar Button CSS Source: https://context7.com/naver/smarteditor2/llms.txt Add this CSS to smart_editor2.css to style the custom toolbar button's icon. ```css /* Add to smart_editor2.css */ #smart_editor2 .se2_text_tool .se2_custom { background: url("../img/custom_icon.png") no-repeat; } ``` -------------------------------- ### Add Custom Toolbar Button HTML Source: https://context7.com/naver/smarteditor2/llms.txt Include this HTML in SmartEditor2Skin.html to add a custom toolbar button and its associated layer. ```html