feat(rich-text-editor): add font-size selection (#448)

Co-authored-by: 常浩-BJS21325 <changhao01@youdao>
opentiny · Aug 26, 2023 · c40bce0 · c40bce0
1 parent 3c714b7
commit c40bce0
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 6 deletions.
diff --git a/packages/renderless/src/rich-text-edtior/index.ts b/packages/renderless/src/rich-text-edtior/index.ts
@@ -78,4 +78,12 @@ export const handleClick = (state, box) => {
 export const shouldShow = ({ editor, view, state, oldState, from, to }) => {
   // 仅在无序列表选中的时候才显示 气泡菜单
   return editor.isActive("table");
-};
+};
+// font-size 设置
+export const handleFontSize = (fontSize) => {
+  return (value) => {
+    console.log('123', value);
+
+    fontSize.value = value + "px";
+  }
+}
diff --git a/packages/renderless/src/rich-text-edtior/vue.ts b/packages/renderless/src/rich-text-edtior/vue.ts
@@ -1,6 +1,6 @@
-import { handleChange, setLink, handleMove, handleClickOutside, removeClickOutside, handleClick, shouldShow } from './index'
+import { handleChange, setLink, handleMove, handleClickOutside, removeClickOutside, handleClick, shouldShow, handleFontSize } from './index'
 import Codehighlight from './code-highlight'
-export const api = ['state', 'setLink', 'handleChange', 'box', 'handleMove', 'handleClickOutside', 'removeClickOutside', 'handleClick', 'shouldShow']
+export const api = ['state', 'setLink', 'handleChange', 'box', 'handleMove', 'handleClickOutside', 'removeClickOutside', 'handleClick', 'shouldShow', 'handleFontSize', 'fontSize']
 export const renderless = (
   props,
   { computed, onMounted, onBeforeUnmount, reactive, ref },
@@ -88,6 +88,7 @@ export const renderless = (
   })
 
   const box = ref(null)
+  const fontSize = ref('16px')
   const state = reactive({
     editor: null,
     // table 变量
@@ -108,6 +109,9 @@ export const renderless = (
     handleClick: handleClick(state, box),
     // bubble 菜单
     shouldShow: shouldShow,
+    //
+    fontSize,
+    handleFontSize: handleFontSize(fontSize),
   }
   onBeforeUnmount(() => {
     state.editor.destroy()

diff --git a/packages/theme/src/rich-text-editor/index.less b/packages/theme/src/rich-text-editor/index.less
@@ -21,8 +21,11 @@
     background: transparent;
     cursor: pointer;
 
-    &:not(:disabled):hover, &.is-active {
-      svg, path {
+    &:not(:disabled):hover,
+    &.is-active {
+
+      svg,
+      path {
         fill: var(--ti-rich-text-editor-button-hover);
       }
     }
@@ -210,6 +213,34 @@
   }
 }
 
+.tiny-rich-text-editor {
+  .font-size-box {
+    position: relative;
+
+    .font-size-options {
+      display: none;
+      position: absolute;
+      border-radius: 0.4rem;
+      background-color: #dfdede;
+
+      button {
+        color: black;
+        margin: 0;
+        text-align: center;
+      }
+    }
+
+    &:hover {
+      background-color: #d2e4ff;
+
+      .font-size-options {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+}
+
 // 富文本编辑器的主题区域，需要对高度进行调整，达到融为一体
 .tiny-rich-text-editor__container {
   overflow: auto;

diff --git a/packages/vue/src/rich-text-editor/src/pc.vue b/packages/vue/src/rich-text-editor/src/pc.vue
@@ -9,6 +9,18 @@
       >
         <TinyIconRichTextBold></TinyIconRichTextBold>
       </button>
+      <button class="font-size-box">
+        <TinyIconRichTextFontSize></TinyIconRichTextFontSize>
+        <div class="font-size-options">
+          <button @click="handleFontSize(12)">12px</button>
+          <button @click="handleFontSize(14)">14px</button>
+          <button @click="handleFontSize(16)">16px</button>
+          <button @click="handleFontSize(18)">18px</button>
+          <button @click="handleFontSize(20)">20px</button>
+          <button @click="handleFontSize(24)">24px</button>
+          <button @click="handleFontSize(30)">30px</button>
+        </div>
+      </button>
       <button title="link" @click="setLink" :class="{ 'is-active': state.editor?.isActive('link') }">
         <TinyIconRichTextLink></TinyIconRichTextLink>
       </button>
@@ -258,7 +270,7 @@
         </button>
       </BubbleMenu>
     </div>
-    <div class="tiny-rich-text-editor__container">
+    <div class="tiny-rich-text-editor__container" :style="{ fontSize: fontSize }">
       <EditorContent :editor="state.editor"></EditorContent>
     </div>
   </div>