tc-editor
/
index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="keywords" content="代码编辑器，编辑器js库">
    <meta name="description" content="基于Jetterjs的代码编辑器js库">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <title>tc-editor by theajack</title>
    <link rel="icon" href="assets/images/icon.ico" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="assets/css/index.css"/>
  </head>
  <body>
    <!--header-->
    <div id="header">
      <div id="title">tc-editor</div>
      <div id="smallTitle">功能强大，体积小巧，简单易用的代码编辑器</div>
      <div id="viewProject" class="border-btn" onclick="J.open('https://github.com/theajack/tc-editor')">View project on github</div>

    </div>
    <!--intro-->
    <div id="introPart" class="bg-gray text-black part clearfix">
      <div class="part-title hassmall">功能</div>
      <div class="part-title small">tc-editor 是一款 功能强大，体积小巧（包含图标素材和依赖库共 40kb），简单易用的代码编辑器，一行代码便可以生成一个在线的代码编辑器，支持强大的自定义功能配置，多行代码缩进缩退，向vscode看齐的代码风格。
        <div class="clearfix">
          <div class="func-item">
            <img class="func-img" src="assets/images/tab.png"/>
            <div class="func-text">支持缩进缩退</div>
          </div>
          <div class="func-item">
            <img class="func-img" src="assets/images/simple_use.png"/>
            <div class="func-text">使用方便简单</div>
          </div>
          <div class="func-item">
            <img class="func-img" src="assets/images/powerful.png"/>
            <div class="func-text">功能强大</div>
          </div>
        </div>
      </div>
    </div>


    <!--download-->

    <div id="downloadPart" class="bg-dark text-white part">
      <div class="part-title">安装使用</div>
      <div class='demo-code'>
&lt;div id='editor'>&lt;/div>
      </div>
      <div class='demo-code'>
// npm安装
npm i tc-editor
      </div>
      <div class='demo-code'>
import TCEditor from 'tc-editor';
new TCEditor({el: '#editor'});
      </div>
      <div class='demo-code'>
&lt;!--script 标签引用-->
&lt;div id='editor'>&lt;/div>
&lt;script src="https://cdn.jsdelivr.net/npm/tc-editor">&lt;/script>
&lt;script>
  new TCEditor({el: '#editor'});
&lt;/script>
      </div>
      <!-- <div class="part-title small font-size-bigger">1.script 标签方式引入</div>
        <div class="part-title small">引用： &lt;script src="https://www.theajack.com/cnchar/cnchar.min.js"&gt;&lt;/script&gt;</div>
        <div class="part-title small font-size-bigger">2.npm 方式安装</div>
        <div class="part-title small">安装: npm install cnchar</div>
        <div class="part-title small">使用: import CnChar from 'cnchar' 或 const CnChar = require('cnchar')</div> -->
      <!-- <div id="copyBtn" class="border-btn mb-install" onclick="J.open('cnchar.2.0.4.min.js')">复制源码</div> -->
      <div id="copyBtn" class="border-btn mb-install"
        onclick="J.open('https://github.com/theajack/tc-editor')">查看详细</div>
    </div>
    <!--api-->
    <div id="apiPart" class="bg-gray part">
      <div class="part-title text-black relative">API文档</div>
      <div id="apiItemWrapper" class="clearfix">
        <div class="api-item">
          <div class="api-item-title">默认样式</div>
          <div class="api-item-text">获取汉字完整拼音</div>
        </div>
        <div class="api-item">
          <div class="api-item-title">初始代码</div>
          <div class="api-item-text">为editor标签添加代码</div>
        </div>
        <div class="api-item">
          <div class="api-item-title">禁用编辑</div>
          <div class="api-item-text">禁止用户编辑文字</div>
        </div>

        <div class="api-item">
          <div class="api-item-title">功能按钮</div>
          <div class="api-item-text">通过按钮点击实现功能</div>
        </div>
        <div class="api-item">
          <div class="api-item-title">功能函数</div>
          <div class="api-item-text">js调用功能函数</div>
        </div>
        <div class="api-item">
          <div class="api-item-title">自定义大小</div>
          <div class="api-item-text">自定义编辑器大小</div>
        </div>
        <div class="api-item">
          <div class="api-item-title">自定义样式</div>
          <div class="api-item-text">根据喜好自定义编辑器样式</div>
        </div>
        <div class="api-item">
          <div class="api-item-title">初始化编辑器</div>
          <div class="api-item-text">动态添加编辑器初始化</div>
        </div>
        <div class="api-item">
          <div class="api-item-title">扩展关键词</div>
          <div class="api-item-text">允许添加自定义关键词</div>
        </div>
      </div>
      <div id="apiShowWrapper">
        <div id="apiShowNavi">
          <div id="naviLeft" onclick="lastApi(this)"><span class="navi-arrow">&lt;</span><span class="navi-text">上一节:扩展关键词</span></div>
          <div id="naviRight" onclick="nextApi(this)"><span class="navi-text">下一节:扩展关键词</span><span class="navi-arrow">&gt;</span></div>
          <div id="apiDetailClose" onclick="closeDetail()">x<span class="navi-text">关闭</span></div>
        </div>
        <div id="apiShowContent">

        </div>
      </div>

    </div>
    <!--relate-->
    <div id="relatePart" class="bg-dark text-white part " >
      <div class="part-title hassmall">友情链接</div>
      <div class="part-title small">(欢迎访问)</div>
      <div id="tjLinks">
      </div>
    </div>
    <!--footer-->
    <div id="footer" class="bg-black text-white part">
      <div id="footerLink">
        <span class="link" onclick="J.open('https://github.com/theajack')">GitHub</span>
        <span class="split-icon">|</span>
        <span class="link" onclick="J.open('http://weibo.com/p/1005055304330572/home?from=page_100505&mod=TAB&is_all=1')">Sina Micro-blog</span>
        <span class="split-icon">|</span>

        <span class="wechat-public d-hide" onclick="this.child(0).fadeToggle()">
          WeChat Official Accounts
          <img class="wechat-img" src="assets/images/wechat_qrcode.jpg"/>
        </span>
        <span class="split-icon d-hide">|</span>

        Email:theajack@qq.com
        <div class=" d-show">
          <span class="wechat-public" onclick="this.child(0).fadeToggle()">
            WeChat Official Accounts
            <img class="wechat-img" src="assets/images/wechat_qrcode.jpg"/>
          </span>
        </div>
      </div>
      <div id="copyright">
        <span class="glyphicon glyphicon-copyright-mark"></span> 2020 TheaJack All rights reserved
      </div>
    </div>
    <script src="assets/js/jetter2.min.js"></script>
    <script>J.new=J.ct</script>
    <!-- <script src="assets/js/jcode.min.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/tc-editor"></script>
    <script src="assets/js/apiData.js"></script>
    <script src="assets/js/index.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/theajack/theajack.github.com/other/old/assets/js/link.js"></script>
  </body>
</html>