2.34.0

README.md

@@ -294,6 +294,57 @@ suneditor.create('sample', {
 });
 ```
 
+<!-- ## Use mention plugin
+```javascript
+import { mention } from 'suneditor/dist/plugins';
+
+// implement your api to find the user to mention.
+mention.getItems = async function(term) {
+  return callApi('/users?q='+escape(term));
+}
+
+// renderItem shows a user in the list
+mention.renderItem = function(user) {
+  return '<span>' + user.name + '</span>';
+}
+
+// getId should return a unique id
+mention.getId = function(user) {
+  return user.id;
+}
+
+// getValue should return what you want to display in the editor
+mention.getValue = function(user) {
+  return '@' + user.name;
+}
+
+// getLinkHref should return the link target
+mention.getLinkHref = function(user) {
+  return user.profile;
+}
+
+let editor = suneditor.create('sample', {
+    plugins: [mention],
+    buttonList: [
+        ['mention']
+    ]
+})
+
+// if you would like to have this triggered when pressing @
+editor.core.callPlugin('mention');
+editor.onKeyDown = e => {
+  if (e.key === '@') {
+    editor.core.context.mention.open();
+    e.preventDefault();
+    e.stopPropagation();
+  }
+}
+
+// when saving changes from the editor you will want to obtain the mentions added
+let newMentions = editor.core.getMentions();
+
+``` -->
+
 ## Options
 ```java
 plugins: [
@@ -350,6 +401,7 @@ attributesWhitelist   : Add attributes whitelist of tags that should be kept und
                         }
 // Layout-------------------------------------------------------------------------------------------------------
 mode            : The mode of the editor ('classic', 'inline', 'balloon', 'balloon-always'). default: 'classic' {String}
+rtl             : If true, the editor is set to RTL(Right To Left) mode.   default: false {Boolean}
 toolbarWidth    : The width of the toolbar. Applies only when the editor mode is 
                   'inline' or 'balloon' mode.     default: 'auto' {Number|String}
 toolbarContainer: A custom HTML selector placing the toolbar inside.
@@ -367,6 +419,9 @@ iframeCSSFileName : Name or Array of the CSS file to apply inside the iframe.
                     Applied by searching by filename in the link tag of document,
                     or put the URL value (".css" can be omitted).   default: 'suneditor' {Array|String}
                     ex) '.+' or ['suneditor', 'http://suneditor.com/sample/css/sample.css', '.+\\.min\\.css']
+previewTemplate : A template of the "preview".
+                  The {{contents}} part in the HTML string is replaced with the contents of the editor. default: null {String}
+                  ex) "<h1>Preview Template</h1> {{contents}} <div>_Footer_</div>"
 codeMirror      : If you put the CodeMirror object as an option, you can do Codeview using CodeMirror. default: null {Object}
                   Use version 5.x.x // https://github.com/codemirror/CodeMirror
                   ex) codeMirror: CodeMirror // Default option
@@ -1006,10 +1061,11 @@ editor.onCut = function (e, clipboardData, core) { console.log('onCut', e) }
 // If it returns false, it stops without executing the rest of the action.
 /**
  * e: Event object
- * dataTransfer: e.dataTransfer
+ * cleanData: HTML string modified for editor format
+ * maxCharCount: maxChartCount option (true if max character is exceeded)
  * core: Core object
  */
-editor.onDrop = function (e, core) { console.log('onDrop', e) }
+editor.onDrop = function (e, cleanData, maxCharCount, core) { console.log('onDrop', e) }
 
 // Called before the image is uploaded
 // If false is returned, no image upload is performed.

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "suneditor",
-  "version": "2.33.3",
+  "version": "2.34.0",
   "description": "Pure JavaScript based WYSIWYG web editor",
   "main": "src/suneditor.js",
   "keywords": [

package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "./src/assets/css/*.css"
   ],
-  "version": "2.33.3",
+  "version": "2.34.0",
   "description": "Pure JavaScript based WYSIWYG web editor",
   "main": "src/suneditor.js",
   "keywords": [

sample/html/options.html

@@ -89,9 +89,9 @@ <h4 style="color: #b94a48;">--Layout</h4>
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
             <label>Language&nbsp;&nbsp;</label>
             <select id="language">
+                <option value="ckb">ckb</option>
                 <option value="da">da</option>
                 <option value="de">de</option>
-                <option value="ckb">ckb</option>
                 <option value="en" selected>en</option>
                 <option value="es">es</option>
                 <option value="fr">fr</option>
@@ -106,6 +106,8 @@ <h4 style="color: #b94a48;">--Layout</h4>
                 <option value="zh_cn">zh_cn</option>
             </select>
             <br><br>
+            <label><input type="checkbox" id="rtl">&nbsp;&nbsp;rtl (Right To Left)</label>
+            <br><br>
             <label><input type="checkbox" id="toolbarWidth">&nbsp;&nbsp;toolbarWidth</label>
             <input type="text" id="toolbarWidth_value" placeholder="Number, ...px, ...%">
             <br><br>
@@ -119,8 +121,16 @@ <h4 style="color: #b94a48;">--Layout</h4>
             <label><input type="checkbox" id="iframeCSSFileName">&nbsp;&nbsp;iframeCSSFileName</label>
             <input type="text" id="iframeCSSFileName_value" placeholder="String (suneditor)">
             <br><br>
+            <label><input type="checkbox" id="previewTemplate">&nbsp;&nbsp;previewTemplate</label><br>
+            <textarea id="previewTemplate_value" placeholder='&lt;h1&gt;Preview&lt;/h1&gt; {{contents}} &lt;div&gt;_Footer_&lt;/div&gt;' style="width: 420px; height: 100px; vertical-align: top;">
+<h1>Preview</h1>
+{{contents}}
+<div>_Footer_</div>
+            </textarea>
+            <br><br>
             <label><input type="checkbox" id="codeMirror">&nbsp;&nbsp;codeMirror</label> { codeMirror: CodeMirror }<br>
             <label><input type="checkbox" id="katex" checked disabled>&nbsp;&nbsp;katex</label> { katex: katex } // Use "math" plugin
+            <br><br>
 
             <br>
             <h4 style="color: #b94a48;">--Display</h4>
@@ -433,9 +443,9 @@ <h2 class="sub-title">Applied options</h2>
 }
 </style>
 <!-- languages -->
+<script src="../../src/lang/ckb.js"></script>
 <script src="../../src/lang/da.js"></script>
 <script src="../../src/lang/de.js"></script>
-<script src="../../src/lang/ckb.js"></script>
 <script src="../../src/lang/en.js"></script>
 <script src="../../src/lang/es.js"></script>
 <script src="../../src/lang/fr.js"></script>
@@ -477,12 +487,14 @@ <h2 class="sub-title">Applied options</h2>
             'input': 'checked'
         },
         mode: modeSelect.options[modeSelect.selectedIndex].value,
+        rtl: document.getElementById('rtl').checked,
         toolbarWidth: document.getElementById('toolbarWidth').checked ? document.getElementById('toolbarWidth_value').value : undefined,
         toolbarContainer: document.getElementById('toolbarContainer').checked ? '#custom_toolbar' : undefined,
         stickyToolbar: document.getElementById('stickyToolbar').checked ? document.getElementById('stickyToolbar_value').value : undefined,
         iframe: document.getElementById('iframe').checked ? true : undefined,
         fullPage: document.getElementById('fullPage').checked? true : undefined,
         iframeCSSFileName: document.getElementById('iframeCSSFileName').checked ? document.getElementById('iframeCSSFileName_value').value : undefined,
+        previewTemplate: document.getElementById('previewTemplate').checked ? document.getElementById('previewTemplate_value').value.replace(/\n/g, '') : undefined,
         codeMirror: document.getElementById('codeMirror').checked ? CodeMirror : undefined,
         katex: katex,
         position: document.getElementById('position').checked ? document.getElementById('position_value').value : undefined,

sample/html/out/document-editor.html

@@ -959,6 +959,63 @@ <h4 class="name" id="controllersOff"><span class="type-signature"></span>control
             <dl class="details"></dl>
 
 
+            <h4 class="name" id="setControllerPosition"><span class="type-signature"></span>setControllerPosition<span
+                    class="signature">(controller, referEl, position, addOffset)</span><span class="type-signature"></span></h4>
+            <div class="description">
+                Specify the position of the controller.
+            </div>
+            <h5>Parameters:</h5>
+            <table class="params">
+                <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Type</th>
+                    <th class="last">Description</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td class="name"><code>controller</code></td>
+                    <td class="type">
+                        <span class="param-type">Element</span>
+                    </td>
+                    <td class="description last">Controller element</td>
+                </tr>
+                <tr>
+                    <td class="name"><code>referEl</code></td>
+                    <td class="type">
+                        <span class="param-type">Element</span>
+                    </td>
+                    <td class="description last">Element that is the basis of the controller's position</td>
+                </tr>
+                <tr>
+                    <td class="name"><code>position</code></td>
+                    <td class="type">
+                        <span class="param-type">String</span>
+                    </td>
+                    <td class="description last">
+                        Type of position (<span style="color:#ff5565">"top" | "bottom"</span>)<br>
+                        When using the "top" position, there should not be an arrow on the controller.<br>
+                        When using the "bottom" position there should be an arrow on the controller.
+                    </td>
+                </tr>
+                <tr>
+                    <td class="name"><code>addOffset</code></td>
+                    <td class="type">
+                        <span class="param-type">Object</span>
+                    </td>
+                    <td class="description last">
+                        These are the left and top values that need to be added specially.<br>
+                        This argument is required. - <span style="color:#ff5565">{left: 0, top: 0}</span><br>
+                        Please enter the value based on ltr mode.<br>
+                        Calculated automatically in rtl mode.
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+            <dl class="details"></dl>
+
+
             <h4 class="name" id="eventStop"><span class="type-signature"></span>eventStop<span class="signature">(e)</span><span
                     class="type-signature"></span></h4>
             <div class="description">
@@ -2185,6 +2242,7 @@ <h3>core</h3>
         <li><a href="document-editor.html#containerOff">containerOff</a></li>
         <li><a href="document-editor.html#controllersOn">controllersOn</a></li>
         <li><a href="document-editor.html#controllersOff">controllersOff</a></li>
+        <li><a href="document-editor.html#setControllerPosition">setControllerPosition</a></li>
         <li><a href="document-editor.html#eventStop">eventStop</a></li>
         <li><a href="document-editor.html#execCommand">execCommand</a></li>
         <li><a href="document-editor.html#nativeFocus">nativeFocus</a></li>

sample/html/out/document-user.html

@@ -740,7 +740,7 @@ <h4 class="name" id="onKeyUp"><span class="type-signature"></span>onKeyUp<span
 
 
             <h4 class="name" id="onDrop"><span class="type-signature"></span>onDrop<span
-                    class="signature">(event, core)</span><span class="type-signature"></span></h4>
+                    class="signature">(event, cleanData, maxCharCount, core)</span><span class="type-signature"></span></h4>
             <div class="description">
                 Drop event
             </div>
@@ -760,6 +760,20 @@ <h4 class="name" id="onDrop"><span class="type-signature"></span>onDrop<span
                     </td>
                     <td class="description last">Event Object</td>
                 </tr>
+                <tr>
+                    <td class="name"><code>cleanData</code></td>
+                    <td class="type">
+                        <span class="param-type">String</span>
+                    </td>
+                    <td class="description last">HTML string modified for editor format</td>
+                </tr>
+                <tr>
+                    <td class="name"><code>maxCharCount</code></td>
+                    <td class="type">
+                        <span class="param-type">Boolean</span>
+                    </td>
+                    <td class="description last">maxCharCount option (true if max character is exceeded)</td>
+                </tr>
                 <tr>
                     <td class="name"><code>core</code></td>
                     <td class="type">

src/assets/css/suneditor-contents.css

@@ -11,7 +11,6 @@
     font-size: 13px;
     color: #333;
     line-height: 1.5;
-    text-align: left;
     background-color: #fff;
     word-break: normal;
     word-wrap: break-word;
@@ -28,6 +27,11 @@
     color: inherit;
 }
 
+/* RTL - editable */
+.sun-editor-editable.se-rtl * {
+    direction: rtl;
+}
+
 /** controllers on tag */
 .sun-editor-editable td, .sun-editor-editable th, 
 .sun-editor-editable figure, .sun-editor-editable figcaption, .sun-editor-editable img, 
@@ -93,6 +97,7 @@
 
 /* ol, ul */
 .sun-editor-editable ol {
+    list-style-position: inside;
     display: block;
     list-style-type: decimal;
     margin-block-start: 1em;
@@ -102,6 +107,7 @@
     padding-inline-start: 40px;
 }
 .sun-editor-editable ul {
+    list-style-position: inside;
     display: block;
     list-style-type: disc;
     margin-block-start: 1em;
@@ -172,10 +178,11 @@
     border-width: 0;
     padding-top: 0;
     padding-bottom: 0;
+    border-color: #b1b1b1;
     padding-left: 20px;
     padding-right: 5px;
     border-left-width: 5px;
-    border-color: #b1b1b1;
+    border-right-width: 0px;
 }
 .sun-editor-editable blockquote blockquote {
     border-color: #c1c1c1;
@@ -186,6 +193,13 @@
 .sun-editor-editable blockquote blockquote blockquote blockquote {
     border-color: #e1e1e1;
 }
+/* RTL - blockquote */
+.sun-editor-editable.se-rtl blockquote {
+    padding-left: 5px;
+    padding-right: 20px;
+    border-left-width: 0px;
+    border-right-width: 5px;
+}
 
 /* h1 */
 .sun-editor-editable h1 {
@@ -278,6 +292,12 @@
     border-spacing: 0;
     border-collapse: collapse;
 }
+
+/* RTL - table */
+.sun-editor-editable.se-rtl table {
+    margin: 0 0 10px auto;
+}
+
 .sun-editor-editable table thead {
     border-bottom: 2px solid #333;
 }