1.0.2 • Published 3 years ago

@qingbing/vue-markdown v1.0.2

Weekly downloads
42
License
ISC
Repository
-
Last release
3 years ago

封装 mavonEditor 组件

markdown在线编辑器,封装mavon-editor

====== 版本说明 ======

  • 1.0.0 : 初始化git库
  • 1.0.1 : 对 mavon-editor 进行封装
  • 1.0.2 : 修复 isText=true 时 navigation 的多个显示问题

1. 安装

npm install @qingbing/vue-markdown

2. 使用方法

2.1 main.js 全局引用 mavon-editor

// markdown 在线编辑器
import mavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
Vue.use(mavonEditor);

2.3 在需要使用 md-editor 的组件中

# 导入组件
import Markdown from "@qingbing/vue-markdown";

export default {
  data() {
    return {
      fromData: {
        remark: "",
      },
    };
  },
  components: {
    mdEditor: Markdown,
  },
}
<md-editor :formData="formData" field="remark" :isText="false"></md-editor>

3. 支持参数

参数字段参数类型必填默认值描述
editableBooleantrue-是否允许编辑
toolbarsFlagBooleantrue-工具栏是否显示
subfieldBooleantrue-编辑器栏位 - true : 双栏,编辑预览同屏; false : 单栏,编辑预览分屏
defaultOpenStringedit-初始化编辑器显示方式 - edit : 默认展示编辑区域; preview : 默认展示预览区域; 其他 = edit
languageStringzh-CN-语言选择 - 支持 zh-CN: 中文简体 , en: 英文 , fr: 法语, pt-BR: 葡萄牙语
placeholderString开始编辑...-输入框为空时默认提示文本
codeStyleStringtomorrow-night-markdown样式 : 参考 github参考
navigationBooleanfalse-是否展示目录
ishljsBooleantrue-是否代码高亮
imageFilterFunction-图片过滤函数,参数为一个File Object,要求返回一个Boolean, true表示文件合法,false表示文件不合法
imageClickFunction-图片点击事件,默认为预览
changeFunction-编辑区发生变化的回调事件(render: value 经过markdown解析后的结果)
saveFunction-ctrl + s 的回调事件(保存按键,同样触发该回调)
imgAddFunction-图片文件添加回调事件(filename: 写在md中的文件名, File: File Object)
imgDelFunction-图片文件删除回调事件(filename: 写在md中的文件名)
toolbarsObject-显示的工具栏项目
++==isText==++Booleanfalse-是否表单组件,表示是否为表单编辑器
++==formData==++Object整个表单的数据
++==field==++String在表单数据中要显示的字段名