|
|
|
@ -4,15 +4,15 @@ |
|
|
|
<meta charset="utf-8"> |
|
|
|
<title>Vue.js markdown editor example</title> |
|
|
|
<link rel="stylesheet" href="style.css"> |
|
|
|
<script src="https://cdn.jsdelivr.net/marked/0.3.5/marked.min.js"></script> |
|
|
|
<script src="https://cdn.jsdelivr.net/lodash/4.11.1/lodash.min.js"></script> |
|
|
|
<script src="https://unpkg.com/marked@0.3.6"></script> |
|
|
|
<script src="https://unpkg.com/lodash@4.16.0"></script> |
|
|
|
<script src="../../dist/vue.js"></script> |
|
|
|
</head> |
|
|
|
<body> |
|
|
|
|
|
|
|
<div id="editor"> |
|
|
|
<textarea :value="input" @input="update"></textarea> |
|
|
|
<div v-html="compileMarkdown(input)"></div> |
|
|
|
<div v-html="compiledMarkdown"></div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<script> |
|
|
|
@ -21,8 +21,12 @@ |
|
|
|
data: { |
|
|
|
input: '# hello' |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
compiledMarkdown: function () { |
|
|
|
return marked(this.input, { sanitize: true }) |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
compileMarkdown: marked, |
|
|
|
update: _.debounce(function (e) { |
|
|
|
this.input = e.target.value |
|
|
|
}, 300) |
|
|
|
|
Evan You
8 years ago