内容简介:☞☞☞
Vue Markdown Editor component for Vue.js
☞ Vue.JS Tutorial: Learn Vue.js from Scratch
☞ Javascript Tutorial for Absolute Beginners
Demo
Install
npm install v-markdown-editor
import 'v-markdown-editor/dist/v-markdown-editor.css'; import Vue from 'vue' import Editor from 'v-markdown-editor' // global register Vue.use(Editor);
Use CDN
<link href="https://cdn.jsdelivr.net/npm/v-markdown-editor/dist/v-markdown-editor.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/v-markdown-editor/dist/v-markdown-editor.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/v-markdown-editor/dist/v-markdown-editor.css" rel="stylesheet"> <script src="https://unpkg.com/v-markdown-editor/dist/v-markdown-editor.min.js" type="text/javascript"></script>
Change
1.2.0 - Support Fontawsome & Material Design Icons - Remove jQuery
Example
<template> <div> <markdown-editor :options="options"></markdown-editor> </div> </template> <script> export default { data() { return { // default options, see more options at: http://codemirror.net/doc/manual.html#config options: { // lineNumbers: true, // styleActiveLine: true, // styleSelectedText: true, // lineWrapping: true, // indentWithTabs: true, // tabSize: 2, // indentUnit: 2 } } } } </script>
v-model
<template> <div> <markdown-editor v-model="value"></markdown-editor> </div> </template> <script> export default { data() { return { value: 'Hello world!' } } } </script>
Toolbar
// full toolbar: clipboard redo undo | bold italic strikethrough heading | image link | numlist bullist code quote | preview fullscreen <template> <div> <markdown-editor toolbar="bold italic heading | image link | numlist bullist code quote | preview fullscreen"></markdown-editor> </div> </template>
add custom button
<template> <div> <markdown-editor toolbar="bold italic heading | image link | numlist bullist code quote | preview fullscreen | upload" :extend="custom"></markdown-editor> </div> </template> <script> export default { data() { return { custom: { 'upload': { cmd: 'upload', ico: 'fas fa-upload', title: 'Upload File' } } } }, created() { this.$root.$on('markdown-editor:upload', function (md) { md.drawImage({url:'https://i.imgur.com/CbCXhBe.png', title:'this image title'}); }); } } </script>
Handle editor
<template> <div> <markdown-editor ref="md"></markdown-editor> <button @click="replace">Handle</button> </div> </template> <script> export default { methods: { replace(){ // more info: https://codemirror.net/doc/manual.html#api this.$refs.md.editor.replaceSelection("Handle editor"); } }, } </script>
Auto resize
<markdown-editor height="auto"></markdown-editor>
Button Theme
<markdown-editor theme="primary"></markdown-editor>
以上所述就是小编给大家介绍的《Markdown Editor component for Vue.js》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
DOM Scripting
Jeremy Keith / friendsofED / 2010-12 / GBP 27.50
There are three main technologies married together to create usable, standards-compliant web designs: XHTML for data structure, Cascading Style Sheets for styling your data, and JavaScript for adding ......一起来看看 《DOM Scripting》 这本书的介绍吧!