2.21.0

JiHong88 · Nov 10, 2019 · b5b66c6 · b5b66c6
2 parents b384eee + 0998c29
commit b5b66c6
Show file tree

Hide file tree

Showing 44 changed files with 572 additions and 293 deletions.
diff --git a/README.md b/README.md
@@ -28,6 +28,7 @@ Pure javscript based WYSIWYG web editor, with no dependencies
     - [Load only what you want](#1-load-only-what-you-want)
     - [Load all plugins](#2-load-all-plugins)
     - [Plugins can be used directly in the button list](#3-plugins-can-be-used-directly-in-the-button-list)
+    - [Plugins list](#4-plugins-list)
 - [Init function](#init-function)
 - [Use CodeMirror](#use-codemirror)
 - [Options](#options)
@@ -55,13 +56,13 @@ Pure javscript based WYSIWYG web editor, with no dependencies
 | Yes | Yes | Yes | Yes | Yes | 11+ |
 
 ## Install
-#### npm
+#### Npm
 ``` sh
-$ npm install --save suneditor
+$ npm install suneditor --save
 ```
-#### bower
+#### Bower
 ``` sh
-$ bower install --save suneditor
+$ bower install suneditor --save
 ```
 #### CDN
 ``` html
@@ -72,41 +73,29 @@ $ bower install --save suneditor
 ```
 [jsdelivr/suneditor](https://www.jsdelivr.com/package/npm/suneditor)
 
-[jsdelivr/suneditor-languages-list](https://www.jsdelivr.com/package/npm/suneditor?path=src%2Flang)
-
-
 ## Getting Started
-### 1. Include
-```html
-<!-- <link href="../src/assets/css/suneditor.css" rel="stylesheet"> -->
-<!-- <link  href="../src/assets/css/suneditor-contents.css" rel="stylesheet"> -->
-<link href="../dist/css/suneditor.min.css" rel="stylesheet">
-<script src="../dist/suneditor.min.js"></script>
-<script src="../src/lang/ko.js"></script>
-```
-
-### 2. Target Element
+### 1. Target Element
 ```html
 <textarea id="sample">Hi</textarea>
 ```
 
-### 3. Create
+### 2. Create
 ```javascript
 /**
 * ID : 'suneditor_sample'
 * ClassName : 'sun-eidtor'
 */
 // ID or DOM object
-const suneditor = SUNEDITOR.create((document.getElementById('sample') || 'sample'),{
+const editor = SUNEDITOR.create((document.getElementById('sample') || 'sample'),{
     // All of the plugins are loaded in the "window.SUNEDITOR" object in dist/suneditor.min.js file
     // Insert options
     // Language global object (default: en)
     lang: SUNEDITOR_LANG['ko']
 });
 ```
 
-### 4. Contents display
-```text
+### 3. Contents display
+```java
 When you display a document created by suneditor
 You need to include "src/assets/css/suneditor-contents.css" or "dist/css/suneditor.min.css" file.
 Then add "sun-editor-editable" to the class name of the Tag element that displays the content.
@@ -119,26 +108,21 @@ In "suneditor-contents.css", you can define the style of all the tags created in
 ```javascript
 import 'suneditor/dist/css/suneditor.min.css'
 import suneditor from 'suneditor'
-import {font, fontSize, fontColor, horizontalRule, list, image} from 'suneditor/src/plugins'
+
+// How to import plugins
+import image from 'suneditor/src/plugins/dialog/link'
+import list from 'suneditor/src/plugins/submenu/list'
+import {font, video} from 'suneditor/src/plugins'
+
 // How to import language files (default: en)
 import lang from 'suneditor/src/lang'
-import {en, ko} from 'suneditor/src/lang'
+import {ko} from 'suneditor/src/lang'
 import de from 'suneditor/src/lang/de'
 
 suneditor.create('sample', {
-    plugins: [
-        font,
-        fontSize,
-        fontColor,
-        horizontalRule,
-        link,
-        image,
-    ],
+    plugins: [font, video, image, list],
     buttonList: [
-        ['font', 'fontSize'],
-        ['fontColor'],
-        ['horizontalRule'],
-        ['link', 'image']
+        ['font', 'video', 'image', 'list']
     ],
     lang: lang.ko
 });
@@ -160,8 +144,8 @@ suneditor.create('sample', {
         '/', // Line break
         ['fontColor', 'hiliteColor'],
         ['outdent', 'indent'],
-        ['align', 'horizontalRule', 'list', 'table'],
-        ['link', 'image', 'video'],
+        ['align', 'horizontalRule', 'list', 'lineHeight'],
+        ['table', 'link', 'image', 'video'],
         ['fullScreen', 'showBlocks', 'codeView'],
         ['preview', 'print'],
         ['save', 'template']
@@ -170,14 +154,10 @@ suneditor.create('sample', {
 
 // You can also load what you want
 suneditor.create('sample', {
-    plugins: [
-        plugins.font
-        plugins.fontSize
-    ],
+    plugins: [plugins.font],
+    // Plugins can be used directly in the button list
     buttonList: [
-        ['font', 'fontSize'],
-        // Plugins can be used directly in the button list
-        [plugins.formatBlock]
+        ['font', plugins.image]
     ]
 })
 ```
@@ -187,25 +167,27 @@ suneditor.create('sample', {
 import 'suneditor/dist/css/suneditor.min.css'
 import suneditor from 'suneditor'
 import {align, font, fontSize, fontColor, hiliteColor, horizontalRule,
-        list, table, template, formatBlock, link, image, video} from 'suneditor/src/plugins'
+        list, lineHeight, table, template, formatBlock, link, image, video} from 'suneditor/src/plugins'
 
 suneditor.create('sample', {
     buttonList: [
-        ['undo', 'redo'],
+        ['undo', 'redo', 'removeFormat'],
         [font, fontSize, formatBlock],
-        ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
-        ['removeFormat'],
         [fontColor, hiliteColor],
-        ['outdent', 'indent'],
-        [align, horizontalRule, list, table],
-        [link, image, video],
-        ['fullScreen', 'showBlocks', 'codeView'],
-        ['preview', 'print'],
-        ['save', template]
+        [align, horizontalRule, list, lineHeight],
+        [table, link, image, video, template]
     ],
 })
 ```
 
+### 4. Plugins list
+```javascript
+'suneditor/src/plugins/dialog/...'
+// image, video, link
+'suneditor/src/plugins/submenu/...'
+// align, font, fontColor, fontSize, formatBlock, hiliteColor, horizontalRule, lineHeight, list, table, template
+```
+
 ## Init function
 ```text
 The init function can be used by predefining options and calling the create function on the returned object.
@@ -227,8 +209,8 @@ const initEditor = suneditor.init({
         'removeFormat',
         'fontColor', 'hiliteColor',
         'outdent', 'indent',
-        'align', 'horizontalRule', 'list', 'table',
-        'link', 'image', 'video',
+        'align', 'horizontalRule', 'list', 'lineHeight',
+        'table', 'link', 'image', 'video',
         'fullScreen', 'showBlocks', 'codeView',
         'preview', 'print', 'save', 'template']
     ]
@@ -284,6 +266,7 @@ suneditor.create('sample', {
 ## Options
 ```java
 plugins: [
+    // Submenu
     font,
     fontSize,
     formatBlock,
@@ -294,6 +277,7 @@ plugins: [
     list,
     table,
     template,
+    // Dialog
     link,
     image,
     video
@@ -363,15 +347,16 @@ fontSize        : Change default font-size array.                   default: [..
                   Default value: [
                     8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72
                   ]
+fontSizeUnit    : The font size unit.                               default: 'px' {String}
 formats         : Change default formatBlock array.                 default: [...] {Array}
                   Default value: [
-                      'p', 'div', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
+                    'p', 'div', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
                   ],
                   Custom: [{
-                      tag: 'div', // Tag name
-                      class: '__se__xxx' || null, // Class names must always begin with "__se__"
-                      title: 'Custom div' || null, // default: tag name
-                      command: 'replace' || 'range' // default: "replace"
+                    tag: 'div', // Tag name
+                    class: '__se__xxx' || null, // Class names must always begin with "__se__"
+                    title: 'Custom div' || null, // default: tag name
+                    command: 'replace' || 'range' // default: "replace"
                   }]
 colorList       : Change default color array of color picker.       default: [..[..]..] {Array}
                   Default value: [
@@ -386,6 +371,17 @@ colorList       : Change default color array of color picker.       default: [..
                     ['#ccc', '#dedede', 'OrangeRed', 'Orange', 'RoyalBlue', 'SaddleBrown'], // Line break
                     ['SlateGray', 'BurlyWood', 'DeepPink', 'FireBrick', 'Gold', 'SeaGreen']
                   ]
+lineHeights     : Change default line-height array.                 default: [{}..] {Array}
+                  Default value: [
+                    {text: '1', value: 1},
+                    {text: '1.15', value: 1.15},
+                    {text: '1.5', value: 1.5},
+                    {text: '2', value: 2}
+                  ]
+                  ex) [
+                    {text: 'Single', value: 1},
+                    {text: 'Double', value: 2}
+                  ]
 
 // Image---------------------------------------------------------------------------------------------------------
 imageResizing   : Can resize the image.                             default: true {Boolean}
@@ -450,8 +446,8 @@ buttonList      : Defines button list to array {Array}
                     // '/', Line break
                     // ['fontColor', 'hiliteColor'],
                     ['outdent', 'indent'],
-                    // ['align', 'horizontalRule', 'list', 'table'],
-                    // ['link', 'image', 'video'],
+                    // ['align', 'horizontalRule', 'list', 'lineHeight'],
+                    // ['table', 'link', 'image', 'video'],
                     ['fullScreen', 'showBlocks', 'codeView'],
                     ['preview', 'print'],
                     // ['save', 'template'],

diff --git a/bower.json b/bower.json
@@ -1,20 +1,21 @@
 {
   "name": "suneditor",
-  "version": "2.20.1",
+  "version": "2.21.0",
   "description": "Pure JavaScript based WYSIWYG web editor",
   "main": "src/suneditor.js",
   "keywords": [
     "wysiwyg",
-    "editor",
     "wysiwyg editor",
+    "wysiwyg html editor",
     "rich text",
     "rich editor",
     "rich text editor",
-    "web",
     "html",
+    "text",
+    "editor",
     "contenteditable",
-    "suneditor",
-    "javascript"
+    "javascript",
+    "vanillajs"
   ],
   "author": "JiHong.Lee",
   "license": "MIT",

diff --git a/dist/css/suneditor.min.css b/dist/css/suneditor.min.css
diff --git a/dist/fonts/35346ad776d5c48035b37d1ed3db6492.woff2 b/dist/fonts/35346ad776d5c48035b37d1ed3db6492.woff2
diff --git a/...onts/52b28fecb3b9616a5154d0226058600e.svg → ...onts/3dcfeab0340f382515dd099d58904434.svg b/...onts/52b28fecb3b9616a5154d0226058600e.svg → ...onts/3dcfeab0340f382515dd099d58904434.svg
diff --git a/dist/fonts/688522218ec6987e6fada6a165d490d7.woff2 b/dist/fonts/688522218ec6987e6fada6a165d490d7.woff2
diff --git a/dist/fonts/88c6360b19028a854eba4c2d5cfb047e.woff b/dist/fonts/88c6360b19028a854eba4c2d5cfb047e.woff
diff --git a/dist/fonts/8a2aa4c9fcb1e8fbf45305679b8f7a0e.woff b/dist/fonts/8a2aa4c9fcb1e8fbf45305679b8f7a0e.woff
diff --git a/...onts/655623c4c2d6d9092ba9f381e4042e8f.eot → ...onts/8f8e3d2dab572c888a49d78de853d9db.eot b/...onts/655623c4c2d6d9092ba9f381e4042e8f.eot → ...onts/8f8e3d2dab572c888a49d78de853d9db.eot
diff --git a/...onts/d314a75b315393089036e8be6f1e5965.ttf → ...onts/cb906337984d7f7c6d821fe2f77acad5.ttf b/...onts/d314a75b315393089036e8be6f1e5965.ttf → ...onts/cb906337984d7f7c6d821fe2f77acad5.ttf
diff --git a/dist/suneditor.min.js b/dist/suneditor.min.js
diff --git a/package.json b/package.json
@@ -3,21 +3,22 @@
   "sideEffects": [
     "./src/assets/css/*.css"
   ],
-  "version": "2.20.1",
+  "version": "2.21.0",
   "description": "Pure JavaScript based WYSIWYG web editor",
   "main": "src/suneditor.js",
   "keywords": [
     "wysiwyg",
-    "editor",
     "wysiwyg editor",
+    "wysiwyg html editor",
     "rich text",
     "rich editor",
     "rich text editor",
-    "web",
     "html",
+    "text",
+    "editor",
     "contenteditable",
-    "suneditor",
-    "javascript"
+    "javascript",
+    "vanillajs"
   ],
   "author": "JiHong.Lee",
   "license": "MIT",

diff --git a/sample/css/sample.css b/sample/css/sample.css
@@ -30,6 +30,7 @@ footer {
 
 /** badge */
 .badge {
+    width: 230px;
     padding: 10px 0;
     background-color: inherit;
  }

diff --git a/sample/html/customPlugins.html b/sample/html/customPlugins.html
@@ -11,8 +11,6 @@
     <link rel="stylesheet" href="../css/bootstrap.css" media="all">
     <link rel="stylesheet" href="../css/sample.css" media="all">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/3.0.1/github-markdown.min.css">
-    <!-- suneditor -->
-    <link href="../../dist/css/suneditor.min.css?v=2.20.1" rel="stylesheet" type="text/css">
 </head>
 <body>
 <nav class="navbar navbar-inverse">
@@ -175,7 +173,9 @@ <h4 class="sub-title">Add new plugin</h4>
 </div>
 
 <script src="../js/common.js"></script>
-<script src="../../dist/suneditor.min.js?v=2.20.1"></script>
+<!-- suneditor -->
+<link href="https://cdn.jsdelivr.net/npm/suneditor@latest/dist/css/suneditor.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/suneditor@latest/dist/suneditor.min.js"></script>
 <script>
     var pluginObject = {
         name: 'custom_plugin_submenu',

diff --git a/sample/html/examples.html b/sample/html/examples.html
@@ -11,14 +11,6 @@
     <link rel="stylesheet" href="../css/bootstrap.css" media="all">
     <link rel="stylesheet" href="../css/sample.css" media="all">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/3.0.1/github-markdown.min.css">
-    <!-- codeMirror -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/lib/codemirror.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/lib/codemirror.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/mode/htmlmixed/htmlmixed.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/mode/xml/xml.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/mode/css/css.js"></script>
-    <!-- suneditor -->
-    <link href="../../dist/css/suneditor.min.css?v=2.20.1" rel="stylesheet" type="text/css">
 </head>
 <body>
 <nav class="navbar navbar-inverse">
@@ -479,7 +471,15 @@
 </div>
 
 <script src="../js/common.js"></script>
-<script src="../../dist/suneditor.min.js?v=2.20.1"></script>
+<!-- suneditor -->
+<link href="https://cdn.jsdelivr.net/npm/suneditor@latest/dist/css/suneditor.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/suneditor@latest/dist/suneditor.min.js"></script>
+<!-- codeMirror -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/lib/codemirror.min.css">
+<script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/lib/codemirror.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/mode/htmlmixed/htmlmixed.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/mode/xml/xml.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/mode/css/css.js"></script>
 <script>
     SUNEDITOR.create('exampleOptions',{
         font : [