iView Editor 是基于 iView 的 markdown 编辑器,支持上传图片(可集成七牛等服务),支持全屏实时编辑预览。
npm install iview-editor --save 在 webpack 中使用插件,部分代码省略:
import Vue from 'vue'; import iView from 'iview'; import iEditor from 'iview-editor'; // 使用 css import 'iview/dist/styles/iview.css'; import 'iview-editor/dist/i-editor.css'; // 使用插件 Vue.use(iView); Vue.use(iEditor);在 .vue 中使用:
<template> <i-editor v-model="content"></i-editor> </template> <script> export default { data () { return { content: '' } } } </script><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>iView Editor</title> <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css"> <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview-editor/dist/iview-editor.css"> <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script> <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script> <script type="text/javascript" src="http://unpkg.com/iview-editor/dist/iview-editor.js"></script> </head> <body> <div id="app"> <i-editor v-model="content"></i-editor> </div> <script> new Vue({ el: '#app', data: { content: '' } }) </script> </body> </html>