@ formdown/编辑器

Formdown 的 Web 组件编辑器: 文本区域中的源, 其旁边的窗体.

安装

npm install @formdown/editor

导入软件包登记册 <formdown-editor> 编辑 <formdown-ui> 它的预览画.

使用量

HTML 语言

<script type="module">
  import '@formdown/editor'
</script>

<formdown-editor mode="split" content="@name: [text required]"></formdown-editor>

Java 脚本

import { createFormdownEditor } from '@formdown/editor'

const editor = createFormdownEditor(document.getElementById('editor'), {
  content: '@name: [text required]',
  mode: 'split',
})

editor.addEventListener('contentChange', (event) => {
  console.log('New source:', event.detail.content)
})

属性

• content (字符串)——"Formdown"来源. 当 content 未设置.
• mode (单位:千美元)'edit' | 'split' | 'view'默认值 'split')——出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出.
• placeholder (字符串)——以空出处显示.
• header (布尔,默认) false——每面板上划一行.
• toolbar (布尔,默认) true)——插入每种常见类型的字段的按钮.
• data (object)——表单字段的值.

方法

• validate() ——预览表的验证结果.
• getFormData() ——预览表的值.

活动

• contentChange - 来源改变; detail.content 是新来源.
• formdown-data-update 形式改变的价值; detail.formData 把他们全部抓起来.
• formdown-change - 一个领域发生了变化,因为 <formdown-ui> 报告: detail.fieldName, (中文(简体) ), detail.value, (中文(简体) ), detail.formData。 。 。 .

写入源

在您输入时, 您刚刚开始的字段已经完成, 而一个撤销将结束 :

• 线上其他文本后的三个下划线 @ 用于字段名称(Name: ___ → Name: ___@(三);
• 后面的空格 @name: 在一个行的开头得到 []里面有球场类型的护身符.

标签插入两个空格.

文档

完整文件请访问 格式化文档。 。 。 .

许可证

麻省理工学院