npm - @kaitify/core - Versions diffs - 0.0.1-beta.1 → 0.0.1-beta.2 - Mend

@kaitify/core 0.0.1-beta.1 → 0.0.1-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (69) hide show

package/package.json +1 -1
package/examples/App.vue +0 -342
package/examples/content.js +0 -1
package/examples/main.ts +0 -4
package/examples/test.html +0 -23
package/src/css/style.less +0 -56
package/src/css/var.less +0 -45
package/src/extensions/Extension.ts +0 -200
package/src/extensions/align/index.ts +0 -115
package/src/extensions/attachment/icon.svg +0 -1
package/src/extensions/attachment/index.ts +0 -293
package/src/extensions/attachment/style.less +0 -25
package/src/extensions/back-color/index.ts +0 -56
package/src/extensions/blockquote/index.ts +0 -144
package/src/extensions/blockquote/style.less +0 -16
package/src/extensions/bold/index.ts +0 -77
package/src/extensions/code/index.ts +0 -295
package/src/extensions/code/style.less +0 -14
package/src/extensions/code-block/hljs.less +0 -183
package/src/extensions/code-block/hljs.ts +0 -95
package/src/extensions/code-block/index.ts +0 -308
package/src/extensions/code-block/style.less +0 -20
package/src/extensions/color/index.ts +0 -56
package/src/extensions/font-family/index.ts +0 -80
package/src/extensions/font-size/index.ts +0 -56
package/src/extensions/heading/index.ts +0 -164
package/src/extensions/heading/style.less +0 -42
package/src/extensions/history/index.ts +0 -96
package/src/extensions/horizontal/index.ts +0 -45
package/src/extensions/horizontal/style.less +0 -13
package/src/extensions/image/index.ts +0 -242
package/src/extensions/image/style.less +0 -8
package/src/extensions/indent/index.ts +0 -98
package/src/extensions/index.ts +0 -29
package/src/extensions/italic/index.ts +0 -77
package/src/extensions/line-height/index.ts +0 -113
package/src/extensions/link/index.ts +0 -184
package/src/extensions/link/style.less +0 -19
package/src/extensions/list/index.ts +0 -410
package/src/extensions/list/style.less +0 -19
package/src/extensions/math/index.ts +0 -233
package/src/extensions/math/style.less +0 -21
package/src/extensions/strikethrough/index.ts +0 -78
package/src/extensions/subscript/index.ts +0 -77
package/src/extensions/superscript/index.ts +0 -77
package/src/extensions/table/index.ts +0 -1148
package/src/extensions/table/style.less +0 -71
package/src/extensions/task/index.ts +0 -243
package/src/extensions/task/style.less +0 -59
package/src/extensions/text/index.ts +0 -359
package/src/extensions/underline/index.ts +0 -78
package/src/extensions/video/index.ts +0 -273
package/src/extensions/video/style.less +0 -8
package/src/index.ts +0 -9
package/src/model/Editor.ts +0 -1963
package/src/model/History.ts +0 -115
package/src/model/KNode.ts +0 -677
package/src/model/Selection.ts +0 -39
package/src/model/config/dom-observe.ts +0 -184
package/src/model/config/event-handler.ts +0 -237
package/src/model/config/format-patch.ts +0 -215
package/src/model/config/format-rules.ts +0 -218
package/src/model/config/function.ts +0 -1018
package/src/model/index.ts +0 -6
package/src/tools/index.ts +0 -156
package/src/view/index.ts +0 -46
package/src/view/js-render/dom-patch.ts +0 -324
package/src/view/js-render/index.ts +0 -210
package/vite-env.d.ts +0 -2

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@kaitify/core",
-  "version": "0.0.1-beta.1",
+  "version": "0.0.1-beta.2",
   "private": false,
   "type": "module",
   "author": "so-better",

package/examples/App.vue DELETED Viewed

@@ -1,342 +0,0 @@
-<template>
-  <div class="container">
-    <div class="left">
-      <fieldset>
-        <legend>自定义操作</legend>
-        <div class="toolbar">
-          <button>当前编辑器内容字数：{{ count }}</button>
-          <button @click="insertNode">插入节点</button>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>编辑器设置</legend>
-        <div class="toolbar">
-          <button @click="editor?.setEditable(!editor.isEditable())">启用/禁用编辑功能</button>
-          <button @click="editor && (editor.allowCopy = !editor.allowCopy)">启用/禁用复制功能</button>
-          <button @click="editor && (editor.allowCut = !editor.allowCut)">启用/禁用剪切功能</button>
-          <button @click="editor && (editor.allowPaste = !editor.allowPaste)">启用/禁用粘贴功能</button>
-          <button @click="editor && (editor.allowPasteHtml = !editor.allowPasteHtml)">启用/禁用粘贴HTML功能</button>
-          <button @click="editor && (editor.priorityPasteFiles = !editor.priorityPasteFiles)">启用/禁用文件粘贴优先</button>
-          <button @click="editor?.commands.undo!()">撤销</button>
-          <button @click="editor?.commands.redo!()">重做</button>
-          <button @click="editor?.setDark(true)">深色模式</button>
-          <button @click="editor?.setDark(false)">浅色模式</button>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>对齐方式</legend>
-        <div class="toolbar">
-          <button @click="editor?.commands.setAlign!('left')">左对齐</button>
-          <button @click="editor?.commands.setAlign!('right')">右对齐</button>
-          <button @click="editor?.commands.setAlign!('center')">居中对齐</button>
-          <button @click="editor?.commands.setAlign!('justify')">两端对齐</button>
-          <button @click="editor?.commands.unsetAlign!('left')">取消左对齐</button>
-          <button @click="editor?.commands.unsetAlign!('right')">取消右对齐</button>
-          <button @click="editor?.commands.unsetAlign!('center')">取消居中对齐</button>
-          <button @click="editor?.commands.unsetAlign!('justify')">取消两端对齐</button>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>行高</legend>
-        <div class="toolbar">
-          <button @click="editor?.commands.setLineHeight!(3)">设置3行高</button>
-          <button @click="editor?.commands.unsetLineHeight!(3)">取消3行高</button>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>链接</legend>
-        <div class="toolbar">
-          <button
-            @click="editor?.commands.setLink!({ href: 'https://www.baidu.com', newOpen: true, text: '百度一下，你就知道' })">插入链接</button>
-          <button @click="editor?.commands.unsetLink!()">取消链接</button>
-          <button @click="editor?.commands.updateLink!({ href: 'https://www.so-better.cn' })">更新链接</button>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>缩进</legend>
-        <div class="toolbar">
-          <button @click="editor?.commands.setIncreaseIndent!()">增加缩进</button>
-          <button @click="editor?.commands.setDecreaseIndent!()">减少缩进</button>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>列表</legend>
-        <div class="toolbar">
-          <button @click="editor?.commands.setList!({ ordered: true, listType: 'decimal' })">插入有序列表1</button>
-          <button @click="editor?.commands.setList!({ ordered: true, listType: 'cjk-ideographic' })">插入有序列表2</button>
-          <button @click="editor?.commands.setList!({ ordered: true, listType: 'lower-alpha' })">插入有序列表3</button>
-          <button @click="editor?.commands.setList!({ ordered: true, listType: 'lower-greek' })">插入有序列表4</button>
-          <button @click="editor?.commands.setList!({ ordered: true, listType: 'lower-roman' })">插入有序列表5</button>
-          <button @click="editor?.commands.setList!({ ordered: true, listType: 'upper-alpha' })">插入有序列表6</button>
-          <button @click="editor?.commands.setList!({ ordered: true, listType: 'upper-roman' })">插入有序列表6</button>
-          <button @click="editor?.commands.setList!({ ordered: false, listType: 'disc' })">插入无序列表1</button>
-          <button @click="editor?.commands.setList!({ ordered: false, listType: 'circle' })">插入无序列表2</button>
-          <button @click="editor?.commands.setList!({ ordered: false, listType: 'square' })">插入无序列表3</button>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>待办列表</legend>
-        <div class="toolbar">
-          <button @click="editor?.commands.setTask!()">插入待办</button>
-          <button @click="editor?.commands.unsetTask!()">取消待办</button>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>背景色</legend>
-        <div class="toolbar">
-          <button @click="editor?.commands.setBackColor!('#f30')">设置#f30背景色</button>
-          <button @click="editor?.commands.unsetBackColor!('#f30')">取消设置#f30背景色</button>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>字体颜色</legend>
-        <div class="toolbar">
-          <button @click="editor?.commands.setColor!('#f30')">设置#f30字体颜色</button>
-          <button @click="editor?.commands.unsetColor!('#f30')">取消设置#f30字体颜色</button>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>加粗</legend>
-        <div class="toolbar">
-          <button @click="editor?.commands.setBold!()">设置加粗</button>
-          <button @click="editor?.commands.unsetBold!()">取消加粗</button>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>删除线</legend>
-        <div class="toolbar">
-          <button @click="editor?.commands.setStrikethrough!()">设置删除线</button>
-          <button @click="editor?.commands.unsetStrikethrough!()">取消删除线</button>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>下划线</legend>
-        <div class="toolbar">
-          <button @click="editor?.commands.setUnderline!()">设置下划线</button>
-          <button @click="editor?.commands.unsetUnderline!()">取消下划线</button>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>上标</legend>
-        <div class="toolbar">
-          <button @click="editor?.commands.setSuperscript!()">设置上标</button>
-          <button @click="editor?.commands.unsetSuperscript!()">取消上标</button>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>下标</legend>
-        <div class="toolbar">
-          <button @click="editor?.commands.setSubscript!()">设置下标</button>
-          <button @click="editor?.commands.unsetSubscript!()">取消下标</button>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>斜体</legend>
-        <div class="toolbar">
-          <button @click="editor?.commands.setItalic!()">设置斜体</button>
-          <button @click="editor?.commands.unsetItalic!()">取消斜体</button>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>字体</legend>
-        <div class="toolbar">
-          <button @click="editor?.commands.setFontFamily!('楷体-简,楷体')">设置楷体字体</button>
-          <button @click="editor?.commands.unsetFontFamily!('楷体-简,楷体')">取消设置楷体字体</button>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>字号</legend>
-        <div class="toolbar">
-          <button @click="editor?.commands.setFontSize!('28px')">设置28px字号</button>
-          <button @click="editor?.commands.unsetFontSize!('28px')">取消设置28px字号</button>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>行内代码</legend>
-        <div class="toolbar">
-          <button @click="editor?.commands.setCode!()">设置行内代码</button>
-          <button @click="editor?.commands.unsetCode!()">取消行内代码</button>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>图片</legend>
-        <div class="toolbar">
-          <button
-            @click="editor?.commands.setImage!({ src: 'https://bpic.588ku.com/back_origin_min_pic/24/07/20/e9c6eadf8dd571483c69372b7c21aaa5.jpg!/fh/333/quality/95/unsharp/true/compress/true', alt: '图片加载失败', width: '200px' })">插入图片</button>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>视频</legend>
-        <div class="toolbar">
-          <button
-            @click="editor?.commands.setVideo!({ src: 'https://bpic.588ku.com/video_listen/588ku_preview/24/04/01/09/49/06/video660a12925fe74.mp4', width: '200px', autoplay: true })">插入视频</button>
-          <button @click="editor?.commands.updateVideo!({ controls: true, loop: true })">更新视频</button>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>代码块</legend>
-        <div class="toolbar">
-          <button @click="editor?.commands.setCodeBlock!()">插入代码块</button>
-          <button @click="editor?.commands.unsetCodeBlock!()">取消代码块</button>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>标题</legend>
-        <div class="toolbar">
-          <button @click="editor?.commands.setHeading!(1)">标题1</button>
-          <button @click="editor?.commands.setHeading!(2)">标题2</button>
-          <button @click="editor?.commands.setHeading!(3)">标题3</button>
-          <button @click="editor?.commands.setHeading!(4)">标题4</button>
-          <button @click="editor?.commands.setHeading!(5)">标题5</button>
-          <button @click="editor?.commands.setHeading!(6)">标题6</button>
-          <button @click="editor?.commands.unsetHeading!(1)">取消标题1</button>
-          <button @click="editor?.commands.unsetHeading!(2)">取消标题2</button>
-          <button @click="editor?.commands.unsetHeading!(3)">取消标题3</button>
-          <button @click="editor?.commands.unsetHeading!(4)">取消标题4</button>
-          <button @click="editor?.commands.unsetHeading!(5)">取消标题5</button>
-          <button @click="editor?.commands.unsetHeading!(6)">取消标题6</button>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>引用</legend>
-        <div class="toolbar">
-          <button @click="editor?.commands.setBlockquote!()">插入引用</button>
-          <button @click="editor?.commands.unsetBlockquote!()">取消引用</button>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>水平线</legend>
-        <div class="toolbar">
-          <button @click="editor?.commands.setHorizontal!()">插入水平线</button>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>附件</legend>
-        <div class="toolbar">
-          <button
-            @click="editor?.commands.setAttachment!({ 'url': 'https://www.so-better.cn/static/attachments/QM6cgjq8GPzY1_c2Ol1GIS68.jpg', 'text': '附件图片' })">上传附件</button>
-          <button @click="editor?.commands.updateAttachment!({ 'url': '#', 'text': '附件2' })">更新附件</button>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>Katex数学公式</legend>
-        <div class="toolbar">
-          <button @click="editor?.commands.setMath!('\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}')">插入数学公式1</button>
-          <button @click="editor?.commands.setMath!('x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}')">插入数学公式2</button>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>表格</legend>
-        <div class="toolbar">
-          <button @click="editor?.commands.setTable!({ rows: 5, columns: 5 })">插入 5 x 5 表格</button>
-          <button @click="editor?.commands.unsetTable!()">删除表格</button>
-          <button @click="editor?.commands.addColumn!('right')">向右插入列</button>
-          <button @click="editor?.commands.addColumn!('left')">向左插入列</button>
-          <button @click="editor?.commands.addRow!('top')">向上插入行</button>
-          <button @click="editor?.commands.addRow!('bottom')">向下插入行</button>
-          <button @click="editor?.commands.mergeCell!('left')">向左合并单元格</button>
-          <button @click="editor?.commands.mergeCell!('right')">向右合并单元格</button>
-          <button @click="editor?.commands.mergeCell!('top')">向上合并单元格</button>
-          <button @click="editor?.commands.mergeCell!('bottom')">向下合并单元格</button>
-          <button @click="editor?.commands.deleteRow!()">删除行</button>
-          <button @click="editor?.commands.deleteColumn!()">删除列</button>
-        </div>
-      </fieldset>
-    </div>
-    <div class="right">
-      <div id="editor" style="height: 100%;"></div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue'
-import { Editor, KNode, AttachmentExtension } from '../src'
-import { content } from "./content"
-const count = ref<number>(0)
-const editor = ref<Editor | null>(null)
-onMounted(async () => {
-  const res = await fetch('https://www.so-better.cn/api/doc/getById', {
-    method: 'post',
-    headers: {
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify({
-      docId: 237
-    })
-  }).then(res => res.json())
-  editor.value = await Editor.configure({
-    value: (res.data.docContent).replaceAll('data-editify-hljs', 'kaitify-hljs'),
-    extensions: [AttachmentExtension({ icon: 'https://www.so-better.cn/static/attachments/h9PNcA0uJkWOZx971URJzLvn.jpg' })],
-    el: '#editor',
-    editable: true,
-    allowPasteHtml: true,
-    placeholder: '请输入内容...',
-    afterUpdateView() {
-      count.value = this.getText().trim().length
-    },
-  })
-})
-const insertNode = () => {
-  editor.value!.selection.start!.node.getRootBlock().children = []
-  editor.value?.updateView()
-}
-</script>
-<style lang="less">
-html {
-  height: 100%;
-}
-body {
-  height: 100%;
-  margin: 0;
-}
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  outline: none;
-}
-#app {
-  height: 100%;
-  overflow-y: auto;
-}
-.container {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  width: 100%;
-  height: 100%;
-  .left,
-  .right {
-    display: block;
-    width: 60%;
-    position: relative;
-    height: 100%;
-    padding: 10px;
-  }
-  .left {
-    overflow: auto;
-    width: 40%;
-    .toolbar {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      flex-wrap: wrap;
-      width: 100%;
-      button {
-        margin: 5px;
-      }
-    }
-  }
-}
-</style>

package/examples/content.js DELETED Viewed

@@ -1 +0,0 @@

- export const content = `<h5>关于菜单栏</h5> <div data-editify-list="ul" data-editify-element="5">菜单栏是位于编辑器顶部的区域，是功能按钮集中排列的一个栏目，使用菜单栏可以更加方便的操作编辑器内容</div><div data-editify-list="ul" data-editify-element="7">菜单栏配置参数menu对象配置采用平替的方法，即只会对你配置的属性进行使用，未配置属性使用默认属性</div> <h5>具体配置</h5> <table data-editify-element="17" style="white-space: pre-wrap; word-break: break-word;"><colgroup><col width="17.32%"><col width="11.2%"><col width="42.23%"><col width="16.73%"><col width="auto"></colgroup><tbody><tr><td>参数</td><td>类型</td><td>说明</td><td>可取值</td><td>默认值</td></tr><tr><td>use</td><td>boolean</td><td>是否使用菜单栏</td><td>true/false</td><td>true</td></tr><tr><td>tooltip</td><td>boolean</td><td>是否使用工具提示</td><td>true/false</td><td>true</td></tr><tr><td>mode</td><td>string</td><td>菜单栏显示模式</td><td>"default"/"inner"/"fixed"</td><td>"default"</td></tr><tr><td>style</td><td>object</td><td>给菜单栏设置额外的样式</td><td>-</td><td>-</td></tr><tr><td>sequence</td><td>object</td><td>菜单排序对象，每个属性是菜单按钮的name，属性值是数值，表示该菜单按钮的序列，菜单栏中的菜单按钮会按照该顺序进行排列</td><td>-</td><td>-</td></tr><tr><td>undo</td><td>object</td><td>撤销按钮配置</td><td>-</td><td>-</td></tr><tr><td>redo</td><td>object</td><td>重做按钮配置</td><td>-</td><td>-</td></tr><tr><td>heading</td><td>object</td><td>标题按钮配置</td><td>-</td><td>-</td></tr><tr><td>indent</td><td>object</td><td>缩进按钮配置</td><td>-</td><td>-</td></tr><tr><td>quote</td><td>object</td><td>引用按钮配置</td><td>-</td><td>-</td></tr><tr><td>separator</td><td>object</td><td>分隔线按钮配置</td><td>-</td><td>-</td></tr><tr><td>align</td><td>object</td><td>对齐方式按钮配置</td><td>-</td><td>-</td></tr><tr><td>orderList</td><td>object</td><td>有序列表按钮配置</td><td>-</td><td>-</td></tr><tr><td>unorderList</td><td>object</td><td>无序列表按钮配置</td><td>-</td><td>-</td></tr><tr><td>task</td><td>object</td><td>任务列表按钮配置</td><td>-</td><td>-</td></tr><tr><td>bold</td><td>object</td><td>加粗按钮配置</td><td>-</td><td>-</td></tr><tr><td>underline</td><td>object</td><td>下划线按钮配置</td><td>-</td><td>-</td></tr><tr><td>italic</td><td>object</td><td>斜体按钮配置</td><td>-</td><td>-</td></tr><tr><td>strikethrough</td><td>object</td><td>删除线按钮配置</td><td>-</td><td>-</td></tr><tr><td>code</td><td>object</td><td>行内代码按钮配置</td><td>-</td><td>-</td></tr><tr><td>super</td><td>object</td><td>上标按钮配置</td><td>-</td><td>-</td></tr><tr><td>sub</td><td>object</td><td>下标按钮配置</td><td>-</td><td>-</td></tr><tr><td>formatClear</td><td>object</td><td>清除格式按钮配置</td><td>-</td><td>-</td></tr><tr><td>fontSize</td><td>object</td><td>字号按钮配置</td><td>-</td><td>-</td></tr><tr><td>fontFamily</td><td>object</td><td>字体按钮配置</td><td>-</td><td>-</td></tr><tr><td>lineHeight</td><td>object</td><td>行高按钮配置</td><td>-</td><td>-</td></tr><tr><td>foreColor</td><td>object</td><td>前景色按钮配置</td><td>-</td><td>-</td></tr><tr><td>backColor</td><td>object</td><td>背景色按钮配置</td><td>-</td><td>-</td></tr><tr><td>link</td><td>object</td><td>插入链接按钮配置</td><td>-</td><td>-</td></tr><tr><td>image</td><td>object</td><td>插入图片按钮配置</td><td>-</td><td>-</td></tr><tr><td>video</td><td>object</td><td>插入视频按钮配置</td><td>-</td><td>-</td></tr><tr><td>table</td><td>object</td><td>插入表格按钮配置</td><td>-</td><td>-</td></tr><tr><td>codeBlock</td><td>object</td><td>插入代码块按钮配置</td><td>-</td><td>-</td></tr><tr><td>sourceView</td><td>object</td><td>代码视图按钮配置</td><td>-</td><td>-</td></tr><tr><td>fullScreen</td><td>object</td><td>全屏按钮配置</td><td>-</td><td>-</td></tr><tr><td>attachment</td><td>object</td><td>附件按钮配置</td><td>-</td><td>-</td></tr><tr><td>mathformula</td><td>object</td><td>插入数学公式按钮配置 </td><td>-</td><td>-</td></tr><tr><td>panel</td><td>object</td><td>插入面板按钮配置</td><td>-</td><td>-</td></tr><tr><td>infoBlock</td><td>object</td><td>插入信息块按钮配置</td><td>-</td><td>-</td></tr><tr><td>extends</td><td>object</td><td>拓展菜单配置</td><td>-</td><td>-</td></tr></tbody></table> <h5>sequence菜单排序配置</h5> 默认配置如下<div data-editify-list="ul" data-editify-element="620">菜单栏中的按钮会按照如上的序列值从小到大排列，如果你需要改变菜单按钮的顺序，只需要修改对应按钮的序列值就可以了</div><div data-editify-list="ul" data-editify-element="622">拓展的自定义菜单按钮必须在sequence中配置序列值，否则无法显示在菜单栏中</div> <h5>undo、redo按钮配置</h5> <table data-editify-element="632"><colgroup><col width="auto"><col width="auto"><col width="auto"><col width="auto"><col width="auto"></colgroup><tbody><tr><td>参数</td><td>类型</td><td>说明</td><td>可取值</td><td>默认值</td></tr><tr><td>show</td><td>boolean</td><td>是否显示按钮</td><td>true/false</td><td>true</td></tr><tr><td>leftBorder</td><td>boolean</td><td>按钮是否显示左侧边框</td><td>true/false</td><td>false</td></tr><tr><td>rightBorder</td><td>boolean</td><td>按钮是否显示右侧边框</td><td>true/false</td><td>false</td></tr><tr><td>disabled</td><td>boolean</td><td>按钮是否禁用</td><td>true/false</td><td>false</td></tr></tbody></table> <h5>quote、separator、orderList、unorderList、task、underline、italic、strikethrough、code、super、sub、formatClear、codeBlock按钮配置</h5> <table data-editify-element="703" style="white-space: pre-wrap; word-break: break-word;"><colgroup><col width="auto"><col width="auto"><col width="auto"><col width="auto"><col width="auto"></colgroup><tbody><tr><td>参数</td><td>类型</td><td>说明</td><td>可取值</td><td>默认值</td></tr><tr><td>show</td><td>boolean</td><td>是否显示按钮</td><td>true/false</td><td>true</td></tr><tr><td>leftBorder</td><td>boolean</td><td>按钮是否显示左侧边框</td><td>true/false</td><td>false</td></tr><tr><td>rightBorder</td><td>boolean</td><td>按钮是否显示右侧边框</td><td>true/false</td><td>false</td></tr><tr><td>disabled</td><td>boolean</td><td>按钮是否禁用</td><td>true/false</td><td>false</td></tr><tr><td>shortcut</td><td>object</td><td>快捷键配置</td><td>-</td><td>-</td></tr></tbody></table> <h5>bold、link按钮配置</h5> <table data-editify-element="785" style="white-space: pre-wrap; word-break: break-word;"><colgroup><col width="auto"><col width="auto"><col width="auto"><col width="auto"><col width="auto"></colgroup><tbody><tr><td>参数</td><td>类型</td><td>说明</td><td>可取值</td><td>默认值</td></tr><tr><td>show</td><td>boolean</td><td>是否显示按钮</td><td>true/false</td><td>true</td></tr><tr><td>leftBorder</td><td>boolean</td><td>按钮是否显示左侧边框</td><td>true/false</td><td>true</td></tr><tr><td>rightBorder</td><td>boolean</td><td>按钮是否显示右侧边框</td><td>true/false</td><td>false</td></tr><tr><td>disabled</td><td>boolean</td><td>按钮是否禁用</td><td>true/false</td><td>false</td></tr><tr><td>shortcut</td><td>object</td><td>快捷键配置</td><td>-</td><td>-</td></tr></tbody></table> <h5>sourceView、fullScreen、infoBlock按钮配置</h5> <table data-editify-element="867" style="white-space: pre-wrap; word-break: break-word;"><colgroup><col width="auto"><col width="auto"><col width="auto"><col width="auto"><col width="auto"></colgroup><tbody><tr><td>参数</td><td>类型</td><td>说明</td><td>可取值</td><td>默认值</td></tr><tr><td>show</td><td>boolean</td><td>是否显示按钮</td><td>true/false</td><td>false</td></tr><tr><td>leftBorder</td><td>boolean</td><td>按钮是否显示左侧边框</td><td>true/false</td><td>false</td></tr><tr><td>rightBorder</td><td>boolean</td><td>按钮是否显示右侧边框</td><td>true/false</td><td>false</td></tr><tr><td>disabled</td><td>boolean</td><td>按钮是否禁用</td><td>true/false</td><td>false</td></tr><tr><td>shortcut</td><td>object</td><td>快捷键配置</td><td>-</td><td>-</td></tr></tbody></table> <h5>heading按钮配置</h5><table data-editify-element="947" style="white-space: pre-wrap; word-break: break-word;"><colgroup><col width="13.12%"><col width="14.95%"><col width="53.93%"><col width="auto"><col width="auto"></colgroup><tbody><tr><td>参数</td><td>类型</td><td>说明</td><td>可取值</td><td>默认值</td></tr><tr><td>show</td><td>boolean</td><td>是否显示按钮</td><td>true/false</td><td>true</td></tr><tr><td>options</td><td>array</td><td>标题选项列表配置，数组中每个元素是一个对象，包含label、value、style三个属性，label表示显示的名称，value表示具体的标签值，style表示选项自定义样式的对象</td><td>-</td><td>-</td></tr><tr><td>defaultValue</td><td>string | number</td><td>如果选项列表的值都不符合的情况下默认显示的值</td><td>-</td><td>"p"</td></tr><tr><td>width</td><td>number</td><td>按钮浮层宽度，单位px</td><td> </td><td>130</td></tr><tr><td>maxHeight</td><td>number</td><td>按钮浮层最大高度，单位px，如果设为空字符串，则表示不设置</td><td>-</td><td>-</td></tr><tr><td>leftBorder</td><td>boolean</td><td>按钮左侧边框是否显示</td><td>true/false</td><td>true</td></tr><tr><td>rightBorder</td><td>boolean</td><td>按钮右侧边框是否显示</td><td>true/false</td><td>false</td></tr><tr><td>disabled</td><td>boolean</td><td>按钮是否禁用</td><td>true/false</td><td>false</td></tr><tr><td>shortcut</td><td>object</td><td>快捷键配置</td><td>-</td><td>-</td></tr></tbody></table> <blockquote>关于按钮的options数组，每一项都包含label、value、icon和style四个属性，但是icon和style属性并非是必要的。如果options的某一项是一个字符串或者数值，表示label和value一样，都是这个字符串或者数值，此时icon和style未设置。</blockquote><blockquote>icon属性用于定义选项左侧的图标，具体值由组件内部定义，对于拥有icon属性的选项，你可以设置icon为null来不显示图标</blockquote><blockquote>style属性用于定义该选项的样式，一般用以设置字体大小和粗细等来达到使得该选项与众不同的目的</blockquote> <h5>indent按钮配置</h5> <table data-editify-element="1200" style="white-space: pre-wrap; word-break: break-word;"><colgroup><col width="10.97%"><col width="9.14%"><col width="63.23%"><col width="auto"><col width="auto"></colgroup><tbody><tr><td>参数</td><td>类型</td><td>说明</td><td>可取值</td><td>默认值</td></tr><tr><td>show</td><td>boolean</td><td>是否显示按钮</td><td>true/false</td><td>true</td></tr><tr><td>options</td><td>array</td><td>缩进选项列表配置，数组中每个元素是一个对象，包含label、value、icon三个属性，label表示显示的名称，value表示具体的值，icon表示选项显示的图标</td><td>-</td><td>-</td></tr><tr><td>width</td><td>number</td><td>按钮浮层宽度，单位px</td><td>-</td><td>110</td></tr><tr><td>maxHeight</td><td>number</td><td>按钮浮层最大高度，单位px，如果设为空字符串，则表示不设置</td><td>-</td><td>-</td></tr><tr><td>leftBorder</td><td>boolean</td><td>按钮左侧边框是否显示</td><td>true/false</td><td>false</td></tr><tr><td>rightBorder</td><td>boolean</td><td>按钮右侧边框是否显示</td><td>true/false</td><td>false</td></tr><tr><td>disabled</td><td>boolean</td><td>按钮是否禁用</td><td>true/false</td><td>false</td></tr><tr><td>shortcut</td><td>object</td><td>快捷键配置</td><td>-</td><td>-</td></tr></tbody></table> <h5>align按钮配置</h5> <table data-editify-element="1342" style="white-space: pre-wrap; word-break: break-word;"><colgroup><col width="12.15%"><col width="9.03%"><col width="61.29%"><col width="auto"><col width="auto"></colgroup><tbody><tr><td>参数</td><td>类型</td><td>说明</td><td>可取值</td><td>默认值</td></tr><tr><td>show</td><td>boolean</td><td>按钮是否显示</td><td>true/false</td><td>true</td></tr><tr><td>options</td><td>array</td><td>对齐方式选项列表配置，数组中每个元素是一个对象，包含label、value、icon三个属性，label表示显示的名称，value表示具体的样式值，icon表示选项显示在选项中的对齐方式图标</td><td>-</td><td>-</td></tr><tr><td>width</td><td>number</td><td>按钮浮层宽度，单位px</td><td>-</td><td>110</td></tr><tr><td>maxHeight</td><td>number</td><td>按钮浮层最大高度，单位px，如果设为空字符串，则表示不设置</td><td>-</td><td>-</td></tr><tr><td>leftBorder</td><td>boolean</td><td>按钮是否显示左侧边框</td><td>true/false</td><td>true</td></tr><tr><td>rightBorder</td><td>boolean</td><td>按钮是否显示右侧边框</td><td>true/false</td><td>false</td></tr><tr><td>disabled</td><td>boolean</td><td>按钮是否禁用</td><td>true/false</td><td>false</td></tr><tr><td>shortcut</td><td>object</td><td>快捷键配置</td><td>-</td><td>-</td></tr></tbody></table> <h5>fontSize按钮配置</h5> <table data-editify-element="1508" style="white-space: pre-wrap; word-break: break-word;"><colgroup><col width="11.4%"><col width="12.9%"><col width="56.77%"><col width="auto"><col width="auto"></colgroup><tbody><tr><td>参数</td><td>类型</td><td>说明</td><td>可取值</td><td>默认值</td></tr><tr><td>show</td><td>boolean</td><td>按钮是否显示</td><td>true/false</td><td>true</td></tr><tr><td>options</td><td>array</td><td>按钮字号列表配置，数组中每个元素是一个对象，包含label、value两个属性，label表示显示的名称，value表示具体的字号值</td><td>-</td><td>-</td></tr><tr><td>defaultValue</td><td>string | number</td><td>如果选项列表的值都不符合的情况下默认显示的值</td><td>-</td><td>''</td></tr><tr><td>width</td><td>number</td><td>按钮浮层宽度，单位px</td><td>-</td><td>100</td></tr><tr><td>maxHeight</td><td>number</td><td>按钮浮层最大高度，单位px，如果设置为空字符串，则表示不限制最大高度</td><td>-</td><td>200</td></tr><tr><td>leftBorder</td><td>boolean</td><td>按钮左侧边框是否显示</td><td>true/false</td><td>true</td></tr><tr><td>rightBorder</td><td>boolean</td><td>按钮右侧边框是否显示</td><td>true/false</td><td>false</td></tr><tr><td>disabled</td><td>boolean</td><td>按钮是否禁用</td><td>true/false</td><td>false</td></tr><tr><td>shortcut</td><td>object</td><td>快捷键配置</td><td>-</td><td>-</td></tr></tbody></table> <h5>fontFamily按钮配置</h5> <table data-editify-element="1725" style="white-space: pre-wrap; word-break: break-word;"><colgroup><col width="10.97%"><col width="13.33%"><col width="59.57%"><col width="auto"><col width="auto"></colgroup><tbody><tr><td>参数</td><td>类型</td><td>说明</td><td>可取值</td><td>默认值</td></tr><tr><td>show</td><td>boolean</td><td>是否显示按钮</td><td>true/false</td><td>true</td></tr><tr><td>options</td><td>array</td><td>按钮字号列表配置，数组中每个元素是一个对象，包含label、value两个属性，label表示显示的名称，value表示具体的字体值</td><td>-</td><td>-</td></tr><tr><td>defaultValue</td><td>string | number</td><td>如果选项列表的值都不符合的情况下默认显示的值</td><td>-</td><td>''</td></tr><tr><td>width</td><td>number</td><td>按钮浮层宽度</td><td>-</td><td>100</td></tr><tr><td>maxHeight</td><td>number</td><td>按钮浮层最大高度，单位px，如果设置为空字符串，则表示不限制最大高度</td><td>-</td><td>200</td></tr><tr><td>leftBorder</td><td>boolean</td><td>按钮左侧边框是否显示</td><td>true/false</td><td>false</td></tr><tr><td>rightBorder</td><td>boolean</td><td>按钮右侧边框是否显示</td><td>true/false</td><td>false</td></tr><tr><td>disabled</td><td>boolean</td><td>按钮是否禁用</td><td>true/false</td><td>false</td></tr><tr><td>shortcut</td><td>object</td><td>快捷键配置</td><td>-</td><td>-</td></tr></tbody></table> <h5>lineHeight按钮配置</h5> <table data-editify-element="1918" style="white-space: pre-wrap; word-break: break-word;"><colgroup><col width="11.51%"><col width="13.98%"><col width="57.1%"><col width="auto"><col width="auto"></colgroup><tbody><tr><td>参数</td><td>类型</td><td>说明</td><td>可取值</td><td>默认值</td></tr><tr><td>show</td><td>boolean</td><td>是否显示按钮</td><td>true/false</td><td>true</td></tr><tr><td>options</td><td>array</td><td>按钮列表配置，数组中每个元素是一个对象，包含label、value两个属性，label表示显示的名称，value表示具体的行高值</td><td>-</td><td>-</td></tr><tr><td>defaultValue</td><td>string | number</td><td>如果选项列表的值都不符合的情况下默认显示的值</td><td>-</td><td>-</td></tr><tr><td>width</td><td>number</td><td>按钮浮层宽度，单位px</td><td>-</td><td>90</td></tr><tr><td>maxHeight</td><td>number</td><td>按钮浮层最大高度，单位px，如果设置为空字符串，则表示不限制最大高度</td><td>-</td><td>''</td></tr><tr><td>leftBorder</td><td>boolean</td><td>按钮左侧边框是否显示</td><td>true/false</td><td>false</td></tr><tr><td>rightBorder</td><td>boolean</td><td>按钮右侧边框是否显示</td><td>true/false</td><td>false</td></tr><tr><td>disabled</td><td>boolean</td><td>按钮是否禁用</td><td>true/false</td><td>false</td></tr><tr><td>shortcut</td><td>object</td><td>快捷键配置</td><td>-</td><td>-</td></tr></tbody></table> <h5>foreColor按钮配置</h5> <table data-editify-element="2067" style="white-space: pre-wrap; word-break: break-word;"><colgroup><col width="11.18%"><col width="10.11%"><col width="61.72%"><col width="auto"><col width="auto"></colgroup><tbody><tr><td>参数</td><td>类型</td><td>说明</td><td>可取值</td><td>默认值</td></tr><tr><td>show</td><td>boolean</td><td>是否显示按钮</td><td>true/false</td><td>true</td></tr><tr><td>options</td><td>array</td><td>按钮列表配置，数组中每个元素是一个对象，包含label、value两个属性，label表示显示的工具提示内容，value表示具体的颜色值</td><td>-</td><td>-</td></tr><tr><td>leftBorder</td><td>boolean</td><td>按钮左侧边框是否显示</td><td>true/false</td><td>true</td></tr><tr><td>rightBorder</td><td>boolean</td><td>按钮右侧边框是否显示</td><td>true/false</td><td>false</td></tr><tr><td>disabled</td><td>boolean</td><td>按钮是否禁用</td><td>true/false</td><td>false</td></tr><tr><td>shortcut</td><td>object</td><td>快捷键配置</td><td>-</td><td>-</td></tr></tbody></table> <h5>backColor按钮配置</h5> <table data-editify-element="2293" style="white-space: pre-wrap; word-break: break-word;"><colgroup><col width="10.43%"><col width="8.39%"><col width="64.62%"><col width="9.14%"><col width="auto"></colgroup><tbody><tr><td>参数</td><td>类型</td><td>说明</td><td>可取值</td><td>默认值</td></tr><tr><td>show</td><td>boolean</td><td>是否显示按钮</td><td>true/false</td><td>true</td></tr><tr><td>options</td><td>array</td><td>按钮列表配置，数组中每个元素是一个对象，包含label、value两个属性，label表示显示的工具提示内容，value表示具体的颜色值</td><td>-</td><td>-</td></tr><tr><td>leftBorder</td><td>boolean</td><td>按钮左侧边框是否显示</td><td>true/false</td><td>false</td></tr><tr><td>rightBorder</td><td>boolean</td><td>按钮右侧边框是否显示</td><td>true/false</td><td>false</td></tr><tr><td>disabled</td><td>boolean</td><td>按钮是否禁用</td><td>true/false</td><td>false</td></tr><tr><td>shortcut</td><td>object</td><td>快捷键配置</td><td>-</td><td>-</td></tr></tbody></table> <h5>image按钮配置</h5> <table data-editify-element="2519" style="white-space: pre-wrap; word-break: break-word;"><colgroup><col width="13.01%"><col width="8.92%"><col width="35.37%"><col width="11.27%"><col width="auto"></colgroup><tbody><tr><td>参数</td><td>类型</td><td>说明</td><td>可取值</td><td>默认值</td></tr><tr><td>show</td><td>boolean</td><td>是否显示按钮</td><td>true/false</td><td>true</td></tr><tr><td>leftBorder</td><td>boolean</td><td>按钮是否显示左侧边框</td><td>true/false</td><td>false</td></tr><tr><td>rightBorder</td><td>boolean</td><td>按钮是否显示右侧边框</td><td>true/false</td><td>false</td></tr><tr><td>disabled</td><td>boolean</td><td>按钮是否禁用</td><td>true/false</td><td>false</td></tr><tr><td>allowedFileType</td><td>array</td><td>支持上传的图片类型，不区分大小写。如果为空数组则表示不进行限制</td><td>-</td><td>['jpg', 'png', 'jpeg', 'webp', 'jfif', 'ico', 'gif', 'svg', 'psd']</td></tr><tr><td>multiple</td><td>boolean</td><td>是否可以多选图片</td><td>true/false</td><td>false</td></tr><tr><td>maxSize</td><td>number</td><td>单张图片的最大值，单位kb</td><td>-</td><td>-</td></tr><tr><td>minSize</td><td>number</td><td>单张图片的最小值，单位kb</td><td>-</td><td>-</td></tr><tr><td>customUpload</td><td>function</td><td>默认上传图片后会以base64字符串形式插入编辑器，可以使用该方法自定义上传图片，回调参数为图片数组，该方法必须返回一个字符串数组，数组中的每个值表示上传后的图片链接。该方法支持异步，你可以返回一个Promise对象，但是resolve方法的回调值必须是该字符串数组</td><td>-</td><td>-</td></tr><tr><td>handleError</td><td>function</td><td>图片上传出现异常的自定义处理，回调参数依次为错误信息和file文件</td><td>-</td><td>-</td></tr><tr><td>shortcut</td><td>object</td><td>快捷键配置</td><td>-</td><td>-</td></tr></tbody></table><blockquote>handleError的错误信息文字为如果是"suffixError"，表示上传图片的类型不符合；如果是"maxSizeError"，表示该图片的最大值超出限制；如果是"minSizeError"，表示该图片的最小值没有达到最小值要求</blockquote> <h5>video按钮配置</h5> <table data-editify-element="2667" style="white-space: pre-wrap; word-break: break-word;"><colgroup><col width="12.69%"><col width="8.39%"><col width="43.12%"><col width="10.32%"><col width="auto"></colgroup><tbody><tr><td>参数</td><td>类型</td><td>说明</td><td>可取值</td><td>默认值</td></tr><tr><td>show</td><td>boolean</td><td>是否显示按钮</td><td>true/false</td><td>true</td></tr><tr><td>leftBorder</td><td>boolean</td><td>按钮是否显示左侧边框</td><td>true/false</td><td>false</td></tr><tr><td>rightBorder</td><td>boolean</td><td>按钮是否显示右侧边框</td><td>true/false</td><td>false</td></tr><tr><td>disabled</td><td>boolean</td><td>按钮是否禁用</td><td>true/false</td><td>false</td></tr><tr><td>allowedFileType</td><td>array</td><td>支持上传的视频类型，不区分大小写。如果为空数组则表示不进行限制</td><td>-</td><td>['mp4', 'avi', 'mpg', 'wmv', 'mov', 'rm', 'swf', 'flv']</td></tr><tr><td>multiple</td><td>boolean</td><td>是否可以多选视频</td><td>true/false</td><td>false</td></tr><tr><td>maxSize</td><td>number</td><td>单个视频的最大值，单位kb</td><td>-</td><td>-</td></tr><tr><td>minSize</td><td>number</td><td>单个视频的最小值，单位kb</td><td>-</td><td>-</td></tr><tr><td>customUpload</td><td>function</td><td>默认上传视频后会以base64字符串形式插入编辑器，可以使用该方法自定义上传视频，回调参数为视频数组，该方法必须返回一个字符串数组，数组中的每个值表示上传后的视频链接。该方法支持异步，你可以返回一个Promise对象，但是resolve方法的回调值必须是该字符串数组</td><td>-</td><td>-</td></tr><tr><td>handleError</td><td>function</td><td>视频上传出现异常的自定义处理，回调参数依次为错误信息和file文件</td><td>-</td><td>-</td></tr><tr><td>shortcut</td><td>object</td><td>快捷键配置</td><td>-</td><td>-</td></tr></tbody></table><blockquote>handleError的错误信息文字为如果是"suffixError"，表示上传视频的类型不符合；如果是"maxSizeError"，表示该视频的最大值超出限制；如果是"minSizeError"，表示该视频的最小值没有达到最小值要求</blockquote> <h5>table按钮配置</h5> <table data-editify-element="2815" style="white-space: pre-wrap; word-break: break-word;"><colgroup><col width="auto"><col width="auto"><col width="33.16%"><col width="auto"><col width="auto"></colgroup><tbody><tr><td>参数</td><td>类型</td><td>说明</td><td>可取值</td><td>默认值</td></tr><tr><td>show</td><td>boolean</td><td>是否显示按钮</td><td>true/false</td><td>true</td></tr><tr><td>leftBorder</td><td>boolean</td><td>按钮是否显示左侧边框</td><td>true/false</td><td>false</td></tr><tr><td>rightBorder</td><td>boolean</td><td>按钮是否显示右侧边框</td><td>true/false</td><td>false</td></tr><tr><td>maxRows</td><td>number</td><td>创建时表格的最大行数</td><td>-</td><td>10</td></tr><tr><td>maxColumns</td><td>number</td><td>创建时表格的最大列数</td><td>-</td><td>10</td></tr><tr><td>disabled</td><td>boolean</td><td>按钮是否禁用</td><td>true/false</td><td>false</td></tr><tr><td>shortcut</td><td>object</td><td>快捷键配置</td><td>-</td><td>-</td></tr></tbody></table> <h5>attachment按钮配置</h5> <table data-editify-element="2919" style="white-space: pre-wrap; word-break: break-word;"><colgroup><col width="13.04%"><col width="9.43%"><col width="61.9%"><col width="auto"><col width="auto"></colgroup><tbody><tr><td>参数</td><td>类型</td><td>说明</td><td>可取值</td><td>默认值</td></tr><tr><td>show</td><td>boolean</td><td>是否显示按钮</td><td>true/false</td><td>false</td></tr><tr><td>disabled</td><td>boolean</td><td>是否禁用按钮</td><td>true/false</td><td>false</td></tr><tr><td>leftBorder</td><td>boolean</td><td>按钮是否显示左侧边框</td><td>true/false</td><td>false</td></tr><tr><td>rightBorder</td><td>boolean</td><td>按钮是否显示右侧边框</td><td>true/false</td><td>false</td></tr><tr><td>accept</td><td>string</td><td>可选择的附件类型，默认不限制类型，设定此参数后选择文件时会自动过滤非符合的文件类型</td><td>-</td><td>-</td></tr><tr><td>allowedFileType</td><td>array</td><td>支持上传的附件类型，不区分大小写。如果为空数组则表示不进行限制</td><td>-</td><td>-</td></tr><tr><td>multiple</td><td>boolean</td><td>是否可以多选</td><td>true/false</td><td>false</td></tr><tr><td>maxSize</td><td>number</td><td>单个附件的的最大值，单位kb</td><td>-</td><td>-</td></tr><tr><td>minSize</td><td>number</td><td>单个附件的最小值，单位kb</td><td>-</td><td>-</td></tr><tr><td>customUpload</td><td>function</td><td>默认上传附件后会以base64字符串形式插入编辑器，可以使用该方法自定义上传附件，回调参数为附件数组，该方法必须返回一个字符串数组，数组中的每个值表示上传后的附件链接。该方法支持异步，你可以返回一个Promise对象，但是resolve方法的回调值必须是该字符串数组</td><td> </td><td> </td></tr><tr><td>handleError</td><td>function</td><td>附件上传出现异常的自定义处理，回调参数依次为错误信息和file文件</td><td>-</td><td>-</td></tr><tr><td>shortcut</td><td>object</td><td>快捷键配置</td><td>-</td><td>-</td></tr></tbody></table><blockquote>handleError的错误信息文字为如果是"suffixError"，表示上传附件的类型不符合；如果是"maxSizeError"，表示该附件的最大值超出限制；如果是"minSizeError"，表示该附件的最小值没有达到最小值要求</blockquote> <h5>mathformula按钮配置</h5> <table data-editify-element="3080" style="white-space: pre-wrap; word-break: break-word;"><colgroup><col width="auto"><col width="auto"><col width="auto"><col width="auto"><col width="auto"></colgroup><tbody><tr><td>参数</td><td>类型</td><td>说明</td><td>可取值</td><td>默认值</td></tr><tr><td>show</td><td>boolean</td><td>是否显示按钮</td><td>true/false</td><td>false</td></tr><tr><td>disabled</td><td>boolean</td><td>是否禁用按钮</td><td>true/false</td><td>false</td></tr><tr><td>leftBorder</td><td>boolean</td><td>按钮是否显示左侧边框</td><td>true/false</td><td>false</td></tr><tr><td>rightBorder</td><td>boolean</td><td>按钮是否显示右侧边框</td><td>true/false</td><td>false</td></tr><tr><td>handleError</td><td>function</td><td>数学公式渲染出错的处理，回调参数为Error对象</td><td>-</td><td>-</td></tr><tr><td>shortcut</td><td>object</td><td>快捷键配置</td><td>-</td><td>-</td></tr></tbody></table> <h5>extends拓展菜单按钮</h5> 每个key表示拓展菜单的唯一名称name，value表示配置对象，具体属性如下：<table data-editify-element="3175" style="white-space: pre-wrap; word-break: break-word;"><colgroup><col width="14.4%"><col width="14.4%"><col width="37.65%"><col width="23.26%"><col width="auto"></colgroup><tbody><tr><td>参数</td><td>类型</td><td>说明</td><td>可取值</td><td>默认值</td></tr><tr><td>type</td><td>string</td><td>拓展按钮的类型，'default'表示默认的按钮，'select'表示下拉式选项按钮，'display'表示下拉式选项按钮并且显示已选值</td><td>'default'、'select'、 'display'</td><td>'default'</td></tr><tr><td>title</td><td>string</td><td>拓展按钮的工具提示内容</td><td>-</td><td>-</td></tr><tr><td>leftBorder</td><td>boolean</td><td>按钮是否显示左侧边框</td><td>true/false</td><td>false</td></tr><tr><td>rightBorder</td><td>boolean</td><td>按钮是否显示右侧边框</td><td>true/false</td><td>false</td></tr><tr><td>disabled</td><td>boolean</td><td>按钮是否禁用</td><td>true/false</td><td>false</td></tr><tr><td>active</td><td>boolean</td><td>按钮是否激活</td><td>true/false</td><td>false</td></tr><tr><td>width</td><td>number</td><td>按钮作为下拉式按钮时的浮层宽度，单位px</td><td>-</td><td>-</td></tr><tr><td>maxHeight</td><td>number</td><td>按钮作为下拉式按钮时浮层的最大高度，单位px，如果设为空字符串则表示不限制最大高度</td><td>-</td><td>-</td></tr><tr><td>options</td><td>array</td><td>按钮作为下拉式按钮时的列表配置，数组中每个元素是一个对象，包含label、value、style、icon属性，一般只需要设置label和value属性即可</td><td>-</td><td>-</td></tr><tr><td>value</td><td>string | number</td><td>按钮作为下拉式按钮并且显示已选择值时，此值表示已选择的值，在选择完后你需要更新这个值</td><td>-</td><td>-</td></tr><tr><td>hideScroll</td><td>boolean</td><td>按钮作为下拉式按钮时浮层是否隐藏滚动条</td><td>true/false</td><td>false</td></tr><tr><td>shortcut</td><td>object</td><td>快捷键配置</td><td>-</td><td>-</td></tr><tr><td>onLayerShow</td><td>function</td><td>按钮作为下拉式按钮时浮层显示时触发，回调参数依次为按钮的name值和按钮实例</td><td>-</td><td>-</td></tr><tr><td>onLayerShown</td><td>function</td><td>按钮作为下拉式按钮时浮层显示后触发，回调参数依次为按钮的name值和按钮实例</td><td>-</td><td>-</td></tr><tr><td>onLayerHidden</td><td>function</td><td>按钮作为下拉式按钮时浮层隐藏后触发，回调参数依次为按钮的name值和按钮实例</td><td>-</td><td>-</td></tr><tr><td>onOperate</td><td>function</td><td>普通按钮点击、下拉式按钮点击选项时触发，回调参数依次为按钮的name值、按钮已选择的value值（如果是普通按钮，此项为undefined）和按钮实例</td><td>-</td><td>-</td></tr><tr><td>default</td><td>function</td><td>按钮的默认插槽渲染函数，在函数内部返回h函数渲染结果，回调参数依次为按钮的name值和按钮实例</td><td>-</td><td>-</td></tr><tr><td>layer</td><td>function</td><td>下拉式按钮的浮层插槽渲染函数，在函数内部返回h函数渲染结果，回调参数依次为按钮的name值和按钮实例</td><td>-</td><td>-</td></tr><tr><td>option</td><td>function</td><td>下拉式按钮的列表项插槽渲染函数，在函数内部返回h函数渲染结果，回调参数依次为按钮的name值和按钮实例</td><td>-</td><td>-</td></tr></tbody></table> 拓展一个菜单按钮的示例代码如下： `

package/examples/main.ts DELETED Viewed

@@ -1,4 +0,0 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-createApp(App).mount('#app')

package/examples/test.html DELETED Viewed

@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>@kaitify/core</title>
-    <script src="../lib/kaitify-core.umd.js"></script>
-</head>
-<body>
-    <div id="editor" style="height: 400px;"></div>
-</body>
-<script>
-    const { Editor, KNode } = window['kaitify-core']
-    const editor = Editor.configure({
-        value:'hello',
-        el:'#editor'
-    })
-    console.log(window['kaitify-core']);
-</script>
-</html>