DOCSEARCHbyAlgolia
Submit Docs

SmartEditor2

repository·master·Indexed 43 days ago

https://github.com/naver/smarteditor2

A JavaScript-based WYSIWYG HTML text editor featuring a plugin architecture for extensibility. It supports multiple editing modes (WYSIWYG, HTML, and TEXT) and provides comprehensive text formatting tools, including font styling, line spacing, and a Photo Quick Uploader. Version 2.10.1-alpha.0 is compatible with Internet Explorer 8.x+, Firefox 3.5+, Chrome 4.0+, and Safari 4.0+.

Tokens
17.2K
Snippets
39
Records
80
Agent score
55%

What's inside SmartEditor2

  1. Overview of SmartEditor2

    master

    SmartEditor2 is a web-based WYSIWYG (What You See Is What You Get) editor implemented in JavaScript. It provides multiple editing modes including WYSIWYG, HTML, and TEXT modes.

    Key features include:

    • Flexible font size settings
    • Line spacing controls
    • Find and Replace functionality
    • A plugin-based architecture that allows developers to easily add or remove features by following established rules.

  2. Overview of the Photo Quick Uploader

    master

    The Photo Quick Uploader provides a popup UI and an editor plugin for SmartEditor2 that allows users to upload photos quickly while writing content.

    Implementation Requirements: To use this feature, developers must implement both:

    1. The editor's popup-related code.
    2. The server-side logic for handling file uploads.

    Note: This guide does not cover the specific methods for connecting the popup UI to your service.

  3. Features of jindo.FileUploader

    master

    The jindo.FileUploader component provides the following capabilities:

    • File Extension Filtering: You can specify the allowed file extensions that a user can select.
    • Immediate Upload: Files are transmitted automatically as soon as the user selects them.
    • Error Handling: You can implement exception handling based on whether the file upload succeeds or fails.
    • Single File Limitation: The uploader supports selecting only one file at a time; simultaneous selection of multiple files is not supported.

  4. Key features of SmartEditor2

    master

    SmartEditor2 provides an enhanced WYSIWYG editing experience with several improvements over previous versions, focusing on UI design and content formatting capabilities.

    Improved Features

    • Enhanced UI Design: Font, font size, and line spacing settings have been moved from dropdown menus to a layer-based UI for better usability.
    • Advanced Color Selection: Provides a full color palette for text color and background color, moving beyond basic color charts.
    • Custom Line Spacing: Users can now manually input specific values for line spacing.
    • Expanded Quotation Styles: The number of available quotation styles has increased from 7 to 10.
    • Enhanced Table Formatting: In addition to border color and thickness, users can now set border styles and apply pre-defined table styles for easier decoration.

    New Features

    • Table Simple Editor: Allows for editing table styles even after the table has been inserted into the document.
    • TEXT Mode: In addition to the standard Editor (WYSIWYG) and HTML modes, a dedicated TEXT mode is available for writing simple plain text without complex formatting.

  5. Overview of SmartEditor2 editing modes

    master

    SmartEditor2 improves upon the features of SmartEditor Basic 0.3.17 and introduces multiple editing modes to support different workflows:

    • Editor mode (WYSIWYG): A visual 'What You See Is What You Get' interface for intuitive editing.
    • HTML mode: Allows direct editing of the underlying HTML source code.
    • TEXT mode: A plain text editing mode for simple content entry.

  6. Understand the three editing modes in SmartEditor2

    master

    SmartEditor2 provides three distinct editing modes that users can switch between using the tabs located at the bottom right of the editing area. These modes allow for different levels of content control and formatting:

    1. Editor Mode (WYSIWYG): A visual editing mode where users can use the toolbar functions to format text, insert images, and compose content as it will appear. This is the standard rich-text interface.
    2. HTML Mode: Allows users to edit the raw HTML code directly. When in this mode, the toolbar is disabled to prevent conflicts with manual code editing.
    3. TEXT Mode: A plain text mode. Switching to this mode from Editor or HTML mode will strip away all formatting, images, and HTML tags, leaving only the raw text content. The toolbar is also disabled in this mode.

  7. Understand the SmartEditor2 Iframe Structure

    master

    SmartEditor2 uses a nested Iframe architecture to isolate the editor environment. The structure consists of:

    1. Host Page: The page where the editor is integrated (e.g., SmartEditor2.html). This page calls the initialization function.
    2. Editor Container (Outer Iframe): An Iframe created by the initialization function that wraps the editor body.
    3. Editing Area (Inner Iframe): An Iframe inside the editor container that specifically hosts the content editing area, loaded via SmartEditor2Skin.html.

    This separation ensures that the styles and scripts of the host page do not interfere with the editor's editing environment.

  8. Photo Quick Uploader behavior in non-HTML5 browsers

    master

    In browsers that do not support HTML5, the Photo Quick Uploader allows users to upload one photo at a time. The upload process occurs without a page transition, and the success status is reported immediately.

    Implementation Detail: This component is built using jindo.FileUploader, a JavaScript library developed by NAVER. For detailed information on the underlying library, refer to the Jindo documentation or the jindo.FileUploader appendix in the SmartEditor2 guide.

  9. Define and name custom user handlers

    master

    Custom handlers in Husky plugins must be prefixed with $ON_ and follow specific naming conventions based on their purpose:

    • General Handlers: Use uppercase letters. Example: $ON_MY_HANDLER.
    • Browser Event Handlers: For handlers that respond directly to passed-through browser events, start the name with EVENT_. Example: $ON_EVENT_EDITING_AREA_KEYUP.
    • Message Handlers: For handlers that notify when a specific event has occurred (rather than performing a specific task), start the name with MSG_. Example: $ON_MSG_EDITOR_READY.

    Example: Implementing a custom action

    To implement a custom action (like inserting a date):

    1. Initialize the target element in _assignHTMLObjects.
    2. Assign the event in $ON_MSG_APP_READY using this.oApp.registerBrowserEvent(element, event, 'HANDLER_NAME').
    3. Define the handler as $ON_HANDLER_NAME and use this.oApp.exec("PASTE_HTML", [content]) to insert content into the editor.
    // 1. Assign event in $ON_MSG_APP_READY
this.oApp.registerBrowserEvent(this.oInputButton, 'click','PASTE_NOW_DATE');

// 2. Define the handler
$ON_PASTE_NOW_DATE : function(){
    this.oApp.exec("PASTE_HTML", [new Date()]);
}

  10. Third-party library dependencies

    master

    SmartEditor2 relies on the following third-party libraries for its core functionality:

    • Jindo: Used for DOM/Event handling and OOP-style code.
    • Jindo Component: Used for UI controls such as DragArea, LayerManager, and LazyLoading.

  11. Photo Quick Uploader behavior in HTML5 supported browsers

    master

    In browsers that support HTML5, the Photo Quick Uploader utilizes HTML5 Drag and Drop and the File API. This allows users to attach multiple photos simultaneously by dragging and dropping them into the designated area.

    Supported Browsers (as of Dec 2012):

    • Internet Explorer 10 or higher
    • Firefox 15 or higher
    • Chrome 22 or higher
    • Safari 5.1 or higher

  12. How to add or modify features in SmartEditor2

    master
    SmartEditor2 features are implemented as Husky plugins registered to the Husky Core. To add, modify, or delete features, you must develop within the Husky framework, which uses a message-passing architecture. The framework consists of the Husky engine, plugins, and skins. For deep implementation details, refer to the 'Husky Framework Programming Guide'.