Components API

API reference for DocsJS UI components.

Web Component

Usage

<script type="module">
  import { defineDocsWordElement } from "@coding01/docsjs";
  defineDocsWordElement();
</script>

<docs-word-editor lang="en" show-toolbar></docs-word-editor>

Attributes

Attribute	Type	Default	Description
lang	string	'en'	UI language (en/zh)
show-toolbar	boolean	false	Show toolbar
profile	string	'default'	Processing profile
readonly	boolean	false	Read-only mode
placeholder	string	''	Placeholder text

Methods

loadHtml

loadHtml(html: string): Promise<void>

Load HTML content into the editor.

const editor = document.querySelector("docs-word-editor");
await editor.loadHtml("<p>Hello World</p>");

loadDocx

loadDocx(file: File): Promise<void>

Load a DOCX file into the editor.

const file = document.getElementById("file-input").files[0];
await editor.loadDocx(file);

loadClipboard

loadClipboard(): Promise<void>

Load content from the clipboard.

await editor.loadClipboard();

getSnapshot

getSnapshot(): string

Get the current HTML content.

const html = editor.getSnapshot();

clear

clear(): void

Clear the editor content.

editor.clear();

focus

focus(): void

Focus the editor.

editor.focus();

React Component

Import

import { WordFidelityEditorReact } from "@coding01/docsjs/react";

Props

Prop	Type	Default	Description
lang	string	'en'	UI language
showToolbar	boolean	false	Show toolbar
profile	string	'default'	Processing profile
config	EngineConfig	{}	Engine configuration
readonly	boolean	false	Read-only mode
placeholder	string	''	Placeholder text
className	string	''	CSS class name
style	CSSProperties	{}	Inline styles
onReady	() => void	-	Ready callback
onChange	(e: ChangeEvent) => void	-	Change callback
onError	(e: ErrorEvent) => void	-	Error callback

Example

import { useRef } from "react";
import { WordFidelityEditorReact } from "@coding01/docsjs/react";

function App() {
  const editorRef = useRef(null);

  const handleFileUpload = async (e) => {
    const file = e.target.files[0];
    if (file && editorRef.current) {
      await editorRef.current.loadDocx(file);
    }
  };

  return (
    <div>
      <input type="file" accept=".docx" onChange={handleFileUpload} />
      <WordFidelityEditorReact
        ref={editorRef}
        lang="en"
        showToolbar={true}
        onChange={(e) => console.log(e.htmlSnapshot)}
      />
    </div>
  );
}

Ref Methods

The ref provides access to all Web Component methods:

const editorRef = useRef(null);

// Access methods
await editorRef.current?.loadHtml(html);
await editorRef.current?.loadDocx(file);
const snapshot = editorRef.current?.getSnapshot();
editorRef.current?.clear();

Vue Component

Import

<script setup>
import { WordFidelityEditorVue } from "@coding01/docsjs/vue";
</script>

Props

Prop	Type	Default	Description
lang	string	'en'	UI language
showToolbar	boolean	false	Show toolbar
profile	string	'default'	Processing profile
config	EngineConfig	{}	Engine configuration
readonly	boolean	false	Read-only mode
placeholder	string	''	Placeholder text

Events

Event	Payload	Description
ready	{}	Editor ready
change	{ htmlSnapshot, textContent }	Content changed
error	{ error }	Error occurred

Example

<template>
  <WordFidelityEditorVue
    ref="editorRef"
    lang="en"
    :show-toolbar="true"
    @ready="onReady"
    @change="onChange"
  />
</template>

<script setup>
import { ref } from "vue";
import { WordFidelityEditorVue } from "@coding01/docsjs/vue";

const editorRef = ref(null);

const onReady = () => {
  console.log("Editor ready");
};

const onChange = ({ htmlSnapshot }) => {
  console.log("Content:", htmlSnapshot);
};

const loadFile = async (file) => {
  await editorRef.value?.loadDocx(file);
};
</script>

Template Ref Methods

Access component methods via template ref:

<script setup>
const editorRef = ref(null);

const handleUpload = async (e) => {
  const file = e.target.files[0];
  await editorRef.value?.loadDocx(file);
};
</script>

Next Steps

• CoreEngine API - Engine reference
• Events API - Event handling
• Types - Complete type reference