@zhanggujun/editor v1.0.15

MarkdownEditor

一个基于svelte，marked，xss，highlight.js的简单markdown编辑器。参考自Houfeng大神的mditor，感谢大神，之前写自己博客的时候用过一段时间大神的编辑器，感觉挺好用的。后面想着，要不自己也照着写一个，然后就开始撸了。 本来想着完全靠拼字符串的方式来搞，后面一看大神用了自己写的一个mvvm框架，mokit，正好那天在npm看到svelte这个框架，于是就拿着来用了。写的过程一言难尽，能力有限，还有很多待优化的地方。

Demo

To view a demo online: https://codesandbox.io/s/amazing-moore-9t0ln

引入

npm install @zhanggujun/editor --save

import { MdCreate } from '@zhanggujun/editor'
import "@zhanggujun/editor/dist/editor.min.css"

Or use directly from a CDN

<link href="https://unpkg.com/@zhanggujun/editor@1.0.8/dist/editor.min.css"/>
<script src="https://unpkg.com/@zhanggujun/editor@1.0.8/dist/editor.min.js"></script>

使用

MdMarked

内置markdown解析，依赖marked，highlight.js。参数为string,xssOptions(非必传，默认展示iframe)

<div id="box"></div>

<script>
  const { MdMarked } from '@zhanggujun/editor'
  import "@zhanggujun/editor/dist/editor.min.css"
  const string = '> markdown字符串'
  const xssOptions = { ... }
  document.getElementById('#box').innerHTML = MdMarked(string,{ xssOptions }).html
  or
  document.getElementById('#box').innerHTML = MdMarked(string).html
</script>

MdCreate

默认配置

<div id="box"></div>

> 一些简单的方法
```html
<div id="box"></div>
<script>

  const mditor = new MdEditor.MdCreate('#box')
  
  // toolbar方法
  
  // has(name)
  cosnt hasItem = mditor.toolbar.has('undo') // 参数为工具按钮的name属性
  
  // add(item) 参数item为一个对象，内hander属性为函数
  // 可以在里边写需要对按钮进行操作的事件，key为快捷键(以+号连接) name和icon必传。icon使用的阿里的iconfont
  const item = {
    name:'insert',
    icon:'icon-xxx',
    key:'shift+alt+s',
    title:'xxxx',
    handler:function(){
      // dosomething
    }
  }
  mditor.toolbar.add(_addItem)
  
  //del 
  mditor.toolbar.del(name)
  
  //replace(name,item) 替换某个按钮,item同add
  mditor.toolbar.replace(name,item)
  
  //get(name) 获得一个按钮
  const getItem = mditor.toolbar.get(name)
  
  // set(item) 设置按钮(name属性相同则替换，不同则添加)
  const getItem = mditor.toolbar.get(name)
  getItem.handler = () => { //dosomething }
  mditor.toolbar.set(getItem)
    
  // editor方法
  
  // insertAfterText(text) 在光标之后添加内容
  mditor.insertAfterText('hello word')
  
  // insertBeforeText(text) 光标之前添加内容
  mditor.insertBeforeText('before')

  // setText(text)  重新设置编辑器的值
  mditor.setText('我是重置的值')

  // getText() 获取编辑器值(字符串)
  cosnt text = mditor.getText()
  console.log(text)
    
</script>

配置

参数

表中的参数代表的是内部标识的name，内部的方法会使用name做一些其他的操作

工具栏方法 mditor.toolbar.xxx

参数中name为上表中的参数字段，都是String类型 item为Object类型,其中icon和name字段是必填的，其他的为选填

编辑器方法 mditor.xxx

快捷键

由于使用框架+个人能力问题，目前只有在同一个页面实例一个编辑器的时候，快捷键有用。。。😳，会自动区分平台使用对应的键值。(PS:缩进和撤销缩进(tab/shift+tab)在所有实例里边都能用)

关于快捷键与编辑过程中的一些自动处理

• 在添加有序/无序列表、引用的时候，直接敲回车键，会自动保持上一行的标识符

• 无序列表自动添加- , * ,+ ,等标识 有序列表自动添加序号 引用内容自动添加> 符号 如果换行之后不输入内容再次敲回车，则删除标识符并跳转到下一行由用户控制输入

• 自动和上一行保持缩进一致

• 默认设置了一些快捷键

License

MIT