quill 储存为markdown 文件_quill 保存-CSDN博客

本文链接：https://blog.csdn.net/T3165919332/article/details/130863551

文章展示了在Vue.js项目中使用Quill富文本编辑器的过程，包括设置toolbar、注册表格模块和转换为Markdown格式。由于遇到问题，作者最终选择切换到TinyMCE编辑器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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 富文本框，记录一下