Vue.Js开源－Markdown 编辑器

   <h2>mavonEditor</h2>    <p>基于Vue的markdown编辑器</p>    <h2>example (图片展示)</h2>    <h3>PC</h3>    <p style="text-align:center"><img src="https://simg.open-open.com/show/bb370ad0c4e22e2d660b6914da93b0a1.png"></p>    <h3>移动</h3>    <p style="text-align:center"><img src="https://simg.open-open.com/show/f1b36a02f8d6123c48efeb209f369c4b.png"> <img src="https://simg.open-open.com/show/1fcee472934430da43af77565082956c.png"></p>    <h2>Use Setup (开始)</h2>    <h3>Install mavon-editor (安装)</h3>    <pre>  <code class="language-javascript">$ npm install mavon-editor --save</code></pre>    <h3>package.json</h3>    <pre>  <code class="language-javascript">"mavon-editor": "^1.3.3"</code></pre>    <h3>Use (如何引入)</h3>    <pre>  <code class="language-javascript">// 方法一      // import with ES6      import Vue from 'vue'      import mavonEditor from 'mavon-editor'        // require with Webpack/Node.js      var Vue = require('vue')      var mavonEditor = require('mavon-editor')        // use      Vue.use(mavonEditor)</code></pre>    <pre>  <code class="language-javascript">// 方法二      // or use with component(ES6)      import { mavonEditor } from 'mavon-editor'        export default {        components: {          mavonEditor        }      }</code></pre>    <h3>html</h3>    <pre>  <code class="language-javascript"><!-- 使用双向绑定修饰符 -->      <mavonEditor v-model="value"/></code></pre>    <pre>  <code class="language-javascript"><!-- 当value发生改变 , 触发change事件 -->      <mavonEditor :value="value" @change="function"/></code></pre>    <ul>     <li>默认大小样式为 min-height: 300px , ming-width: 300px 可自行覆盖</li>     <li><strong>基础z-index: 1500</strong></li>     <li><strong>单栏编辑模式下 , TAB键 主动触发markdown渲染</strong></li>     <li>屏幕分辨率低于768px ，自动取消【单栏 | 双栏】编辑模式 ，更改为【编辑 | 预览】切换 ， 并且取消【沉浸式阅读】模式( > 768px 的眼睛图标为【阅读模式】 , 反之为【编辑 |预览】)</li>    </ul>    <h2>API 文档</h2>    <h3>props</h3>    <table>     <thead>      <tr>       <th>name 名称</th>       <th>type 类型</th>       <th>default 默认值</th>       <th>describe 描述</th>      </tr>     </thead>     <tbody>      <tr>       <td>value</td>       <td>String</td>       <td> </td>       <td>初始值</td>      </tr>      <tr>       <td>scrollStyle</td>       <td>Boolean</td>       <td>true</td>       <td>开启滚动条样式(暂时仅支持chrome)</td>      </tr>      <tr>       <td>subfield</td>       <td>Boolean</td>       <td>true</td>       <td>默认开启双栏编辑(单栏模式 TAB键主动触发markdown渲染)</td>      </tr>      <tr>       <td>toolbars</td>       <td>Object</td>       <td>如下</td>       <td>工具栏</td>      </tr>     </tbody>    </table>    <pre>  <code class="language-javascript">/*      默认工具栏按钮全部开启, 如需关闭, 设置对应键值为false即可      例如: {          bold: false      }      此时, 粗体将被隐藏,其余正常显示   */  toolbars: {        bold: true, // 粗体        italic: true,// 斜体        header: true,// 标题        underline: true,// 下划线        strikethrough: true,// 中划线        mark: true,// 标记        superscript: true,// 上角标        subscript: true,// 下角标        quote: true,// 引用        ol: true,// 有序列表        ul: true,// 无序列表        link: true,// 链接        imagelink: true,// 图片链接        code: true,// code        table: true,// 表格        subfield: true,// 是否需要分栏        fullscreen: true,// 全屏编辑        readmodel: true,// 沉浸式阅读        htmlcode: true,// 展示html源码        help: true// 帮助    }</code></pre>    <h3>events</h3>    <table>     <thead>      <tr>       <th>name 方法名</th>       <th>params 参数</th>       <th>describe 描述</th>      </tr>     </thead>     <tbody>      <tr>       <td>change</td>       <td>String: value , String: reder</td>       <td>编辑区发生变化的回调事件(render: value 经过markdown解析后的结果)</td>      </tr>      <tr>       <td>save</td>       <td>String: value , String: reder</td>       <td>ctrl + s 的回调事件(后续添加保存按键,同样触发该回调)</td>      </tr>      <tr>       <td>fullscreen</td>       <td>Boolean: status , String value</td>       <td>切换全屏编辑的回调事件(boolean: 全屏开启状态)</td>      </tr>      <tr>       <td>readmodel</td>       <td>Boolean: status , String value</td>       <td>切换沉浸式阅读的回调事件(boolean: 阅读开启状态)</td>      </tr>      <tr>       <td>htmlcode</td>       <td>Boolean: status , String value</td>       <td>查看html源码的回调事件(boolean: 源码开启状态)</td>      </tr>      <tr>       <td>subfieldtoggle</td>       <td>Boolean: status , String value</td>       <td>切换单双栏编辑的回调事件(boolean: 双栏开启状态)</td>      </tr>      <tr>       <td>helptoggle</td>       <td>Boolean: status , String value</td>       <td>查看帮助的回调事件(boolean: 帮助开启状态)</td>      </tr>     </tbody>    </table>    <h2>Dependencies (依赖)</h2>    <ul>     <li> <p><a href="/misc/goto?guid=4959717902173401700" rel="nofollow,noindex">markdown-it</a></p> </li>     <li> <p><a href="/misc/goto?guid=4959747614585499077" rel="nofollow,noindex">auto-textarea</a></p> </li>     <li> <p><a href="/misc/goto?guid=4959747614686574144" rel="nofollow,noindex">stylus</a></p> </li>    </ul>    <h2>follow-up (后续)</h2>    <ul>     <li>撤销键、清空键、保存按钮</li>     <li>支持开启标题导航</li>     <li>滚动条样式的浏览器兼容性</li>     <li>自定义工具栏功能键</li>     <li>提高移动端样式适配性</li>     <li>markdown样式自定义</li>     <li>重构</li>    </ul>    <h2>update(更新内容)</h2>    <ul>     <li>1.3.3 多个编辑器z-index冲突</li>     <li>1.3.2 props 传递方法 更改为 v-on 绑定方法</li>    </ul>    <h2>Licence (证书)</h2>    <p>mavonEditor is open source and released under the MIT Licence.</p>    <p>Copyright (c) 2017 hinesboy</p>    <p> </p>    <p>项目主页：<a href="http://www.open-open.com/lib/view/home/1492566478177">http://www.open-open.com/lib/view/home/1492566478177</a></p>    <p> </p>