目录

公文要素配置

　　DocEditor编辑器内置了８种公文模板，能够涵盖大部分的公文类型。公文要素主要包括：份号、紧急度、密级、发文机关标志（红头）、文号、签发人、主送、抄送、标题、正文、成文单位、成文日期、附注、版记（版记中包括 抄送、印发机关、印发日期）等。

　　用户可以选择相近的公文模板，再对公文要素的显示状态进行合理的配置，以完全符合公文格式要求。

元素显示配置

　　一些公文并不要求所有要素都需要显示，比如下行文时，不需要显示签发人。就可以通过参数配置。控制公文要素显示。

const editor = DocEditor.createEditor(div, {
  //我们在打包配置中将public目录输出到了 doceditor/public，
  //所以此处需要配置为'./doceditor/' 或 'doceditor/'
  base: './doceditor/',
  
  //不显示签发人
  signerShow: 'n'
});
editor.load();

　　上面的参数中增加了 signerShow 参数，并设置为"n"，表示不显示签发人，那就表示这是一个下行或平行文，不显示签发人，文号会居中显示。

　　或者可以直接设置签发人显示为“a”，这样我们就可以控制signer数据是否为空，来控制签发人是否显示了：

const editor = DocEditor.createEditor(div, {
  //我们在打包配置中将public目录输出到了 doceditor/public，
  //所以此处需要配置为'./doceditor/' 或 'doceditor/'
  base: './doceditor/',
  
  //根据签发人值，确定签发人是否显示
  signerShow: 'a'
});
editor.load();

　　更多的时候我们会根据文件的主送单位，或者由用户选择决定是否显示签发人，那可以将　signerShow 设置为"a",代表“auto”的意思，当公文编辑器数据的签发人（signer）不为空时，就显示，为空时，就不显示。这样我们就只需要控制与签发人绑定的表单元素或函数返回值就可以了。

　　还有一种方式，设置signerShow 为“s”,表示通过注入一个返回boolean型的函数来确定签发人是否显示，然后通过signerShowScript参数注入函数。

const editor = DocEditor.createEditor(div, {
  //我们在打包配置中将public目录输出到了 doceditor/public，
  //所以此处需要配置为'./doceditor/' 或 'doceditor/'
  base: './doceditor/',
  
  signerShow: 's',	//通过注入函数来确定签发人是否显示
  signerShowScript: ()=>{
    const isUpFile = checkIsUpFile();  //通过一些计算，获取是否是上行文
    return !!isUpFile;								//返回boolean类型
  }
});
editor.load();

说明一下这些参数：

signerShow

如何确定签发人是否显示：

“y”表示无论签发人是否为空，都显示；

“n”表示无论签发人是否为空，都不显示；

“a”表示签发人为空时不显示，不为空时显示；

“s”表示通过signerShowScript参数注入的函数执行结果来判断是否显示

对于[name]Show配置项的默认值，各配置项有不同：

以下配置项默认为“a”：

copiesShow、secretShow、priorityShow、attachmentShow、annotationShow、copytoShow、copyto2Show、meetingAttendShow、meetingLeaveShow、meetingSitShow、meetingRecordShow。

其它显示配置项则默认为“y”

signerShowScript

判断签发人是否显示的函数。

注意：script方式控制要素显示不是响应式的，如果需要更新编辑器显示，要调用editor.resetData()方法，或者时editor.redisplay()方法。

　　当然，除了文号之外，其它的公文版面元素都可以这样配置。

您可以在在线编辑器中尝试：在线运行本样例

附件内容编辑

　　公文元素中的附件内容可以在DocEditor中编辑，可以通过attachmentTextEdit配置项来设置是否允许编辑。

const editor = DocEditor.createEditor(div, {
  //我们在打包配置中将public目录输出到了 doceditor/public，
  //所以此处需要配置为'./doceditor/' 或 'doceditor/'
  base: './doceditor/',
  
  attachmentTextEdit: 'y'	//允许编辑附件内容
});
editor.load();

attachmentTextEdit：可选值：“y”：允许编辑附件内容；

　　　　　　　　　　　　　　 “n”：不能编辑附件内容（默认）

标题编辑

　　文件标题元素一般会绑定到表单的input字段，此字段一般是text类型的输入框。当文件标题过长时，编辑器会自动换行，而规范要求标题换行要词义完整、长短适宜，这就有可能需要用户手工进行换行，在这种情况下，我们就需要设置文件标题元素为可编辑。需要用到subjectEdit、subjectEditScript和subjectEditBindFormData　三个配置项。

这三个配置项说明：

subjectEdit

如何确定标题是否可编辑：

“y”表示允许编辑；

“n”表示不允许编辑；（默认）

“s”表示通过subjectEditScript参数注入的函数执行结果来判断是否可编辑

要注意的是：当标题可编辑时，就不能绑定表单数据。为了防止冲突，在标题绑定了表单可输入字段，或＝函数时，设置标题可编辑是不生效的

subjectEditScript

判断标题是否可编辑的的函数。

subjectEditBindFormData　

当标题编辑后，需要同步到的表单元素，此处可配置表单元素的选择器，一般是输入框或textarea，当配置此参数后，标题编辑后的内容，会同步到对应的输入框中。

　　例如，现在允许标题可编辑，并且要把编辑后的标题内容同步到id为“subject”的输入框中，可以使用以下代码：

const editor = DocEditor.createEditor(div, {
  //我们在打包配置中将public目录输出到了 doceditor/public，
  //所以此处需要配置为'./doceditor/' 或 'doceditor/'
  base: './doceditor/',
  
  subjectEdit: 'y',	//允许编辑标题内容
  subjectEditBindFormData: '#subject'
});
editor.load();

　　您可以在在线编辑器中尝试：在线运行本样例

自定义版面元素

　　除了编辑器内置的版面元素外，还可以创建自定义的版面元素。

　　假设需要在版记之前加上一个“其他说明”，如下图：

可以按以下步骤来实现：

1、拷贝模板文件

　　系统模板路径在public/templete目录下，我们看到templete.json文件，里面设定了每种类型的模板对应的html文件。拷贝一个标准文件模板（standard.html）进行修改。

2、修改模板文件

　　在拷贝后的模板文件中，找到Class为“doc_layout_editionArea”的div元素，在此元素上面加如下html代码：

<p class="MsoNormal doc_block doc_layout" data-doc-layout="doc_data_other"></p>

　　其中P元素的class设置了“doc_layout”代表这是公文编辑器中的一个有效元素，“data-doc-layout”属性定义了此元素的自定义名称。

　　编辑完成后，另存文件，命名为：“mystandard.html”，并放到public/templete目录下。

3、使用自定义模板

　　在编辑器初始化时使用自定义的文件模板，如“设置公文模板”中所述。

const editor = DocEditor.createEditor(div, {
  //我们在打包配置中将public目录输出到了 doceditor/public，
  //所以此处需要配置为'./doceditor/' 或 'doceditor/'
  base: './doceditor/',
  
  documentTempleteType: 'cus',
  //documentTempleteUrl配置为模板html文件的路径
  documentTempleteUrl: 'public/templete/mystandard.html'
});
editor.load();

或者可以直接import模板html文件，并设置documentTempleteData参数：

//引入html内容，需要html-loader
import template from './mystandard.html';

const editor = DocEditor.createEditor(div, {
  //我们在打包配置中将public目录输出到了 doceditor/public，
  //所以此处需要配置为'./doceditor/' 或 'doceditor/'
  base: './doceditor/',
  
  documentTempleteType: 'cus',
  //documentTempleteUrl配置为模板html文件的路径
  documentTempleteData: template
});
editor.load();

４、配置数据绑定

　　接着需要给自定义的doc_data_other元素绑定数据。假设我们需要将doc_data_other元素的值与id为“otherData”的输入框绑定，需要加入以下配置：

const editor = DocEditor.createEditor(div, {
  //我们在打包配置中将public目录输出到了 doceditor/public，
  //所以此处需要配置为'./doceditor/' 或 'doceditor/'
  base: './doceditor/',
  
  documentTempleteType: 'cus',
  //documentTempleteUrl配置为模板html文件的路径
  documentTempleteUrl: 'public/templete/mystandard.html',
  
  //给doc_data_other元素绑定数据
  customFields: {
    'doc_data_other': '#otherData'
  }
});
editor.load();

　　其中“doc_data_other”为模板中定义的元素的“data-doc-layout”属性值。

　　“#otherData”为表单中可输入字段的选择器

　　只要otherData字段值改变，并触发“change”事件，公文编辑器中的对应元素的显示内容就会发生改变。

　　您可以在在线编辑器中尝试：在线运行本样例