0
代码
代码
Issues
Pull Requests
讨论
Wiki
分析
0
GGitHubchore: dev 增加多种模式配置示例 (#1454)
69927b25创建于 2025年10月5日历史提交
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cherry Markdown API</title>
  <style>
    html,
    body {
      margin: 0;
      margin-left: auto;
      margin-right: auto;
      padding: 0;
      width: 70%;
      min-width: 800px;
      height: 100%;
    }

    #markdown {
      position: fixed;
      width: 50%;
      right: 0;
      bottom: 0;
      min-width: 800px;
    }

    .apis {
      position: absolute;
      left: 0;
      width: 50%;
    }

    .one-api {
      padding-left: 25px;
      margin-top: 10px;
      border-top: 1px solid #dfe6ee;
      padding-top: 10px;
    }

    textarea {
      display: inline-block;
      width: 80%;
    }

    .one-api__try a {
      cursor: pointer;
      color: #3582fb;
      font-size: 14px;
    }

    .cherry-api-table {
      width: 90%;
    }

    .cherry-api-table th {
      background-color: #dfe6ee;
    }

    .cherry-api-table td {
      border-bottom: 1px solid #dfe6ee;
      text-align: center;
    }
  </style>
  <link rel="stylesheet" type="text/css" href="../packages/cherry-markdown/dist/cherry-markdown.css">
  <link rel="Shortcut Icon" href="./logo/favicon.ico">
  <link rel="Shortcut Icon" href="../logo/favicon.ico">
  <link rel="Bookmark" href="../logo/favicon.ico">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
    integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
</head>

<body>
  <div class="apis" onclick="dealClick">
    <h1>Cherry API</h1>
    <div class="one-api">
      <h2 class="one-api__name">setMarkdown(content:string, keepCursor = false)</h2>
      <p class="one-api__desc">设置内容，setValue(content:string, keepCursor = false)有同样的功能<br>keepCursor = true 更新内容的时候保持光标位置</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容" rows="20">
cherryObj.setMarkdown("输入内容\n5秒后会随机插入新内容，期间可以**继续输入**，文档内容更新时，光标相对位置不变");
// 在字符串随机位置插入字符
function insertStr(str) {
  const md = cherryObj.getValue();
  const index = Math.floor(Math.random() * md.length);
  return md.slice(0, index) + str + md.slice(index);
}
setTimeout(() => cherryObj.setMarkdown(cherryObj.getValue().replace('5秒', '4秒'), 1), 1000);
setTimeout(() => cherryObj.setMarkdown(cherryObj.getValue().replace('4秒', '3秒'), 1), 2000);
setTimeout(() => cherryObj.setMarkdown(cherryObj.getValue().replace('3秒', '2秒'), 1), 3000);
setTimeout(() => cherryObj.setMarkdown(cherryObj.getValue().replace('2秒', '1秒'), 1), 4000);
setTimeout(() => cherryObj.setMarkdown(cherryObj.getValue().replace('1秒后会', '开始'), 1), 5000);
setTimeout(() => cherryObj.setMarkdown(insertStr(' hello '), 1), 5000);
setTimeout(() => cherryObj.setMarkdown(insertStr(' `world` '), 1), 6000);
setTimeout(() => cherryObj.setMarkdown(insertStr(' hello '), 1), 7000);
setTimeout(() => cherryObj.setMarkdown(insertStr(' \n# 测试\n '), 1), 8000);
setTimeout(() => cherryObj.setMarkdown(insertStr(' \n| Header | Header | Header |\n| ------ | ------ | ------ |\n| Sample | Sample | Sample |\n| Sample | Sample | Sample |\n '), 1), 9000);
</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">insert(content:string, isSelect = false, anchor = false, focus = true)</h2>
      <p class="one-api__desc">插入内容<br>isSelect=true 选中刚插入的内容<br>anchor=false 在光标处插入内容，anchor=[1,3] 在第2行第4个字符处插入内容</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容">
cherryObj.insert("在光标处插入内容");
cherryObj.insert("在第二行插入内容，并选中插入的内容", true, [1,0]);
</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">getMarkdown()</h2>
      <p class="one-api__desc">获取markdown内容</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容">
alert(cherryObj.getMarkdown());
console.log(cherryObj.getMarkdown());</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">getHtml()</h2>
      <p class="one-api__desc">获取渲染后的html内容</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容">
alert(cherryObj.getHtml());
console.log(cherryObj.getHtml());</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">destroy()</h2>
      <p class="one-api__desc">销毁函数</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容">
cherryObj.destroy();</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">resetToolbar(type:string, toolbar:array)</h2>
      <p class="one-api__desc">重置工具栏<br>type 修改工具栏的类型 {'toolbar'|'toolbarRight'|'sidebar'|'bubble'|'float'|'toc'}<br>toolbar 工具栏配置</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容" rows="5">
cherryObj.resetToolbar('toolbar', ['bold', 'table']);
cherryObj.resetToolbar('toolbarRight', ['fullScreen', 'togglePreview', 'export', 'wordCount']);
cherryObj.resetToolbar('toc', true);
</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">export(type:string)</h2>
      <p class="one-api__desc">导出预览区域的内容，type：{'pdf'|'img'}</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容" rows="5">
if(confirm('导出pdf')) {
  cherryObj.export();
}else if(confirm('导出长图')) {
  cherryObj.export('img');
}</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">switchModel(model:string)</h2>
      <p class="one-api__desc">
        切换模式：{'edit&preview'|'editOnly'|'previewOnly'}
      </p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容" rows="7">
if(confirm('只读模式')) {
  cherryObj.switchModel('previewOnly');
}else if(confirm('纯编辑模式')) {
  cherryObj.switchModel('editOnly');
}else if(confirm('双栏编辑模式')) {
  cherryObj.switchModel('edit&preview');
}</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">getToc()</h2>
      <p class="one-api__desc">获取由标题组成的目录</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容">
alert(cherryObj.getToc());
console.log(cherryObj.getToc());</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">getCodeMirror()</h2>
      <p class="one-api__desc">获取左侧编辑器实例</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容">
alert(cherryObj.getCodeMirror());
console.log(cherryObj.getCodeMirror());</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">getPreviewer()</h2>
      <p class="one-api__desc">获取右侧预览区对象实例</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容">
alert(cherryObj.getPreviewer());
console.log(cherryObj.getPreviewer());</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">Previewer.scrollToId(id:string, behavior:{'smooth'|'instant'|'auto'})</h2>
      <p class="one-api__desc">滚动到对应id的元素位置<br>id 可以为带#号hash，也可以是id值<br>behavior: smooth(默认) 平滑滚动；instant 立即滚动；auto 跟随浏览器默认行为</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容">
// cherryObj.previewer.scrollToId('#gettoc'); 两种写法都可以
cherryObj.previewer.scrollToId('gettoc');</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">Previewer.scrollToTop(scrollTop:number, behavior:{'auto'|'smooth'|'instant'})</h2>
      <p class="one-api__desc">滚动到对应位置<br>scrollTop 滚动距离<br>behavior: auto(默认) 跟随浏览器默认行为；smooth 平滑滚动；instant 立即滚动</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容">
cherryObj.previewer.scrollToTop(3000);</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">setLocale(locale:string)</h2>
      <p class="one-api__desc">修改语言<br>系统默认支持：zh_CN | en_US | ru_RU</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容">
cherryObj.setLocale('en_US');</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">setTheme(theme:string)</h2>
      <p class="one-api__desc">修改主题</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容">
cherryObj.setTheme('dark');</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">setCodeBlockTheme(theme:string)</h2>
      <p class="one-api__desc">修改代码块主题</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容">
cherryObj.setCodeBlockTheme('one-dark');</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">toggleToc(focusModel:{'full'|'pure'|''})</h2>
      <p class="one-api__desc">修改右侧悬浮目录的状态</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容" rows="5">
cherryObj.toggleToc(); // 切换状态
cherryObj.toggleToc('full'); // 强制切换到全屏状态
cherryObj.toggleToc('pure'); // 强制切换到极简状态</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">refreshPreviewer()</h2>
      <p class="one-api__desc">强制重新渲染预览区域</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容">
cherryObj.refreshPreviewer();</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">clearFlowSessionCursor()</h2>
      <p class="one-api__desc">清空流程会话中添加的虚拟光标</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容">
cherryObj.clearFlowSessionCursor();</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">getFirstLineText(defaultText = '')</h2>
      <p class="one-api__desc">获取第一行非空文本内容<br>应用场景：根据文本内容自动生成文章标题</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容">
alert(cherryObj.getFirstLineText());</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <br>
    <hr>

    <h1>Cherry.engine API</h1>

    <div class="one-api">
      <h2 class="one-api__name">engine.makeHtml(markdown:string, returnType:string = 'string')</h2>
      <p class="one-api__desc">将markdown字符串渲染成Html<br>returnType='string'：返回html字符串<br>returnType='object'：返回HTMLCollection</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容">
alert(cherryObj.engine.makeHtml('This is `inline code`'));
console.log(cherryObj.engine.makeHtml('This is `inline code`'));</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">engine.makeMarkdown(html:string)</h2>
      <p class="one-api__desc">将html字符串渲染成markdown</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容" rows="4">
var html = `<p>This is <code>inline code</code></p>`;
alert(cherryObj.engine.makeMarkdown(html));
console.log(cherryObj.engine.makeMarkdown(html));</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <br>
    <hr>

    <h1>Cherry.toolbar.toolbarHandlers API</h1>
    <p><strong>注：</strong>要调用 toolbarHandlers 的API，需要先在<code>cherry.config.toolbars</code>的“toolbar|toolbarRight|sidebar|bubble|float”中的其中一项里配置上对应的工具栏</p>

    <div class="one-api">
      <h2 class="one-api__name">toolbar.toolbarHandlers.bold()</h2>
      <p class="one-api__desc">向cherry编辑器中插入加粗语法</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容">
cherryObj.toolbar.toolbarHandlers.bold()</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">toolbar.toolbarHandlers.italic()</h2>
      <p class="one-api__desc">向cherry编辑器中插入斜体语法</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容">
cherryObj.toolbar.toolbarHandlers.italic()</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">toolbar.toolbarHandlers.strikethrough()</h2>
      <p class="one-api__desc">向cherry编辑器中插入删除线语法</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容">
cherryObj.toolbar.toolbarHandlers.strikethrough()</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">toolbar.toolbarHandlers.size(fontSize: int)</h2>
      <p class="one-api__desc">向cherry编辑器中插入字体大小语法</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容">
cherryObj.toolbar.toolbarHandlers.size(28)</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">toolbar.toolbarHandlers.color(param:string)</h2>
      <p class="one-api__desc">
        向cherry编辑器中插入字体颜色或字体背景色语法
        <table class="cherry-api-table">
          <thead>
            <tr>
              <th style="width: 400px;">param</th>
              <th>效果</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>'color: #c2255c'</td>
              <td>字体颜色</td>
            </tr>
            <tr>
              <td>'background-color: #c2255c'</td>
              <td>字体背景颜色</td>
            </tr>
          </tbody>
        </table>
      </p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容">
cherryObj.toolbar.toolbarHandlers.color('color: #3582fb')</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">toolbar.toolbarHandlers.header(level:int)</h2>
      <p class="one-api__desc">向cherry编辑器中插入标题语法</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容" rows="3">
cherryObj.toolbar.toolbarHandlers.header(1)
cherryObj.toolbar.toolbarHandlers.header(2)
cherryObj.toolbar.toolbarHandlers.header(4)</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">toolbar.toolbarHandlers.quote()</h2>
      <p class="one-api__desc">向cherry编辑器中插入引用语法</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容" rows="2">
cherryObj.toolbar.toolbarHandlers.quote()</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">toolbar.toolbarHandlers.panel(param:string)</h2>
      <p class="one-api__desc">
        向cherry编辑器中插入对齐方式或信息面板语法
        <table class="cherry-api-table">
          <thead>
            <tr>
              <th style="width: 400px;">param</th>
              <th>效果</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>'left'</td>
              <td>左对齐</td>
            </tr>
            <tr>
              <td>'center'</td>
              <td>居中对齐</td>
            </tr>
            <tr>
              <td>'right'</td>
              <td>右对齐</td>
            </tr>
            <tr>
              <td>'primary'</td>
              <td>首选项</td>
            </tr>
            <tr>
              <td>'info'</td>
              <td>一般信息</td>
            </tr>
            <tr>
              <td>'warning'</td>
              <td>警告</td>
            </tr>
            <tr>
              <td>'danger'</td>
              <td>危险</td>
            </tr>
            <tr>
              <td>'success'</td>
              <td>成功</td>
            </tr>
          </tbody>
        </table>
      </p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容">
cherryObj.toolbar.toolbarHandlers.panel('success')</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">toolbar.toolbarHandlers.list(type:string)</h2>
      <p class="one-api__desc">
        向cherry编辑器中插入有序、无序列表或者checklist语法
      <table class="cherry-api-table">
        <thead>
          <tr>
            <th>level</th>
            <th>效果</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>'1'</td>
            <td>ol 列表</td>
          </tr>
          <tr>
            <td>'2'</td>
            <td>ul 列表</td>
          </tr>
          <tr>
            <td>'3'</td>
            <td>checklist</td>
          </tr>
        </tbody>
      </table>
      </p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容" rows="7">
if(confirm('有序列表')) {
  cherryObj.toolbar.toolbarHandlers.list(1);
}else if(confirm('无序列表')) {
  cherryObj.toolbar.toolbarHandlers.list('2');
}else if(confirm('checklist')) {
  cherryObj.toolbar.toolbarHandlers.list(3);
}</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">toolbar.toolbarHandlers.insert(type:string)</h2>
      <p class="one-api__desc">
        向cherry编辑器中插入特定语法：
      <table class="cherry-api-table">
        <thead>
          <tr>
            <th>type</th>
            <th>效果</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>'hr'</td>
            <td>删除线</td>
          </tr>
          <tr>
            <td>'br'</td>
            <td>强制换行</td>
          </tr>
          <tr>
            <td>'code'</td>
            <td>代码块</td>
          </tr>
          <tr>
            <td>'formula'</td>
            <td>行内公式</td>
          </tr>
          <tr>
            <td>'checklist'</td>
            <td>检查项</td>
          </tr>
          <tr>
            <td>'toc'</td>
            <td>目录</td>
          </tr>
          <tr>
            <td>'link'</td>
            <td>超链接</td>
          </tr>
          <tr>
            <td>'normal-table'</td>
            <td>插入3行5列的表格</td>
          </tr>
          <tr>
            <td>'normal-table-row*col'</td>
            <td>如<code>normal-table-2*4</code>插入2行(包含表头是3行)4列的表格</td>
          </tr>
        </tbody>
      </table>
      </p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容" rows="7">
if(confirm('插入3*4的表格')) {
  cherryObj.toolbar.toolbarHandlers.insert('normal-table-3*4');
}else if(confirm('插入checklist')) {
  cherryObj.toolbar.toolbarHandlers.insert('checklist');
}</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">toolbar.toolbarHandlers.image()</h2>
      <p class="one-api__desc">向cherry编辑器中插入图片文件</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容">
cherryObj.toolbar.toolbarHandlers.image()</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">toolbar.toolbarHandlers.video()</h2>
      <p class="one-api__desc">向cherry编辑器中插入视频文件</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容">
cherryObj.toolbar.toolbarHandlers.video()</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">toolbar.toolbarHandlers.audio()</h2>
      <p class="one-api__desc">向cherry编辑器中插入音频文件</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容">
cherryObj.toolbar.toolbarHandlers.audio()</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">toolbar.toolbarHandlers.pdf()</h2>
      <p class="one-api__desc">向cherry编辑器中插入PDF文件</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容">
cherryObj.toolbar.toolbarHandlers.pdf()</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">toolbar.toolbarHandlers.word()</h2>
      <p class="one-api__desc">向cherry编辑器中插入Word文件</p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容">
cherryObj.toolbar.toolbarHandlers.word()</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>

    <div class="one-api">
      <h2 class="one-api__name">toolbar.toolbarHandlers.graph(type:string)</h2>
      <p class="one-api__desc">
        向cherry编辑器中插入画图语法
      <table class="cherry-api-table">
        <thead>
          <tr>
            <th>id</th>
            <th>效果</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>'1'</td>
            <td>流程图</td>
          </tr>
          <tr>
            <td>'2'</td>
            <td>时序图</td>
          </tr>
          <tr>
            <td>'3'</td>
            <td>状态图</td>
          </tr>
          <tr>
            <td>'4'</td>
            <td>类图</td>
          </tr>
          <tr>
            <td>'5'</td>
            <td>饼图</td>
          </tr>
          <tr>
            <td>'6'</td>
            <td>甘特图</td>
          </tr>
        </tbody>
      </table>
      </p>
      <div class="one-api__try">
        <textarea id="setMarkdown" placeholder="输入内容" rows="3">
cherryObj.toolbar.toolbarHandlers.graph(1)
cherryObj.toolbar.toolbarHandlers.graph('2')
cherryObj.toolbar.toolbarHandlers.graph(4)</textarea>
        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
      </div>
    </div>
  </div>

  <div id="markdown"></div>

  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.6.0/dist/echarts.js"></script>
  <!--<script src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>-->
  <script src="../packages/cherry-markdown/dist/cherry-markdown.js"></script>
  <script src="./assets/scripts/api-demo.js"></script>
</body>

</html>