daniel/Personal_Website
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add blockquote, code, details and table support to the markdown editor.

Browse Source
This commit is contained in:
Daniel_I_Am 2021-09-04 19:03:49 +02:00
parent 525086c58c
commit 0564cc9e20
2 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
resources/js/components/MarkdownEditor.vue
View File

@ -11,6 +11,10 @@
<li><a href="javascript:void(0)" @click="insertTag('1. ', null, true)"><i class="fas fa-list-ol"></i></a></li> <li><a href="javascript:void(0)" @click="insertTag('1. ', null, true)"><i class="fas fa-list-ol"></i></a></li>
<li><a href="javascript:void(0)" @click="imagePopupOpen = !imagePopupOpen"><i class="fas fa-image"></i></a></li> <li><a href="javascript:void(0)" @click="imagePopupOpen = !imagePopupOpen"><i class="fas fa-image"></i></a></li>
<li><a href="javascript:void(0)" @click="linkPopupOpen = !linkPopupOpen"><i class="fas fa-link"></i></a></li> <li><a href="javascript:void(0)" @click="linkPopupOpen = !linkPopupOpen"><i class="fas fa-link"></i></a></li>
<li><a href="javascript:void(0)" @click="insertTag('> ', null, true)"><i class="fas fa-quote-left"></i></a></li>
<li><a href="javascript:void(0)" @click="insertTag('`', '`')"><i class="fas fa-code"></i></a></li>
<li><a href="javascript:void(0)" @click="insertTag('<details><summary>', '</summary>\n \n</details>')"><i class="fas fa-caret-square-down"></i></a></li>
<li><a href="javascript:void(0)" @click="insertTag('\n| header | header |\n| ------ | ------ |\n| cell | cell |\n| cell | cell |\n', '')"><i class="fas fa-table"></i></a></li>
</ul> </ul>
</div> </div>
<textarea class="input" ref="textarea" v-model="markdown" :cols="cols" :rows="rows"></textarea> <textarea class="input" ref="textarea" v-model="markdown" :cols="cols" :rows="rows"></textarea>
@ -68,7 +72,9 @@ export default {
}, },
}, },
mounted() { mounted() {
this.converter = new showdown.Converter(); this.converter = new showdown.Converter({
tables: true,
});
this.onChange = debounce(() => { this.onChange = debounce(() => {
this.onChangeHandler(); this.onChangeHandler();
}, 500); }, 500);

4
resources/js/views/BlogArticle.vue
View File

@ -56,7 +56,9 @@ export default {
this.date = moment(res.data.date); this.date = moment(res.data.date);
this.summary = res.data.summary; this.summary = res.data.summary;
const converter = new showdown.Converter(); const converter = new showdown.Converter({
tables: true,
});
this.content = converter.makeHtml(res.data.content); this.content = converter.makeHtml(res.data.content);
this.loading = false; this.loading = false;