TOAST UI Editor : Color Syntax Plugin

> This is a plugin of TOAST UI Editor to color editing text.


!color-syntax

🚩 Table of Contents

- Bundle File Structure
- Usage npm
- Usage CDN

📁 Bundle File Structure

$3

``
- node_modules/
- @toast-ui/
- editor-plugin-color-syntax/
- dist/
- toastui-editor-plugin-color-syntax.js
- toastui-editor-plugin-color-syntax.css
`

$3

The bundle files include all dependencies of this plugin.

`
- uicdn.toast.com/
- editor-plugin-color-syntax/
- latest/
- toastui-editor-plugin-color-syntax.js
- toastui-editor-plugin-color-syntax.min.js
- toastui-editor-plugin-color-syntax.css
- toastui-editor-plugin-color-syntax.min.css
`

📦 Usage npm

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

> Ref. Getting Started

$3

`sh
$ npm install @toast-ui/editor-plugin-color-syntax
`

$3

Along with the plugin, the plugin's dependency style must be imported. The color-syntax plugin has TOAST UI Color Picker as a dependency, and you need to add a CSS file of TOAST UI Color Picker.

#### ES Modules

`js
import 'tui-color-picker/dist/tui-color-picker.css';
import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css';

import colorSyntax from '@toast-ui/editor-plugin-color-syntax';
`

#### CommonJS

`js
require('tui-color-picker/dist/tui-color-picker.css');
require('@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css');

const colorSyntax = require('@toast-ui/editor-plugin-color-syntax');
`

$3

#### Basic

`js
// ...
import 'tui-color-picker/dist/tui-color-picker.css';
import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css';

import Editor from '@toast-ui/editor';
import colorSyntax from '@toast-ui/editor-plugin-color-syntax';

const editor = new Editor({
// ...
plugins: [colorSyntax]
});
`

🗂 Usage CDN

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

$3

`html
...

...
rel="stylesheet"
href="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.min.css"
/>
rel="stylesheet"
href="https://uicdn.toast.com/editor-plugin-color-syntax/latest/toastui-editor-plugin-color-syntax.min.css"
/>
...


...






...

...
`

$3

#### Basic

`js
const { Editor } = toastui;
const { colorSyntax } = Editor.plugin;

const editor = new Editor({
// ...
plugins: [colorSyntax]
});
`

$3

The color-syntax 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 options are available in the color-syntax plugin.

| Name | Type | Default Value | Description |
| ----------------- | ---------------- | ------------- | -------------------------------- |
| preset | Array. | | Preset for color palette |

`js
// ...
import 'tui-color-picker/dist/tui-color-picker.css';
import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css';

import Editor from '@toast-ui/editor';
import colorSyntax from '@toast-ui/editor-plugin-color-syntax';

const colorSyntaxOptions = {
preset: ['#181818', '#292929', '#393939']
};

const editor = new Editor({
// ...
plugins: [[colorSyntax, colorSyntaxOptions]]
});
``