Socket
Socket
Sign inDemoInstall

@toast-ui/editor-plugin-uml

Package Overview
Dependencies
1
Maintainers
2
Versions
6
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @toast-ui/editor-plugin-uml

TOAST UI Editor : UML Plugin


Version published
Weekly downloads
1.1K
increased by12.02%
Maintainers
2
Install size
305 kB
Created
Weekly downloads
 

Readme

Source

TOAST UI Editor : UML Plugin

This is a plugin of TOAST UI Editor to render UML.

npm version

uml

🚩 Table of Contents

📁 Bundle File Structure

Files Distributed on npm

- node_modules/
  - @toast-ui/
    - editor-plugin-uml/
      - dist/
        - toastui-editor-plugin-uml.js

Files Distributed on CDN

The bundle files include all dependencies of this plugin.

- uicdn.toast.com/
  - editor-plugin-uml/
    - latest/
      - toastui-editor-plugin-uml.js
      - toastui-editor-plugin-uml.min.js

📦 Usage npm

To use the plugin, @toast-ui/editor must be installed.

Ref. Getting Started

Install

$ npm install @toast-ui/editor-plugin-uml

Import Plugin

ES Modules
import uml from '@toast-ui/editor-plugin-uml';
CommonJS
const uml = require('@toast-ui/editor-plugin-uml');

Create Instance

Basic
import Editor from '@toast-ui/editor';
import uml from '@toast-ui/editor-plugin-uml';

const editor = new Editor({
  // ...
  plugins: [uml]
});
With Viewer
import Viewer from '@toast-ui/editor/dist/toustui-editor-viewer';
import uml from '@toast-ui/editor-plugin-uml';

const viewer = new Viewer({
  // ...
  plugins: [uml]
});

or

import Editor from '@toast-ui/editor';
import uml from '@toast-ui/editor-plugin-uml';

const viewer = Editor.factory({
  // ...
  plugins: [uml],
  viewer: true
});

🗂 Usage CDN

To use the plugin, the CDN files(CSS, Script) of @toast-ui/editor must be included.

Include Files

...
<body>
  ...
  <!-- Editor -->
  <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
  <!-- Editor's Plugin -->
  <script src="https://uicdn.toast.com/editor-plugin-uml/latest/toastui-editor-plugin-uml.min.js"></script>
  ...
</body>
...

Create Instance

Basic
const { Editor } = toastui;
const { uml } = Editor.plugin;

const editor = new Editor({
  // ...
  plugins: [uml]
});
With Viewer
const Viewer = toastui.Editor;
const { uml } = Viewer.plugin;

const viewer = new Viewer({
  // ...
  plugins: [uml]
});

or

const { Editor } = toastui;
const { uml } = Editor.plugin;

const viewer = Editor.factory({
  // ...
  plugins: [uml],
  viewer: true
});

[Optional] Use Plugin with Options

The uml plugin can set options when used. Just add the plugin function and options related to the plugin to the array([pluginFn, pluginOptions]) and push them to the plugins option of the editor.

The following option is available in the uml plugin.

NameTypeDefault ValueDescription
rendererURLstring'http://www.plantuml.com/plantuml/png/'URL of plant uml renderer
// ...

import Editor from '@toast-ui/editor';
import uml from '@toast-ui/editor-plugin-uml';

const umlOptions = {
  rendererURL: // ...
};

const editor = new Editor({
  // ...
  plugins: [[uml, umlOptions]]
});

Keywords

FAQs

Last updated on 07 Jul 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc