<file_sep># typeditor

对 typecho 自带编辑器的重新实现，寻找了很多，只有 typecho 的 markdown 标准深得我心

原版是 php + jq 实现，typeditor 使用原生 ts 来写，适配所有前端场景

### Use

npm:

```
yarn add typeditor -S
```

dom:

```html
<div id="typeditor"></div>
```

js:

```javascript
let te = new Typeditor({
  el: '#typeditor', //目标容器
  preview:`https://www.clicli.us/${gv}` //预览地址，可以根据 id 跳转到转义过的前端页面
})
```

#### get/set value

```JavaScript
te.value()
te.value('念念不忘，必有回响')
```

### Parse

关于 markdown 的解析库，typeditor 推荐同样小而美的 [snarkdown](https://github.com/developit/snarkdown)

### License

MIT © 132yse inspired by [typecho](https://github.com/typecho/typecho)
<file_sep>class Typeditor {
  content: string
  el: Element
  template: string
  constructor(options: Options) {
    this.el = document.querySelector(options.el)
    this.content = ''
    this.init()
  }

  init() {
    this.el.innerHTML = `
    <style>
      @import "https://at.alicdn.com/t/font_1151392_5hwi3w2ygqu.css";
      li {
        list-style: none;
      }
      * {
        padding: 0;
        margin: 0
      }
      #typeditor {
        height: 100%;
        width: 100%;
        position: relative;
        font: 14px 微软雅黑;
        color: #334265;
      }
      #typeditor .menu li {
        display: inline-block;
        padding: 6px;
        cursor: pointer;
      }
      #typeditor .menu{
        margin: 6px 0
      }
      #typeditor .menu li:hover,
      #typeditor .menu li.active {
        background: #e0e4ef;
        border-radius: 4px;
      }
      #typeditor .editor {
        height: 100%;
        box-sizing: border-box;
        outline: 0;
        padding: 6px;
      }
    </style>
    <div class="menu">
      <ul>
        <li><i class="te te-bold"></i></li>
        <li><i class="te te-italic"></i></li>
        <li><i class="te te-header"></i></li>
        <li><i class="te te-quote"></i></li>
        <li><i class="te te-code"></i></li>
        <li><i class="te te-link"></i></li>
        <li><i class="te te-image"></i></li>
        <li><i class="te te-preview"></i></li>
      </ul>
    </div>
    <div class="editor" contenteditable="true"></div>
  `
  }

  static tags = {
    bold: { start: '**', end: '**', placeholder: '请输入加粗内容' },
    italic: { start: '*', end: '*', placeholder: '请输入加斜内容' },
    link: { start: '[', end: '][N]', placeholder: '请输入链接标题' },
    image: { start: '![', end: '][N]', placeholder: '请输入图片描述' },
    quote: { start: '>', end: '', placeholder: '请输入引用内容' },
    code: { start: '`', end: '`', placeholder: '请输入代码内容' },
  }

  value(content: string) {
    return content ? (this.el.innerHTML = content) : this.content
  }
}

interface Options {
  el: string
}
