feat: setHtml

wangeditor-team · May 17, 2022 · f4f91b8 · f4f91b8
1 parent f63cd3c
commit f4f91b8
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 1 deletion.
diff --git a/packages/core/__tests__/editor/plugins/with-content.test.ts b/packages/core/__tests__/editor/plugins/with-content.test.ts
@@ -330,4 +330,42 @@ describe('editor content API', () => {
     const pList = editor.getElemsByTypePrefix('paragraph')
     expect(pList.length).toBe(2)
   })
+
+  describe('setHtml', () => {
+    it('setHtml normal', () => {
+      const editor = createEditor({ html: '<div>hello</div>' })
+      editor.select(getStartLocation(editor))
+
+      const newHtml = '<div>world</div>'
+      editor.setHtml(newHtml)
+
+      expect(editor.getHtml()).toBe(newHtml)
+    })
+
+    it('setHtml blur', () => {
+      const editor = createEditor({
+        html: '<div>hello</div>',
+        autoFocus: false,
+      })
+      expect(editor.isFocused()).toBe(false)
+
+      const newHtml = '<div>world</div>'
+      editor.setHtml(newHtml)
+
+      expect(editor.getHtml()).toBe(newHtml)
+      expect(editor.isFocused()).toBe(false)
+    })
+
+    it('setHtml disabled', () => {
+      const editor = createEditor({ html: '<div>hello</div>' })
+      editor.disable()
+      expect(editor.isDisabled()).toBe(true)
+
+      const newHtml = '<div>world</div>'
+      editor.setHtml(newHtml)
+
+      expect(editor.getHtml()).toBe(newHtml)
+      expect(editor.isDisabled()).toBe(true)
+    })
+  })
 })
diff --git a/packages/core/src/editor/interface.ts b/packages/core/src/editor/interface.ts
@@ -36,6 +36,7 @@ export interface IDomEditor extends Editor {
   isEmpty: () => boolean
   clear: () => void
   dangerouslyInsertHtml: (html: string) => void
+  setHtml: (html: string) => void
 
   // dom 相关
   id: string

diff --git a/packages/core/src/editor/plugins/with-content.ts b/packages/core/src/editor/plugins/with-content.ts
@@ -309,5 +309,43 @@ export const withContent = <T extends Editor>(editor: T) => {
     $div.remove()
   }
 
+  /**
+   * 重置 HTML 内容
+   * @param html html string
+   */
+  e.setHtml = (html: string = '') => {
+    if (!html) return
+
+    // 记录编辑器当前状态
+    const isEditorDisabled = e.isDisabled()
+    const isEditorFocused = e.isFocused()
+    const editorSelectionStr = JSON.stringify(e.selection)
+
+    // 删除并重新设置 HTML
+    e.enable()
+    e.focus()
+    e.select([])
+    e.deleteFragment()
+    Transforms.setNodes(editor, { type: 'paragraph' }, { mode: 'highest' })
+    e.dangerouslyInsertHtml(html)
+
+    // 恢复编辑器状态
+    if (!isEditorFocused) {
+      e.deselect()
+      e.blur()
+    }
+    if (isEditorDisabled) {
+      e.deselect()
+      e.disable()
+    }
+    if (e.isFocused()) {
+      try {
+        e.select(JSON.parse(editorSelectionStr)) // 选中原来的位置
+      } catch (ex) {
+        e.select(Editor.start(e, [])) // 选中开始
+      }
+    }
+  }
+
   return e
 }
diff --git a/packages/editor/examples/parse-html.html b/packages/editor/examples/parse-html.html
@@ -21,6 +21,7 @@
 
   <div style="margin: 10px 0;">
     <button id="btn-create">创建编辑器</button>
+    <button id="btn-set-html">setHtml</button>
     （如有 JS 报错，再次创建时要刷新页面）
   </div>
   <div>
@@ -49,6 +50,14 @@
       })
     })
 
+      // setHtml
+      document.getElementById('btn-set-html').addEventListener('click', () => {
+        if (!editor) alert('editor 尚未创建')
+
+        const html = textarea.value
+        editor.setHtml(html)
+      })
+
     // 填入 v4 html
     document.getElementById('btn-v4-html').addEventListener('click', () => {
       textarea.value = `<p>你好&nbsp;<font size="6">世界</font> <font face="黑体">黑体文字</font>！</p>

diff --git a/packages/video-module/src/module/render-elem.tsx b/packages/video-module/src/module/render-elem.tsx
@@ -30,7 +30,6 @@ function renderVideo(elemNode: Element, children: VNode[] | null, editor: IDomEd
       <div
         className="w-e-textarea-video-container"
         data-selected={selected ? 'true' : ''} // 标记为 选中
-        on-click={e => console.log(123)}
       >
         <video controls>
           <source src={src} type="video/mp4" />