1.0.2 • Published 3 years ago
@qingbing/vue-markdown v1.0.2
封装 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. 支持参数
参数字段 | 参数类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
editable | Boolean | true | - | 是否允许编辑 |
toolbarsFlag | Boolean | true | - | 工具栏是否显示 |
subfield | Boolean | true | - | 编辑器栏位 - true : 双栏,编辑预览同屏; false : 单栏,编辑预览分屏 |
defaultOpen | String | edit | - | 初始化编辑器显示方式 - edit : 默认展示编辑区域; preview : 默认展示预览区域; 其他 = edit |
language | String | zh-CN | - | 语言选择 - 支持 zh-CN: 中文简体 , en: 英文 , fr: 法语, pt-BR: 葡萄牙语 |
placeholder | String | 开始编辑... | - | 输入框为空时默认提示文本 |
codeStyle | String | tomorrow-night | - | markdown样式 : 参考 github参考 |
navigation | Boolean | false | - | 是否展示目录 |
ishljs | Boolean | true | - | 是否代码高亮 |
imageFilter | Function | - | 图片过滤函数,参数为一个File Object,要求返回一个Boolean, true表示文件合法,false表示文件不合法 | |
imageClick | Function | - | 图片点击事件,默认为预览 | |
change | Function | - | 编辑区发生变化的回调事件(render: value 经过markdown解析后的结果) | |
save | Function | - | ctrl + s 的回调事件(保存按键,同样触发该回调) | |
imgAdd | Function | - | 图片文件添加回调事件(filename: 写在md中的文件名, File: File Object) | |
imgDel | Function | - | 图片文件删除回调事件(filename: 写在md中的文件名) | |
toolbars | Object | - | 显示的工具栏项目 | |
++==isText==++ | Boolean | false | - | 是否表单组件,表示是否为表单编辑器 |
++==formData==++ | Object | 是 | 整个表单的数据 | |
++==field==++ | String | 是 | 在表单数据中要显示的字段名 |