feat(tinymce): add line height (#58)

* feat：add lineheight Co-authored-by: fengli <fengli@biaodianyun.com>

feat(tinymce): add line height (#58)
* feat：add lineheight Co-authored-by: fengli <fengli@biaodianyun.com>
接个吻开一枪 · GitHub
1 parent 1d47d8a4
Showing 3 changed files with 49 additions and 1 deletions
src/components/Tinymce/src/Editor.vue
src/components/Tinymce/src/lineHeight.js
src/components/Tinymce/src/toolbar.ts
@@ -23,6 +23,7 @@
   import { useScript } from '/@/hooks/web/useScript';
   import { snowUuid } from '/@/utils/uuid';
   import { bindHandlers } from './helper';
+  import LineHeight from './lineHeight';
  
   const CDN_URL = 'https://cdn.bootcdn.net/ajax/libs/tinymce/5.5.1';
  
@@ -69,6 +70,8 @@
           advlist_bullet_styles: 'square',
           advlist_number_styles: 'default',
           object_resizing: false,
+          fontsize_formats: '10px 11px 12px 14px 16px 18px 20px 24px 36px 48px',
+          lineheight_formats: "1 1.5 1.75 2.0 3.0 4.0 5.0",
           ...options,
           setup: (editor: any) => {
             editorRef.value = editor;
@@ -117,6 +120,7 @@
       }
  
       function initEditor() {
+        getTinymce().PluginManager.add('lineHeight', LineHeight(getTinymce()));
         getTinymce().init(unref(initOptions));
       }
  
+const LineHeight = function (e) {
+  e.PluginManager.add('lineheight', function (t, n, r) {
+    t.on('init', function () {
+      t.formatter.register({
+        lineheight: {
+          inline: 'span',
+          styles: {
+            'line-height': '%value',
+          },
+        },
+      });
+    });
+    t.ui.registry.addMenuButton('lineheight', {
+      icon: 'lineheight',
+      tooltip: '设置行高',
+      fetch: function (callback) {
+        var dom = t.dom;
+        var blocks = t.selection.getSelectedBlocks();
+        var lhv = 0;
+        global$1.each(blocks, function (block) {
+          if (lhv == 0) {
+            lhv = dom.getStyle(block, 'line-height') ? dom.getStyle(block, 'line-height') : 0;
+          }
+        });
+        var items = lineheight_val.split(' ').map(function (item) {
+          var text = item;
+          var value = item;
+          return {
+            type: 'togglemenuitem',
+            text: text,
+            active: lhv == value ? true : false,
+            onAction: function () {
+              doAct(value);
+            },
+          };
+        });
+        callback(items);
+      },
+    });
+  });
+  e.PluginManager.requireLangPack('lineheight', 'de');
+};
+
+export default LineHeight;
@@ -2,7 +2,7 @@
 // Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
  
 const toolbar = [
-  'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
+  'fontsizeselect lineheight searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
   'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen',
 ];