vue-jeditor v0.1.2

vue-jeditor

A Markdown editor for the Vue framework

How use

install

npm install vue-jeditor

Introduced the global

//index.js
import Vue from "vue";

import JEditor from "vue-jeditor";
import "vue-jeditor/dist/src/css/style.css";
Vue.use(JEditor);

//demo.vue
<JEditor v-model="value"></JEditor>;
new Vue({
	data() {
		return { value: "" };
	},
});

Introduce in a separate page

//demo.vue
import JEditor from "vue-jeditor";
import "vue-jeditor/dist/src/css/style.css";
components: {
    JEditor,
},
<JEditor v-model="value"></JEditor>
new Vue({
    data() {
       return { value: '' }
    }
})

API

props

Toolbar options

toolbars: {
    bold: true,
    italic: true,
    header: true,
    underline: true,
    strikethrough: true,
    mark: true,
    quote: true,
    ol: true,
    ul: true,
    link: true,
    color: true,
    imagelink: true,
    code: true,
    table: true,
    save: true,
    fullscreen: true,
    htmlcode: true,
    preview: true,
},

Code highlighting

Because the file size is optimized, the VUe-JEditor does not turn on code highlighting by default, or manually if it is needed

According to the need to introduce

import hljs from "highlight.js/lib/core";
import css from "highlight.js/lib/languages/css";
import javascript from "highlight.js/lib/languages/javascript";
import "./src/css/monokai-sublime.css";
new Vue({
	data() {
		return {
			content: text,
			hljs: hljs,
			languages: {
				css,
				javascript,
			},
		};
	},
});
<JEditor v-model="content" :hljs="hljs" :languages="languages" />

Introduced the global

import hljs from "highlight.js/lib/core";
import css from "highlight.js/lib/languages/css";
import javascript from "highlight.js/lib/languages/javascript";
import "./src/css/monokai-sublime.css";
Vue.use(JEditor, { hljs, languages: { javascript, css } });

The introduced monokai-sublime.css file is the highlight theme style file, and you can go to https://highlightjs.org/ to see your favorite themes.