1.4.7 • Published 3 years ago
@twoke/markdown v1.4.7
快速上手
引入 @twoke/markdown
1、安装脚手架工具
npm install -g @vue/cli
# OR
yarn global add @vue/cli
2、创建一个项目
vue create markdown-demo
3、使用组件
npm i -D @twoke/markdown
完整引入
import Vue from 'vue'
import App from './App.vue'
import Markdown from '@twoke/markdown'
import '@twoke/markdown/lib/style/index.css'
Vue.config.productionTip = false
Vue.use(Markdown)
new Vue({
render: h => h(App),
}).$mount('#app')
<template>
<div id="app">
<markdown-edit v-model="value"></markdown-edit>
</div>
</template>
<script>
export default {
name: 'App',
data: () => ({
value: ''
})
}
</script>
页面渲染效果
按需引入
引入babel-plugin-component
npm i babel-plugin-component -D
# For babel6
npm i babel-plugin-component@0 -D
创建babel.config.js
{
"plugins": [
["component", {
"libraryName": "@twoke/markdown",
"libDir": "lib",
"styleLibraryName": "style",
"style": true,
}, "@twoke/markdown"]
]
}
import Vue from 'vue'
import App from './App.vue'
import { MarkdownEdit } from '@twoke/markdown'
Vue.config.productionTip = false
Vue.use(MarkdownEdit)
new Vue({
render: h => h(App),
}).$mount('#app')
使用
MarkdownBody 内容渲染组件
<template>
<div>
<textarea id="edit" v-model="content"></textarea>
<!-- v-model 绑定markdown内容 htmlCode: 获取转化后的htmlCode 注意:需要添加sync -->
<markdown-body v-model="content" :htmlCode.sync="currentHtmlCode"></markdown-body>
markdown: {{content}}
html: {{currentHtmlCode}}
</div>
</template>
<script>
export default {
name: 'MarkdownBodyDemo',
data: () => ({
currentHtmlCode: '',
content: ''
})
}
</script>
<style scoped>
#edit {
outline: none;
width: 100%;
height: 400px;
font-size: 18px;
}
</style>
效果图
MarkdownEdit 编辑组件
(内嵌MarkdownBody, MarkdownToc)
<template>
<markdown-edit v-model="content"></markdown-edit>
</template>
<script>
export default {
data () {
return {
content: ''
}
}
}
</script>
<style>
</style>
效果图
MarkdownToc 内容目录生产组件
<template>
<div id="test-toc">
<div id="demoBox">
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<div style="text-align:center">
<h1>中心布局 1</h1>
<h2>中心布局 2</h2>
<h3>中心布局 3</h3>
<h4>中心布局 4</h4>
</div>
<h1>这个名字超级长这个名字超级长这个名字超级长这个名字超级长这个名字超级长这个名字超级长这个名字超级长这个名字超级长</h1>
<h2>标题二</h2>
</div>
<markdown-toc style="width: 300px;" domId="demoBox"/>
</div>
</template>
<script>
export default {
data () {
return {
domId: 'demoBox'
}
}
}
</script>
<style>
#test-toc {
display: flex;
flex-direction: row;
justify-content: space-between;
}
</style>
效果图