From adffefd702688ba5fa8c5df616b8f3685a0fb778 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=8E=A5=E4=B8=AA=E5=90=BB=E5=BC=80=E4=B8=80=E6=9E=AA?=
 <30621502+OneKissAndOneShot@users.noreply.github.com>
Date: Mon, 26 Oct 2020 21:44:46 +0800
Subject: [PATCH] feat(tinymce): add line height (#58)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat：add lineheight

Co-authored-by: fengli <fengli@biaodianyun.com>
---
 src/components/Tinymce/src/Editor.vue    |  4 +++
 src/components/Tinymce/src/lineHeight.js | 44 ++++++++++++++++++++++++
 src/components/Tinymce/src/toolbar.ts    |  2 +-
 3 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Tinymce/src/lineHeight.js

diff --git a/src/components/Tinymce/src/Editor.vue b/src/components/Tinymce/src/Editor.vue
index 375872e1..d2303e2d 100644
--- a/src/components/Tinymce/src/Editor.vue
+++ b/src/components/Tinymce/src/Editor.vue
@@ -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));
       }
 
diff --git a/src/components/Tinymce/src/lineHeight.js b/src/components/Tinymce/src/lineHeight.js
new file mode 100644
index 00000000..1d8104f7
--- /dev/null
+++ b/src/components/Tinymce/src/lineHeight.js
@@ -0,0 +1,44 @@
+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;
diff --git a/src/components/Tinymce/src/toolbar.ts b/src/components/Tinymce/src/toolbar.ts
index 367dad72..96eb98fd 100644
--- a/src/components/Tinymce/src/toolbar.ts
+++ b/src/components/Tinymce/src/toolbar.ts
@@ -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',
 ];
 
-- 
GitLab