DocEditor

DocEditor

new DocEditor(el, optionsopt, serviceopt)

Source:
公文编辑器。符合《党政机关公文格式》国家标准(GB/T 9704-2012)
Examples
//通过script标签引用
//将build后的dist目录部署到服务器web目录,dist可更改名称,然后通过script标签引入
<html>
     <head>
         <title>docEditor</title>
         <script src="./dist/docEditor.js"></script>
     </head>
     <body>
     <div></div>
     <script>
        DocEditor.createEditor("div", {
            //此处配置所需要的参数
        }).load()
     </script>
     </body>
 </html>
//使用 ES Module 模块引用
//1、将源码包放到项目目录中。
//2、使用 npm install <doceditor路径> 进行安装
//3、打包配置,需要将doceditor下的public目录部署到输出目录,如果您使用webpack,在config中使用CopyPlugin插件:
 plugins: [
        new CopyPlugin({
            patterns: [
                { from: "doceditor/public", to: "doceditor/public" }
            ],
        })
    ]

//4、在代码中使用。
 import DocEditor from '@o2oa/doceditor'
 var div = document.createElement("div");
    document.body.appendChild(div)

    const editor = DocEditor.createEditor(div, {
        'base': './doceditor/'  //我们在打包配置中将public目录输出到了 doceditor/public,所以此处需要配置为'./doceditor/' 或 'doceditor/'
        //此处配置其他所需要的参数
    });
    editor.load().then(()=>{
        //编辑器加载完成
    }));
//使用 CommandJS 模块引用
//与 ES Module 模块基本相同,只是通过require函数引入DocEditor

const DocEditor = require('@o2oa/doceditor');
//后面与 ES Module 模块相同
Parameters:
Name Type Attributes Description
el Element 要装载编辑器的Element对象
options options <optional>
公文编辑配置数据数据
service Service <optional>
公文编辑请求对象,需要调用者实现。

Methods

autoZoom(temporary)

根据屏幕自动缩放正文大小

Source:
Example
editor.autoZoom();
Parameters:
Name Type Description
temporary boolean 可选 是否是临时缩放(默认false)

editFiletext()

进入编辑状态,正文可编辑

Source:
Example
editor.editFiletext();

exitHistoryDoc()

退出痕迹查看状态

Source:
Example
editor.exitHistoryDoc();

fullScreen()

全屏显示

Source:
Example
editor.fullScreen();

getData() → {Object}

获取公文编辑器数据

Source:
Example
const data = editor.getData();
Returns:
公文编辑器的数据
Type
Object

getDocumentHtml() → {String}

Source:
将公文编辑器内容以html形式输出
Example
var html = editor.getDocumentHtml();
Returns:
Type
String

historyDoc()

进入痕迹查看状态

Source:
Example
editor.historyDoc();

(async) load(data)

载入公文编辑器

Source:
Example
const editor = DocEditor.createEditor(node);
editor.load().then(()=>{
 //...
});
Parameters:
Name Type Description
data Object 公文编辑数据

off(type, listener)

删除编辑器事件监听

Source:
Example
const listener = (e)=>{
    //e.editor 编辑器对象
}
editor.on('loadPage', listener); //监听编辑器事件
editor.off('loadPage', listener); //删除编辑器事件监听
Parameters:
Name Type Description
type String 编辑器事件名称
listener Functioin 需要从目标事件移除的 listener 函数。

on(type, listener)

监听编辑器事件,

Source:
Example
editor.on('loadPage', (e)=>{
    //e.editor 编辑器对象
});
Parameters:
Name Type Description
type String 编辑器事件名称,可以是dom原生事件,这会将事件绑定到editorNode上
listener Functioin 事件出发时执行函数

(async) printDoc()

将公文编辑转换为word文件,并下载

Source:
Example
editor.printDoc();

provide(obj)

为编辑器注入service对象,用于请求编辑器数据和保存数据等服务,

Source:
Example
import DocEditor from '@o2oa/doceditor';
const node = document.querySelector('div');
const editor = DocEditor.createEditor(node);

class MyService extends DocEditor.Service{
       async listHistory() {
           //获取正文痕迹列表
       }
       async getHistory(id){
           //获取指定的正文痕迹比较数据
       }
       async saveHistory(data){
           //保存正文痕迹比较数据
       }
       async getData(){
           //获取编辑器数据
       }
       async saveData(data){
           //保存编辑器数据
       }
}
const service = new MyService();

editor.provide({service});

editor.load().then(()=>{
 //...
});
Parameters:
Name Type Description
obj Object 要注入到编辑器的对象

readFiletext()

进入阅读状态,正文不能编辑

Source:
Example
editor.readFiletext();

redisplay()

重新计算公文要素显示

Source:
Example
editor.redisplay();

(async) reload(options, data)

重新载入公文编辑器

Source:
Example
const editor = DocEditor.createEditor(node);
editor.reload().then(()=>{
 //...
});
Parameters:
Name Type Description
options Object 公文编辑配置数据数据
data Object 公文编辑数据

resetData()

重新设置公文编辑器数据和展现

Source:
Example
const data = editor.resetData();

save()

保存正文数据 (需要实现service.saveData方法来完成与服务器的交互)

Source:
Example
editor.save();

saveHistory()

保存修订痕迹数据。会计算正文内容与上一次保存或第一次打开时的差异,生成修订痕迹,并请求保存。(需要实现service.saveHistory方法来完成与服务器的交互)

Source:
Example
editor.saveHistory();

seal(src, position)

对正文进行模拟盖章,此方法只是进行模拟盖章,通过图片显示,并非专业盖章,不具备法律效应。

Source:
对正文进行模拟盖章(模板中必须有class为“doc_layout_seal”的img对象)
Example
editor.seal("../custom/img/seal.png", 0); //在第一个盖章位置进行模拟盖章
Parameters:
Name Type Description
src String 盖章图片的url.
position integer 要盖章的位置, 默认为0.

setData(data)

设置公文编辑器数据

Source:
Example
const data = editor.getData();
data.filetext = "测试内容";
editor.setData(data);
Parameters:
Name Type Description
data Object 公文编辑数据

toWord() → {Promise}

将公文转换为word

Source:
Example
editor.toWord();
Returns:
revole了word文件的Blob数据。
Type
Promise

zoom(scale, temporary)

Source:
设公文编辑器缩放
Example
editor.zoom(1.3);
Parameters:
Name Type Description
scale number 缩放比例(0.5 - 2)
temporary boolean 可选 是否是临时缩放(默认false)

zoomIn()

公文编辑器放大显示 5%(0.05)

Source:
Example
editor.zoomIn();

zoomOut()

公文编辑器缩小显示 5%(0.05)

Source:
Example
editor.zoomOut();

Events

afterPaste

Source:
正文中粘贴内容后触发。

afterSave

Source:
保存编辑器数据之后触发。

afterSaveHistory

Source:
保存痕迹之后触发。

beforeLoad

Source:
编辑器加载前触发。

beforeSave

Source:
保存编辑器数据之前触发。

beforeSaveHistory

Source:
保存痕迹之前触发。

blur

Source:
正文编辑器失去焦点时触发。

change

Source:
正文改变后触发。

focus

Source:
正文编辑器获得焦点时触发。

fullScreen

Source:
全屏展示时触发。

load

Source:
编辑器加载后触发。

loaded

Source:
正文编辑器加载完成时触发。

loadPage

Source:
公文页面被重画后触发。

paste

Source:
正文中粘贴内容时触发

postLoad

Source:
编辑器加载后触发。

queryLoad

Source:
编辑器加载前触发。

showHistory

Source:
显示痕迹时触发。

DocEditor

new DocEditor(el, options, service)

创建编辑器

Source:
Example
const editor = DocEditor.createEditor(node);
editor.load().then(()=>{
 //...
});
Parameters:
Name Type Description
el Element 要装载编辑器的Element对象
options options 公文编辑配置数据数据
service Service 公文编辑请求对象,需要调用者实现。

Methods

autoZoom(temporary)

根据屏幕自动缩放正文大小

Source:
Example
editor.autoZoom();
Parameters:
Name Type Description
temporary boolean 可选 是否是临时缩放(默认false)

editFiletext()

进入编辑状态,正文可编辑

Source:
Example
editor.editFiletext();

exitHistoryDoc()

退出痕迹查看状态

Source:
Example
editor.exitHistoryDoc();

fullScreen()

全屏显示

Source:
Example
editor.fullScreen();

getData() → {Object}

获取公文编辑器数据

Source:
Example
const data = editor.getData();
Returns:
公文编辑器的数据
Type
Object

getDocumentHtml() → {String}

Source:
将公文编辑器内容以html形式输出
Example
var html = editor.getDocumentHtml();
Returns:
Type
String

historyDoc()

进入痕迹查看状态

Source:
Example
editor.historyDoc();

(async) load(data)

载入公文编辑器

Source:
Example
const editor = DocEditor.createEditor(node);
editor.load().then(()=>{
 //...
});
Parameters:
Name Type Description
data Object 公文编辑数据

off(type, listener)

删除编辑器事件监听

Source:
Example
const listener = (e)=>{
    //e.editor 编辑器对象
}
editor.on('loadPage', listener); //监听编辑器事件
editor.off('loadPage', listener); //删除编辑器事件监听
Parameters:
Name Type Description
type String 编辑器事件名称
listener Functioin 需要从目标事件移除的 listener 函数。

on(type, listener)

监听编辑器事件,

Source:
Example
editor.on('loadPage', (e)=>{
    //e.editor 编辑器对象
});
Parameters:
Name Type Description
type String 编辑器事件名称,可以是dom原生事件,这会将事件绑定到editorNode上
listener Functioin 事件出发时执行函数

(async) printDoc()

将公文编辑转换为word文件,并下载

Source:
Example
editor.printDoc();

provide(obj)

为编辑器注入service对象,用于请求编辑器数据和保存数据等服务,

Source:
Example
import DocEditor from '@o2oa/doceditor';
const node = document.querySelector('div');
const editor = DocEditor.createEditor(node);

class MyService extends DocEditor.Service{
       async listHistory() {
           //获取正文痕迹列表
       }
       async getHistory(id){
           //获取指定的正文痕迹比较数据
       }
       async saveHistory(data){
           //保存正文痕迹比较数据
       }
       async getData(){
           //获取编辑器数据
       }
       async saveData(data){
           //保存编辑器数据
       }
}
const service = new MyService();

editor.provide({service});

editor.load().then(()=>{
 //...
});
Parameters:
Name Type Description
obj Object 要注入到编辑器的对象

readFiletext()

进入阅读状态,正文不能编辑

Source:
Example
editor.readFiletext();

redisplay()

重新计算公文要素显示

Source:
Example
editor.redisplay();

(async) reload(options, data)

重新载入公文编辑器

Source:
Example
const editor = DocEditor.createEditor(node);
editor.reload().then(()=>{
 //...
});
Parameters:
Name Type Description
options Object 公文编辑配置数据数据
data Object 公文编辑数据

resetData()

重新设置公文编辑器数据和展现

Source:
Example
const data = editor.resetData();

save()

保存正文数据 (需要实现service.saveData方法来完成与服务器的交互)

Source:
Example
editor.save();

saveHistory()

保存修订痕迹数据。会计算正文内容与上一次保存或第一次打开时的差异,生成修订痕迹,并请求保存。(需要实现service.saveHistory方法来完成与服务器的交互)

Source:
Example
editor.saveHistory();

seal(src, position)

对正文进行模拟盖章,此方法只是进行模拟盖章,通过图片显示,并非专业盖章,不具备法律效应。

Source:
对正文进行模拟盖章(模板中必须有class为“doc_layout_seal”的img对象)
Example
editor.seal("../custom/img/seal.png", 0); //在第一个盖章位置进行模拟盖章
Parameters:
Name Type Description
src String 盖章图片的url.
position integer 要盖章的位置, 默认为0.

setData(data)

设置公文编辑器数据

Source:
Example
const data = editor.getData();
data.filetext = "测试内容";
editor.setData(data);
Parameters:
Name Type Description
data Object 公文编辑数据

toWord() → {Promise}

将公文转换为word

Source:
Example
editor.toWord();
Returns:
revole了word文件的Blob数据。
Type
Promise

zoom(scale, temporary)

Source:
设公文编辑器缩放
Example
editor.zoom(1.3);
Parameters:
Name Type Description
scale number 缩放比例(0.5 - 2)
temporary boolean 可选 是否是临时缩放(默认false)

zoomIn()

公文编辑器放大显示 5%(0.05)

Source:
Example
editor.zoomIn();

zoomOut()

公文编辑器缩小显示 5%(0.05)

Source:
Example
editor.zoomOut();

Events

afterPaste

Source:
正文中粘贴内容后触发。

afterSave

Source:
保存编辑器数据之后触发。

afterSaveHistory

Source:
保存痕迹之后触发。

beforeLoad

Source:
编辑器加载前触发。

beforeSave

Source:
保存编辑器数据之前触发。

beforeSaveHistory

Source:
保存痕迹之前触发。

blur

Source:
正文编辑器失去焦点时触发。

change

Source:
正文改变后触发。

focus

Source:
正文编辑器获得焦点时触发。

fullScreen

Source:
全屏展示时触发。

load

Source:
编辑器加载后触发。

loaded

Source:
正文编辑器加载完成时触发。

loadPage

Source:
公文页面被重画后触发。

paste

Source:
正文中粘贴内容时触发

postLoad

Source:
编辑器加载后触发。

queryLoad

Source:
编辑器加载前触发。

showHistory

Source:
显示痕迹时触发。