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="https://unpkg.com/iview/dist/styles/iview.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/iview-editor/dist/iview-editor.css">
<script type="text/javascript" src="https://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/iview/dist/iview.min.js"></script>
<script type="text/javascript" src="https://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>