基于 Vue 的编辑器,用于小兔笔记。
当前版本尚在开发中,API随时可能变动,请勿在生产环境中使用
npm install git+https://github.com/TooNote/MdEditor.git
封装为.vue单文件组件,直接引用使用。
属性:
content编辑器中显示的内容
editor 会通过事件与外界通信,当内部有事件产生时,需要外部监听处理,目前会触发的事件:
save-attachment当粘贴或者拖拽附件时会触发,参数:filepath本地文件的路径,或者@clipboard表示剪贴板ext文件后缀,如.jpg,可能为空
content-change编辑器内容改变时触发,参数:content编辑器中的内容
line-scroll滚动时触发,参数:row当前编辑器可视区域第一行行号
外界有事件需要内部响应时,可以修改tnEvent的值,tnEvent为一个对象
tnEventtype事件类型data事件附加的数据
目前editor会响应如下类型事件:
newAttachment图片存储完毕,需要插入到编辑器中显示,data.url为附件地址layout布局变更,需要 editor 重新适配大小editAction编辑命令,data.action取值undo/redo
值得注意的点:
- 文件未做预编译,需要使用者使用
vue-loader
见如下示例代码:
<template> <editor v-on:content-change="contentChange" v-on:save-attachment="saveAttachment" v-on:line-scroll="lineScroll" v-bind:content="content" v-bind:tn-event="tnEvent" ></editor> </template> <script> import editor from 'tn-md-editor'; // 主app let app = new Vue({ // 示例vuex store,不必须 store, methods:{ // 用于触发事件供editor响应 _tnEvent: function(type, data){ if(!data) data = {}; this.tnEvent = {...data, type, _:Math.random()}; this.$nextTick(() => { // 触发后清空事件 this.tnEvent = {}; }); }, // 编辑器中粘贴或者拖拽图片时响应 saveImage: function(filepath, ext){ if(filepath === '@clipboard'){ // 需要自己写方法存储图片并返回url this._tnEvent('newAttachment', {url:io.saveImageFromClipboard()}); }else{ // 需要自己写方法存储图片并返回url this._tnEvent('newAttachment', {url:io.saveImage(filepath, ext)}); } }, // 编辑器内容改变 contentChange: function(content){ // 处理编辑器的内容,此处示例为触发vuex action this.$store.dispatch('changeCurrentNoteContent', content); }, // 编辑器滚动 lineScroll: function(row){ // 滚动时做点什么事情,此处示例为触发vuex action this.$store.dispatch('syncScroll', row); } }, data:{ // 编辑器会监听tnEvent,变动时响应事件 tnEvent: {}, // 编辑器的内容,当content变化时,编辑器内容也会变化 content: '' }, components: { editor } }); </script>