阅读 427

分享VUE实用的富文本MarkDown

最近在做一个博客的过程中,写文章这个需求可以说是最重要的,这对比markdown和quill-editor两者,我还是更喜欢markdown这样的富文本工具,那VUE项目如何去使用markdown富文本工具,以及如何在页面上显示我们所记录的markdown文本呢

接下来就以我博客为例子来分享给大家这款实用的富文本


安装

这里我们需要安装2个包

1 - npm install mavon-editor --save
2 - npm install marked --save

很明显 mavon-editor 就是一个markdown富文本工具,而marked就是用来解析markdown格式的
复制代码

引入

// 在main.js中,当然你可以自己选择在哪里引入
// 全局引入markdown 以及 css样式
import mavonEditor from 'mavon-editor'  
import 'mavon-editor/dist/css/index.css'

Vue.use(mavonEditor) // 使用markdown
复制代码

使用组件

// 在需要使用的组件中使用我们的富文本工具,由于上面我已经全局的使用了mavon-editor,所以直接可以使用
// 这里newArticle代表双向绑定的数据,也就是我要新增的内容
<mavon-editor v-model="content" :toolbars="toolbars" />

// 在data()中需要定义toolbars
data(){
    return{
        content:'',// 输入的数据
        toolbars: {
            bold: true, // 粗体
            italic: true, // 斜体
            header: true, // 标题
            underline: true, // 下划线
            mark: true, // 标记
            superscript: true, // 上角标
            quote: true, // 引用
            ol: true, // 有序列表
            link: true, // 链接
            help: true, // 帮助
            code: true, // code
            subfield: true, // 是否需要分栏
            fullscreen: true, // 全屏编辑
            readmodel: true, // 沉浸式阅读
            /* 1.3.5 */
            undo: true, // 上一步
            trash: true, // 清空
            /* 1.4.2 */
            navigation: true // 导航目录
        }
    }
}

// 这样我们的页面上就会出现具有markdown功能的工具器
复制代码

markdown格式的文本展示

// 在我们要展示刚刚我们新增的具有markdown格式的文本内容的页面上引入marked
import marked from 'marked'

// 这里我在这个页面中存放markdown格式的文本内容的变量是content,将content做为marked的参数传入
this.showMarkdownContent = markdown(content)

<!-- 然后在HTML中通过使用指令v-html将content -->
<div v-html='showMarkdownContent'></div>

// 这个时候的效果是这样的
复制代码

使用css来美化markdown格式文本

可以看到,上面渲染出来的内容虽然也就解析过了,但是不具备有我们所认识的markdown的那种样式
所以为了美观,我们还需要做最后一步,就是通过css来让我们的文本更漂亮

而如何实现呢,我们可以去网上找一份markdown的css样式,这里我就不推荐哪款了(因为自己使用的也不好看)

使用如下:
在刚刚要展示内容的网页中引入
import './markdown.css' // 该文件里面就是css的样式

效果如下
复制代码


其实mavon-editor所具有的工具还有很多,如果大家喜欢的话可以在网上查阅查阅

自己本人对于这款富文本编辑器还是十分喜欢的,希望对大家日常的开发有所帮助

关注下面的标签,发现更多相似文章
评论