quill 储存 为markdown 文件

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
quill-markdown-shortcuts是一个用于将Markdown转换为富文本格式的Quill插件。它可以帮助你在键入时快速转换Markdown语法为对应的富文本格式。 使用quill-markdown-shortcuts插件,你需要先引入Quillquill-markdown-shortcuts的相关文件。然后,在初始化Quill编辑器时,将quill-markdown-shortcuts插件添加到modules选项中。 以下是一个使用quill-markdown-shortcuts的简单示例: 1. 引入相关文件: ```html <!-- 引入Quill编辑器的样式文件 --> <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"> <!-- 引入Quill编辑器的脚本文件 --> <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script> <!-- 引入quill-markdown-shortcuts插件的脚本文件 --> <script src="https://cdn.jsdelivr.net/npm/quill-markdown-shortcuts/dist/quill.markdownShortcuts.min.js"></script> ``` 2. 创建一个包含Quill编辑器的HTML元素: ```html <div id="editor"></div> ``` 3. 初始化Quill编辑器并添加quill-markdown-shortcuts插件: ```javascript var quill = new Quill('#editor', { theme: 'snow', modules: { markdownShortcuts: {} } }); ``` 现在,当你在Quill编辑器中键入Markdown语法时,quill-markdown-shortcuts插件会自动将其转换为对应的富文本格式。例如,当你键入`**bold**`时,插件会将其转换为加粗文本。 希望这个简单的示例能帮助你理解如何使用quill-markdown-shortcuts插件。如果你有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值