Skip to content
Permalink
Browse files

feat: customize toolbar (ref #85) (#124)

* feat: add getToolbar api to defaultUI
* feat: toolbar customization
* refactor: apply code review
* feat: add toolbar item factory
* feat: toolbar add/insert item by name/options
* feature: set toolbar items from editor options
  • Loading branch information...
kyuwoo-choi committed Apr 3, 2018
1 parent d522de0 commit cae38ea04fcacaba65d19e00f95684c0144de933
@@ -6,6 +6,8 @@
"transform-es2015-for-of", {"loose": true}
], [
"transform-es2015-spread", {"loose": true}
], [
"transform-class-properties", {"spec": true}
]],
"env": {
"modules": false,
@@ -2,6 +2,7 @@
"extends": [
"tui"
],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 7,
"sourceType": "module",

Some generated files are not rendered by default. Learn more.

@@ -27,6 +27,7 @@
"babel-eslint": "^8.1.2",
"babel-loader": "^7.1.2",
"babel-plugin-istanbul": "^4.1.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-es2015": "^6.24.1",
"clean-css": "^4.1.9",
"copy-webpack-plugin": "^4.5.1",
@@ -116,6 +116,7 @@ class ToastUIEditor {
* @param {boolean} useDefaultHTMLSanitizer - use default htmlSanitizer
* @param {string[]} options.codeBlockLanguages - supported code block languages to be listed
* @param {boolean} [options.usageStatistics=true] - send hostname to google analytics
* @param {object[]} [options.toolbarItems] - toolbar items
*/
constructor(options) {
this.options = $.extend({
@@ -127,7 +128,26 @@ class ToastUIEditor {
useDefaultHTMLSanitizer: true,
useCommandShortcut: true,
codeBlockLanguages: CodeBlockManager.getHighlightJSLanguages(),
usageStatistics: true
usageStatistics: true,
toolbarItems: [
'heading',
'bold',
'italic',
'strike',
'divider',
'hr',
'quote',
'ul',
'ol',
'task',
'divider',
'table',
'image',
'link',
'divider',
'code',
'codeblock'
]
}, options);

this.eventManager = new EventManager();
@@ -127,17 +127,21 @@ function colorSyntaxExtension(editor) {
* @ignore
*/
function initUI(editor, preset) {
const name = 'colorSyntax';
const className = 'tui-color';
const i18n = editor.i18n;
const toolbar = editor.getUI().getToolbar();

editor.eventManager.addEventType('colorButtonClicked');

editor.getUI().toolbar.addButton({
toolbar.addButton({
name,
className,
event: 'colorButtonClicked',
tooltip: i18n.get('Text color')
}, 4);
const $button = editor.getUI().toolbar.$el.find(`button.${className}`);
const colorSyntaxButtonIndex = toolbar.indexOfItem(name);
const $button = toolbar.getItem(colorSyntaxButtonIndex);

const $colorPickerContainer = $('<div />');

@@ -37,6 +37,8 @@ function scrollSyncExtension(editor) {

// UI
if (editor.getUI().name === 'default') {
const toolbar = editor.getUI().getToolbar();

// init button
button = new Button({
className,
@@ -45,8 +47,8 @@ function scrollSyncExtension(editor) {
$el: $(`<button class="active ${className}" type="button"></button>`)
});

$divider = editor.getUI().toolbar.addDivider();
editor.getUI().toolbar.addButton(button);
$divider = toolbar.addDivider();
toolbar.addButton(button);

changeButtonVisiblityStateIfNeed();
// hide scroll follow button in wysiwyg
@@ -2,14 +2,31 @@
* @fileoverview Implements UI Button
* @author NHN Ent. FE Development Lab <dl_javascript@nhnent.com>
*/
import UIController from './uicontroller';
import ToolbarItem from './toolbarItem';
import tooltip from './tooltip';

/**
* Class Button UI
* @extends {UIController}
* @extends {ToolbarItem}
* @deprecated
*/
class Button extends UIController {
class Button extends ToolbarItem {
/**
* item name
* @memberof Button
* @type {String}
* @static
*/
static name = 'button';

/**
* ToolbarItem className
* @type {String}
* @memberof Button
* @static
*/
static className = 'tui-toolbar-icons';

/**
* Creates an instance of Button.
* @param {object} options - button options
@@ -22,10 +39,14 @@ class Button extends UIController {
* @param {string} options.state - button state
* @memberof Button
*/
constructor(options) {
constructor(options = {
tagName: 'button',
name: Button.name
}) {
super({
name: options.name,
tagName: 'button',
className: `${options.className} tui-toolbar-icons`,
className: `${options.className} ${Button.className}`,
rootElement: options.$el
});

0 comments on commit cae38ea

Please sign in to comment.
You can’t perform that action at this time.