refactor: separate jquery plugin code (fix #1049)

nhn · Dec 21, 2017 · fdf286f · fdf286f
1 parent 80c0696
commit fdf286f
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 70 deletions.
diff --git a/demo/demo.html b/demo/demo.html
@@ -36,20 +36,18 @@
 <body>
 <div id="editSection"></div>
 <script>
-    $('#editSection').tuiEditor({
-        initialEditType: 'markdown',
-        previewStyle: 'vertical',
-        height: '300px',
-        exts: ['colorSyntax', 'table'],
-        contentCSSStyles: [
-            '../dist/tui-editor-contents.css'
-        ],
-        events: {
-            'load': function() {
-                console.log('editor Loaded');
-            }
+var editor = new tui.Editor({
+    el: document.querySelector('#editSection'),
+    initialEditType: 'markdown',
+    previewStyle: 'vertical',
+    height: '300px',
+    exts: ['colorSyntax', 'table'],
+    events: {
+        'load': function() {
+            console.log('yes');
         }
-    });
+    }
+});
 </script>
 </body>
 </html>
diff --git a/src/js/editor.js b/src/js/editor.js
@@ -67,6 +67,13 @@ import wwTask from './wysiwygCommands/task';
 import wwCode from './wysiwygCommands/code';
 import wwCodeBlock from './wysiwygCommands/codeBlock';
 
+// langs
+import './langs/en_US';
+import './langs/ko_KR';
+import './langs/zh_CN';
+import './langs/ja_JP';
+import './langs/nl_NL';
+
 const __nedInstance = [];
 
 /**
@@ -165,6 +172,8 @@ class ToastUIEditor {
         this.eventManager.emit('load', this);
 
         __nedInstance.push(this);
+
+        this._addDefaultCommands();
     }
 
     /**
@@ -187,6 +196,53 @@ class ToastUIEditor {
         this.commandManager.exec(...args);
     }
 
+    /**
+     * add default commands
+     * @memberof ToastUIEditor
+     * @private
+     */
+    _addDefaultCommands() {
+        this.addCommand(mdBold);
+        this.addCommand(mdItalic);
+        this.addCommand(mdBlockquote);
+        this.addCommand(mdHeading);
+        this.addCommand(mdParagraph);
+        this.addCommand(mdHR);
+        this.addCommand(mdAddLink);
+        this.addCommand(mdAddImage);
+        this.addCommand(mdUL);
+        this.addCommand(mdOL);
+        this.addCommand(mdTable);
+        this.addCommand(mdTask);
+        this.addCommand(mdCode);
+        this.addCommand(mdCodeBlock);
+        this.addCommand(mdStrike);
+
+        this.addCommand(wwBold);
+        this.addCommand(wwItalic);
+        this.addCommand(wwBlockquote);
+        this.addCommand(wwUL);
+        this.addCommand(wwOL);
+        this.addCommand(wwAddImage);
+        this.addCommand(wwAddLink);
+        this.addCommand(wwHR);
+        this.addCommand(wwHeading);
+        this.addCommand(wwParagraph);
+        this.addCommand(wwIncreaseDepth);
+        this.addCommand(wwDecreaseDepth);
+        this.addCommand(wwTask);
+        this.addCommand(wwTable);
+        this.addCommand(wwTableAddRow);
+        this.addCommand(wwTableAddCol);
+        this.addCommand(wwTableRemoveRow);
+        this.addCommand(wwTableRemoveCol);
+        this.addCommand(wwTableAlignCol);
+        this.addCommand(wwTableRemove);
+        this.addCommand(wwCode);
+        this.addCommand(wwCodeBlock);
+        this.addCommand(wwStrike);
+    }
+
     addCommand(type, props) {
         if (!props) {
             this.commandManager.addCommand(type);
@@ -685,46 +741,6 @@ class ToastUIEditor {
             tuiEditor = new ViewOnly(options);
         } else {
             tuiEditor = new ToastUIEditor(options);
-
-            tuiEditor.addCommand(mdBold);
-            tuiEditor.addCommand(mdItalic);
-            tuiEditor.addCommand(mdBlockquote);
-            tuiEditor.addCommand(mdHeading);
-            tuiEditor.addCommand(mdParagraph);
-            tuiEditor.addCommand(mdHR);
-            tuiEditor.addCommand(mdAddLink);
-            tuiEditor.addCommand(mdAddImage);
-            tuiEditor.addCommand(mdUL);
-            tuiEditor.addCommand(mdOL);
-            tuiEditor.addCommand(mdTable);
-            tuiEditor.addCommand(mdTask);
-            tuiEditor.addCommand(mdCode);
-            tuiEditor.addCommand(mdCodeBlock);
-            tuiEditor.addCommand(mdStrike);
-
-            tuiEditor.addCommand(wwBold);
-            tuiEditor.addCommand(wwItalic);
-            tuiEditor.addCommand(wwBlockquote);
-            tuiEditor.addCommand(wwUL);
-            tuiEditor.addCommand(wwOL);
-            tuiEditor.addCommand(wwAddImage);
-            tuiEditor.addCommand(wwAddLink);
-            tuiEditor.addCommand(wwHR);
-            tuiEditor.addCommand(wwHeading);
-            tuiEditor.addCommand(wwParagraph);
-            tuiEditor.addCommand(wwIncreaseDepth);
-            tuiEditor.addCommand(wwDecreaseDepth);
-            tuiEditor.addCommand(wwTask);
-            tuiEditor.addCommand(wwTable);
-            tuiEditor.addCommand(wwTableAddRow);
-            tuiEditor.addCommand(wwTableAddCol);
-            tuiEditor.addCommand(wwTableRemoveRow);
-            tuiEditor.addCommand(wwTableRemoveCol);
-            tuiEditor.addCommand(wwTableAlignCol);
-            tuiEditor.addCommand(wwTableRemove);
-            tuiEditor.addCommand(wwCode);
-            tuiEditor.addCommand(wwCodeBlock);
-            tuiEditor.addCommand(wwStrike);
         }
 
         return tuiEditor;

diff --git a/src/js/index.js b/src/js/index.js
@@ -6,13 +6,6 @@ import $ from 'jquery';
 
 import ToastUIEditor from './editor';
 
-// langs
-import './langs/en_US';
-import './langs/ko_KR';
-import './langs/zh_CN';
-import './langs/ja_JP';
-import './langs/nl_NL';
-
 // for jquery
 $.fn.tuiEditor = function(...args) {
     let options, instance;

diff --git a/src/js/langs/en_US.js b/src/js/langs/en_US.js
@@ -1,6 +1,6 @@
-import Editor from '../editor';
+import i18n from '../i18n';
 
-Editor.i18n.setLanguage(['en', 'en_US'], {
+i18n.setLanguage(['en', 'en_US'], {
     'Markdown': 'Markdown',
     'WYSIWYG': 'WYSIWYG',
     'Write': 'Write',

diff --git a/src/js/langs/ja_JP.js b/src/js/langs/ja_JP.js
@@ -1,6 +1,6 @@
-import Editor from '../editor';
+import i18n from '../i18n';
 
-Editor.i18n.setLanguage(['ja', 'ja_JP'], {
+i18n.setLanguage(['ja', 'ja_JP'], {
     'Markdown': 'マークダウン',
     'WYSIWYG': 'WYSIWYG',
     'Write': '編集する',

diff --git a/src/js/langs/ko_KR.js b/src/js/langs/ko_KR.js
@@ -1,6 +1,6 @@
-import Editor from '../editor';
+import i18n from '../i18n';
 
-Editor.i18n.setLanguage(['ko', 'ko_KR'], {
+i18n.setLanguage(['ko', 'ko_KR'], {
     'Markdown': '마크다운',
     'WYSIWYG': '위지윅',
     'Write': '편집하기',

diff --git a/src/js/langs/nl_NL.js b/src/js/langs/nl_NL.js
@@ -1,6 +1,6 @@
-import Editor from '../editor';
+import i18n from '../i18n';
 
-Editor.i18n.setLanguage(['nl', 'nl_NL'], {
+i18n.setLanguage(['nl', 'nl_NL'], {
     'Markdown': 'Markdown',
     'WYSIWYG': 'WYSIWYG',
     'Write': 'Write',

diff --git a/src/js/langs/zh_CN.js b/src/js/langs/zh_CN.js
@@ -1,6 +1,6 @@
-import Editor from '../editor';
+import i18n from '../i18n';
 
-Editor.i18n.setLanguage(['zh', 'zh_CN'], {
+i18n.setLanguage(['zh', 'zh_CN'], {
     'Markdown': 'Markdown',
     'WYSIWYG': '所见即所得',
     'Write': '编辑',