feat: add onselectionchange api

wangeditor-team · Jul 1, 2021 · afa36a8 · afa36a8
1 parent 0de9eb6
commit afa36a8
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 264 deletions.
diff --git a/.history/src/menus/list/utils_20210502093317.ts b/.history/src/menus/list/utils_20210502093317.ts
diff --git a/.history/src/menus/list/utils_20210502093600.ts b/.history/src/menus/list/utils_20210502093600.ts
diff --git a/examples/selection-change.html b/examples/selection-change.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>wangEditor example</title>
+    <style>
+    </style>
+</head>
+
+<body>
+    <p>
+        wangEditor demo
+    </p>
+    <div id="div1">
+        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
+    </div>
+
+    <div id="div2">
+        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
+    </div>
+
+    <script src="../dist/wangEditor.js"></script>
+    <script>
+        // 改为使用var声明，才能在window对象上获取到编辑器实例，方便e2e测试
+        var E = window.wangEditor
+        var editor = new E('#div1')
+        editor.config.onSelectionChange = function (newHtml) {
+            console.log('editor', newHtml)
+        }
+        editor.create()
+
+        // setTimeout(() => {
+        //     console.log("摧毁了")
+        //     editor.destroy()
+        // }, 3000)
+
+        // var editor2 = new E('#div2')
+        // editor2.config.onSelectionChange = function (newHtml) {
+        //     console.log('editor2', newHtml)
+        // }
+        // editor2.create()
+
+        // setTimeout(() => {
+        //     console.log("摧毁了")
+        //     editor2.destroy()
+        // }, 3000)
+    </script>
+</body>
+
+</html>
diff --git a/src/config/index.ts b/src/config/index.ts
@@ -49,6 +49,7 @@ export type ConfigType = {
     pasteTextHandle: Function
     styleWithCSS: boolean
     linkImgCallback: Function
+    onSelectionChange: Function
 
     placeholder: string
     zIndexFullScreen: number

diff --git a/src/editor/index.ts b/src/editor/index.ts
@@ -20,6 +20,7 @@ import ZIndex from './z-index'
 import Change from './change/index'
 import History from './history/index'
 import disableInit from './disable'
+import SelectionChange from './selection-change'
 
 import initPlugins, { RegisterOptions, pluginsListType, registerPlugin } from '../plugins'
 
@@ -70,6 +71,7 @@ class Editor {
     public change: Change
     public history: History
     public isEnable: Boolean
+    public onSelectionChange: SelectionChange
 
     // 实例销毁前需要执行的钩子集合
     private beforeDestroyHooks: Function[] = []
@@ -113,6 +115,7 @@ class Editor {
         this.zIndex = new ZIndex()
         this.change = new Change(this)
         this.history = new History(this)
+        this.onSelectionChange = new SelectionChange(this)
 
         const { disable, enable } = disableInit(this)
         this.disable = disable

diff --git a/src/editor/selection-change/index.ts b/src/editor/selection-change/index.ts
@@ -0,0 +1,42 @@
+/**
+ * @description range变化
+ * @author liuwei
+ */
+import Editor from '../index'
+export default class SelectionChange {
+    constructor(public editor: Editor) {
+        // 绑定的事件
+        const init = () => {
+            const activeElement = document.activeElement
+            if (activeElement === editor.$textElem.elems[0]) {
+                this.emit()
+            }
+        }
+
+        //  选取变化事件监听
+        window.document.addEventListener('selectionchange', init)
+
+        // 摧毁时移除监听
+        this.editor.beforeDestroy(() => {
+            window.document.removeEventListener('selectionchange', init)
+        })
+    }
+
+    public emit(): void {
+        // 执行rangeChange函数
+        const { onSelectionChange } = this.editor.config
+        if (onSelectionChange) {
+            const selection = this.editor.selection
+            selection.saveRange()
+            if (!selection.isSelectionEmpty())
+                onSelectionChange({
+                    // 当前文本
+                    text: selection.getSelectionText(),
+                    // 当前的html
+                    html: selection.getSelectionContainerElem()?.elems[0].innerHTML,
+                    // select对象
+                    selection: selection,
+                })
+        }
+    }
+}