mavon-editor使用(Element)

Posted 2023-03-10 莉妮可丝的猫

安装mavon-editor

npm install mavon-editor --save

main.js

/* 引入 */
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

/* 挂载 */
Vue.use(mavonEditor)

vue

<template>
	<!-- mavon-editor -->
    <mavon-editor @change="gethtml" :toolbars="toolbars" ref="md" class="me"
                placeholder="畅所欲言吧..." fontSize="18px" :html="true" toolbarsBackground="#fff">
    </mavon-editor>
	<!-- 内容展示用v-html即可 -->
    <div class="content" v-html="content"></div>
</template>

<script>
export default 
    data: () => (
        content:'',
		/* 工具栏设置 */
        toolbars: 
            bold: true, // 粗体
            italic: true, // 斜体
            header: true, // 标题
            underline: true, // 下划线
            strikethrough: true, // 中划线
            mark: true, // 标记
            superscript: true, // 上角标
            subscript: true, // 下角标
            quote: true, // 引用
            ol: true, // 有序列表
            ul: true, // 无序列表
            link: true, // 链接
            imagelink: false, // 图片链接
            code: true, // code
            table: true, // 表格
            fullscreen: true, // 全屏编辑
            readmodel: true, // 沉浸式阅读
            htmlcode: true, // 展示html源码
            help: true, // 帮助
            /* 1.3.5 */
            undo: true, // 上一步
            redo: true, // 下一步
            trash: true, // 清空
            save: false, // 保存（触发events中的save事件）
            /* 1.4.2 */
            navigation: true, // 导航目录
            /* 2.1.8 */
            alignleft: true, // 左对齐
            aligncenter: true, // 居中
            alignright: true, // 右对齐
            /* 2.2.1 */
            subfield: true, // 单双栏模式
            preview: true, // 预览
        ,
	),
	methods:
		/* 获取解析后的html */
        getHtml(value, render) 
            // 直接使用content作为文章内容存储数据库，获取时无需解析
            this.content = render
        ,
	

</script>

github
https://github.com/hinesboy/mavonEditor
链接: https://github.com/hinesboy/mavonEditor