Skip to content

Latest commit

 

History

History
209 lines (154 loc) · 7.06 KB

README_zh-CN.md

File metadata and controls

209 lines (154 loc) · 7.06 KB
Raw

使用 codemirror marked hightlight.js webpack 构建的编辑器

live-demo

常用命令

# 安装依赖
npm install

# development: 开启带有热更新的开发环境
npm run dev

# product: 输出内容(生成 dist目录)
npm run build

使用方式

Tips: 导出为 umd 类型的文件。支持以下几种使用方式.

方式1 script 标签使用

CDN:

<head>
  ...
  <link href="https://unpkg.com/cool-md-editor@<版本号>/dist/cMdEditor.css" rel="stylesheet">
</head>
<body>
  <div class="cool-md-editor-wrap editor-theme-light" id="editor-wrap1"></div>
  <div class="cool-md-editor-wrap editor-theme-dark" id="editor-wrap2"></div>

  <script src="https://unpkg.com/cool-md-editor@<版本号>/dist/cMdEditor.js"></script>
  <script>
    const mdEditor1 = new CMdEditor.default({
      el: document.getElementById('editor-wrap1'),
      defaultCon: '# 这是默认内容(可以不要)'
    });

    const mdEditor2 = new CMdEditor.default({
      el: document.getElementById('editor-wrap2'),
      defaultCon: '# 这是默认内容(可以不要)'
    });
  </script>
</body>

方式2 npm

npm i cool-md-editor --save
const CMdEditor = require('cool-md-editor');
require('cool-md-editor/dist/cMdEditor.css');

new CMdEditor({
  el: document.getElementById('editor-wrap'),
  defaultCon: '# 这是默认内容,任意填写'
});

说明

初始化参数说明

<div class="cool-md-editor-wrap editor-theme-light" id="editor-wrap"></div>

Tips: 类名 .cool-md-editor-wrap 必须有, 主题: .editor-theme-light 和 .editor-theme-dark 选择一个.

const coolMDEditor = new CMdEditor({
  el: '编辑器容器',
  defaultCon: '# 这是默认内容'
});
属性 类型 说明 默认值 可选值
el htmlElement 必需,编辑器dom元素 - -
defaultCon String 非必需, 默认显示的内容 - -
lang Object/String 编辑器的语言内容 - -
shortcuts Object 快捷键配置, 具体请看 _options 说明 - -
qiniu Object 七牛云配置，图片复制粘贴后上传到七牛云, 具体请看 _options 说明 - -

编辑器实例对象属性

属性 类型 说明 默认值 可选值
$codemirror CodeMirror 实例对象 CodeMirror 实例对象 - -
$marked marked 实例对象 marked 实例对象 - -
$status Object 编辑器当前的状态 - -
_options Object Cool-MD-Editor 编辑器配置 - -

$codemirror 属性

属性 类型 说明 默认值 可选值
$editor Object 编辑器实例对象 - -
其他属性 any CodeMirror 实例对象支持的属性和方法，参见文档 - -

$marked 属性

属性 类型 说明 默认值 可选值
全部属性 any marked 实例对象支持的属性和方法，参见文档 - -

$status 属性

属性 类型 说明 默认值 可选值
isFullscreen Boolean 是否全屏显示, 全屏为 true false 或者本地存储设置值 -
isThemeLight Boolean 是否主题为圣光, 目前只有 圣光 和 暗黑 主题 ，根据 base16 扩展而来。未来也只考虑两套主题(光/暗) true 或者本地存储设置值 -
isShowAll Boolean 编辑和预览都显示, 与 isOnlyEdit isOnlyPreview为正反关系 true -
isOnlyPreview Boolean 只显示预览 false -
isOnlyEdit Boolean 只显示编辑 false -

_options 属性

属性 类型 说明 默认值 可选值
el HTMLElement 编辑器 dom 元素 - -
$tools Object 工具条类名(图标)、title、和绑定的事件等 - -
lang Object/String 编辑器的语言内容 - -
editor Object 编辑器实例对象 - -
shortcuts Object 快捷键配置 - -
qiniu Object 七牛云配置，图片复制粘贴后上传到七牛云 - -
  • $tools 结构
{
  name: 'heading',             // 名称
  action: toggleHeading,       // 绑定的回调函数
  className: 'icon-heading',   // 类名
  title: 'Heading',            // 标题(会翻译为当前使用的语言) 
  default: true,               // 是否是默认显示的
  index: 2,                    // 所在组的索引。目前有两大组: `编辑图标` `浏览器设置`。两组使用不同的索引
  isEditTools: true            // 是否为 `编辑图标` 组.
}
  • lang

类型-字符串: 使用内置的语言，目前内置了 en: englisth zh: 简体中文, 具体配置可查看 lang/* 目录中的配置。

类型-对象: 可以扩展第三方语言，具体配置格式可查看 lang/* 目录文件。

  • qiniu

需要使用粘贴图片功能，要先引用 https://unpkg.com/qiniu-js@<版本号>/dist/qiniu.min.js。粘贴的图片转换为了 base64 格式，为了避免图片路径显示 base64 格式的字符串，造成内容过多问题。编辑器内置了将 base64 格式的图片上传至七牛云存储的功能。

默认配置为

qiniu: {
    tokenApiUrl: 'http://127.0.0.1:3001/api/qiniu/test/get_token',
    region: 'z1',
    config: {},
    putExtra: {}
}

关于内置的七牛上传需要注意以下几点:

  • token 的获取编辑器内置了接口处理，可以不用设置，如果需要使用自己的接口服务器需要配置 qiniu.tokenApiUrl, 并且返回如下数据格式
{
  data: {
   token: 'your token',
   domain: 'your 七牛云后台设置的自己的域名'
  }
}
  • 上传的空间为测试空间，内容会不定时删除，所以请配置自己的七牛云上传空间

编辑器实例对象方法

方法名 说明 参数 返回值
getMDValue 获取当前Markdown的内容 - 当前Markdown的内容

参考资料