Notoriously Psychedelic Modules

    @toast-ui/jquery-editor

    2.5.4 • Public • Published

    TOAST UI Editor for jQuery

    This is a jQuery component wrapping TOAST UI Editor.

    npm version

    🚩 Table of Contents

    Collect Statistics on the Use of Open Source

    jQuery Wrapper of TOAST UI Editor applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI Editor is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. ui.toast.com) is to be collected and the sole purpose is nothing but to measure statistics on the usage. To disable GA, use the following usageStatistics options when declare jquery Wrapper component.

    const options = {
      ...
      usageStatistics: false
    }
    
    const editor = $('#editor').toastuiEditor(options);

    📁 Bundle File Structure

    Files distributed on npm

    - node_modules/
      - @toast-ui/
        - jquery-editor/
          - dist/
            - toastui-jquery-editor.js
            - toastui-jquery-editor-viewer.js
    

    Files distributed on CDN

    The bundle files provided by CDN include TOAST UI Editor(@toast-ui/editor).

    - uicdn.toast.com/
      - editor/
        - latest/
          - toastui-jquery-editor.js
          - toastui-jquery-editor.min.js
          - toastui-jquery-editor-viewer.js
          - toastui-jquery-editor-viewer.min.js
    

    📦 Usage npm

    Install

    $ npm install --save @toast-ui/jquery-editor

    Import

    You can use TOAST UI Editor for jQuery as a ECMAScript module or a CommonJS module. As this module does not contain CSS files, you should import toastui-editor.css from @toast-ui/editor and codemirror.css from CodeMirror in the script.

    • ES Modules
    import 'codemirror/lib/codemirror.css';
    import '@toast-ui/editor/dist/toastui-editor.css';
    
    import '@toast-ui/jquery-editor';
    • CommonJS
    require('codemirror/lib/codemirror.css');
    require('@toast-ui/editor/dist/toastui-editor.css');
    
    require('@toast-ui/jquery-editor');

    Creating Component

    Before creating the instance, add the element that will create the editor. And you must import jQuery before the wrapper.

    <body>
      <div id="editor"></div>
      ...
    </body>

    Using the Editor

    It can be used by using the toastuiEditor function. If the first parameter type is an object, you can create an instance of the Editor using this object as an option. And if the parameter type is string, you can call API function. The options and method APIs are the same as those of the editor.

    import 'codemirror/lib/codemirror.css';
    import '@toast-ui/editor/dist/toastui-editor.css';
    
    import $ from 'jquery';
    import '@toast-ui/jquery-editor';
    
    $('#editor').toastuiEditor({
      height: '500px',
      initialEditType: 'markdown',
      previewStyle: 'vertical'
    });
    
    const content = $('#editor').toastuiEditor('getHtml');
    
    console.log(content);

    The viewer option allows you to use it as a viewer.

    $('#viewer').toastuiEditor({
      // ...
      viewer: true
    });

    Using the Viewer

    If you want to use only the viewer, import the bundle file corresponding to the viewer.

    import 'codemirror/lib/codemirror.css';
    import '@toast-ui/editor/dist/toastui-editor.css';
    
    import $ from 'jquery';
    import '@toast-ui/jquery-editor/dist/toastui-jquery-editor-viewer';
    
    $('#viewer').toastuiEditor({
      height: '500px',
      initialValue: '# hello'
    });

    🗂 Usage CDN

    To use the wrapper, the jQuery's CDN file must be included.

    Including Files

    <body>
      ...
      <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
      <script src="https://uicdn.toast.com/editor/latest/toastui-jquery-editor.min.js"></script>
    </body>

    Creating Component

    Before creating the instance, add the element that will create the editor.

    <body>
      <div id="editor"></div>
      ...
    </body>

    Using Editor

    $('#editor').toastuiEditor({
      height: '500px',
      initialEditType: 'markdown',
      previewStyle: 'vertical'
    });

    The viewer option allows you to use it as a viewer.

    $('#viewer').toastuiEditor({
      // ...
      viewer: true
    });

    Using Viewer

    If you want to use only the viewer, include the following file:

    <script src="https://uicdn.toast.com/editor/latest/toastui-jquery-editor-viewer.min.js"></script>
    $('#viewer').toastuiEditor({
      height: '500px',
      initialValue: '# hello'
    });

    Install

    npm i @toast-ui/jquery-editor

    Homepage

    ui.toast.com

    DownloadsWeekly Downloads

    24

    Version

    2.5.4

    License

    MIT

    Unpacked Size

    18.7 kB

    Total Files

    5

    Last publish

    Collaborators

    • nhnent
    • codepink