vue项目引入markdown
git地址：https://github.com/showdownjs/showdown 其实引入markdown挺简单的：
npm install showdown接下来是用法：
<template>
<div style="width:100%;min-width:1200px">
<div style="display:inline-block;width:50%;">
<!-- textarea之间不要有空格 -->
<textarea v-model='content'></textarea>
</div>
<div style="display:inline-block;width:50%;">
<div id="show-content"></div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
'content':'',
'converter':null
}
},
watch:{
'content':'contentChanged'
},
mounted(){ this.init(); },
methods: {
init(){
var showdown = require('showdown');
var converter = new showdown.Converter();
this.converter = converter;
},
contentChanged(){
var html = this.converter.makeHtml(this.content);
document.getElementById('show-content').innerHTML = html;
}
}
}
</script>
<style>
#show-content{
padding:25px;
}
</style>于是，一个简单的markdown编辑器就完成了，接下来，上图：
简单markdown编辑器.png
由于我用的是elementUI，所以样式可能会有些许不一样的地方，其中不一样的地方：
<template>
<div >
<el-row>
<el-col :span="12" >
<el-input type="textarea" v-model="content" :autosize="{ minRows: 20, maxRows: 80}" placeholder="请输入内容" >
</el-input>
</el-col>
<el-col :span="12" >
<div id="show-content" class="text-left">
</div>
</el-col>
</el-row>
</div>
</template>好了，到此处，一个简单的markdown编辑器就已经做完了。
接下来的是扩展与优化：
1. 快捷键的监听
目前为止，按tab键textaera会失去焦点，那么要怎么做呢。
参考：JavaScript让Textarea支持tab按键的方法
代码做部分修改： 首先，assets/js目录下创建textarea_extend.js文件，然后将上面参考网站的代码复制进去，然后将var textarea = document.getElementsByTagName('textarea')[0];及以下代码写在一个函数里面，具体如下：
export function surpportTab(id){
// var textarea = document.getElementsByTagName('textarea')[0];
var textarea = document.getElementById(id);
textarea.onkeydown = function(event) {
//support tab on textarea
if (event.keyCode == 9) { //tab was pressed
var newCaretPosition;
newCaretPosition = textarea.getCaretPosition() + " ".length;
textarea.value = textarea.value.substring(0, textarea.getCaretPosition()) + " " + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length);
textarea.setCaretPosition(newCaretPosition);
return false;
}
if(event.keyCode == 8){
//backspace
if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == " ") {
//it's a tab space
var newCaretPosition;
newCaretPosition = textarea.getCaretPosition() - 3;
textarea.value = textarea.value.substring(0, textarea.getCaretPosition() - 3) + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length);
textarea.setCaretPosition(newCaretPosition);
}
}
if(event.keyCode == 37){ //left arrow
var newCaretPosition;
if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == " ") {
//it's a tab space
newCaretPosition = textarea.getCaretPosition() - 3;
textarea.setCaretPosition(newCaretPosition);
}
}
if(event.keyCode == 39){
//right arrow
var newCaretPosition;
if (textarea.value.substring(textarea.getCaretPosition() + 4, textarea.getCaretPosition()) == " ") {
//it's a tab space
newCaretPosition = textarea.getCaretPosition() + 3;
textarea.setCaretPosition(newCaretPosition);
}
}
}
}调用该方法：
在textarea控件上加上id：
...
<el-input id="markdown-editor" type="textarea" ...
...引入函数：
import {surpportTab} from '@/assets/js/textarea_extend.js'然后在init函数里面初始化textaera:
...
surpportTab('markdown-editor');
...2. ctrl+S进行保存
同样可以写在textarea_extend.js中：
export function surpportSave(id,callbak){
var textarea = document.getElementById(id);
textarea.addEventListener('keydown', function(e) {
if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
e.preventDefault();
callbak && callbak();
}
});
}调用：
import {surpportTab,surpportSave} from '@/assets/js/textarea_extend.js'
...
surpportSave('markdown-editor',function(){
alert('已保存！');
});最后，发现了一款不错的markdown编辑器，可以直接拿来使用： 一款强大的Vue-markdown编辑器插件
看了这篇文章之后的感慨：我们不编写代码，我们只是代码库的搬运工。。。T_T
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018/09/02，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读