<template>
<div class="editor-container">
<div ref="editor"></div>
<button @click="save">保存</button>
</div>
</template>
<script>
import Quill from 'quill'
import 'quill/dist/quill.snow.css'
import { marked } from 'marked'
import TableModule from 'quill-table'
Quill.register('modules/table', TableModule)
export default {
data() {
return {
quill: null
}
},
methods: {
save() {
let html = this.quill.root.innerHTML
let markdown = marked(html)
// TODO: 保存markdown
console.log('我都markdown文件');
console.log(markdown);
// fs.writeFile('article.md', markdown, err => {
// if (err) throw err
// this.$message('Saved!')
// })
}
},
mounted() {
const toolbarOptions = [
['bold', 'italic', 'underline'], // 加粗,斜体,下划线,删除线
[{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 标题
[{ 'color': [] }, { 'background': [] }], // 字体颜色,背景颜色
[{ 'align': [] }], // 对齐方式
[{ 'list': 'ordered' }, { 'list': 'bullet' }], // 有序列表,无序列表
['link', 'image', 'video'], // 链接,图片,视频
]
this.quill = new Quill(this.$refs.editor, {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
})
this.quill.getModule('toolbar').addHandler('table', function () {
const range = this.quill.getSelection();
if (range) {
this.quill.insertEmbed(range.index, 'table', [['', ''], ['', '']]);
}
});
// let markdown = fs.readFileSync('article.md', 'utf8')
// let html = marked(markdown)
// this.quill.root.innerHTML = html
}
}
</script>
<style>
.editor-container {
width: 800px;
margin: 0 auto;
padding: 20px;
}
</style>
这里由于 quill 踩坑太多 没有继续写下去 换成了 tinymce 富文本框,记录一下