blear.ui.rich-editor

1Introduction
2Example
3Static
4new RichEditor(options)
5Prototype
6Events
- 6.1wordCount(count)
  - 6.1.1count
- 6.2change()
7Dependencies
8Reference

1Introduction

description：富文本编辑器，基于 Tinymce V4.8.2 (2018-08-09)
author：ydr.me
create：2016年06月04日14:09:36
update：2018年09月05日17:30:47
github：https://github.com/blearjs/blear.ui.rich-editor

2Example

var RichEditor = require('blear.ui.rich-editor');

new RichEditor({
    el: '#demo'
});

默认情况下，不自带其他按钮，如果需要扩展，参考以下配置及场景。

3Static

3.1`.defaults`

类型：Object
说明：默认配置

3.2`.defaults.el`

类型：Element | String
说明：渲染容器

3.3`.defaults.scene`

类型：object | null
说明：场景，内置了 4 种场景

场景引用方式

{
    el: '#demo',
    scene: require('blear.ui.rich-editor/scenes/base.js'),
    // scene: require('blear.ui.rich-editor/scenes/simple.js'),
    // scene: require('blear.ui.rich-editor/scenes/writing.js'),
    // scene: require('blear.ui.rich-editor/scenes/coding.js')
}

3.3.1`base`

适用于普通留言场景。

{
    toolbar: [
        'bold italic underline strikethrough'
    ],
    contextMenu: 'bold italic underline strikethrough link'
}

3.3.2`simple`

适用于简单的评论场景。

{
    toolbar: [
        'bold italic underline strikethrough link unlink bullist numlist image'
    ],
    contextMenu: 'bold italic underline strikethrough link'
}

3.3.3`writing`

适用于作者、编辑发布文章场景。

{
    toolbar: [
        'bold italic underline strikethrough link unlink forecolor backcolor bullist numlist image',
        'formatselect alignleft aligncenter alignright hr removeformat undo redo fullscreen preview'
    ],
    contextMenu: 'bold italic underline strikethrough link'
}

3.3.4`coding`

适用于开发人员发文场景。

{
    codesampleLanguages: [
        {
            text: 'HTML/XML',
            value: 'markup'
        },
        {
            text: 'JavaScript',
            value: 'javascript'
        },
        {
            text: 'CSS',
            value: 'css'
        },
        {
            text: 'PHP',
            value: 'php'
        },
        {
            text: 'JSON',
            value: 'json'
        },
        {
            text: 'Java',
            value: 'java'
        },
        {
            text: 'Bash',
            value: 'bash'
        },
        {
            text: 'Python',
            value: 'python'
        },
        {
            text: 'C',
            value: 'clike'
        },
        {
            text: 'Go',
            value: 'go'
        },
        {
            text: 'ini',
            value: 'ini'
        },
        {
            text: 'nginx',
            value: 'nginx'
        },
        {
            text: 'swift',
            value: 'swift'
        },
        {
            text: 'yaml',
            value: 'yaml'
        }
    ],
    toolbar: [
        'bold italic underline strikethrough link unlink forecolor backcolor bullist numlist image codesample',
        'formatselect alignleft aligncenter alignright hr removeformat undo redo fullscreen code'
    ],
    contextMenu: 'bold italic underline strikethrough link',
    appendContentCSS: require('blear.utils.code-highlight/src/themes/light.css', 'css|text')
}

3.4`.defaults.contentCSS`

类型：String
说明：内容样式
默认：内置的样式

body {
  overflow: hidden;
  color: #3e3e3e;
  font-size: 16px;
  font-family: -apple-system-font, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  line-height: 1.6;
  padding: 0;
  margin: 15px;
}

* {
  box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
  word-wrap: break-word !important;
  padding: 0;
  margin: 0;
}

table, p, ul, ol, pre {
  margin-bottom: 1.5em;
}

hr {
  margin: 1.5em 0;
  height: 0;
  border: 0;
  border-bottom: 1px solid #cacaca;
}

table {
  border: 1px solid #ccc;
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

td {
  border: 1px solid #ccc;
}

pre {
  border: 1px solid #ccc;
  padding: 10px;
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

p {
  white-space: pre-wrap;
}

li ul,
li ol {
  margin-left: 2em;
  margin-bottom: 0;
}

ul > li {
  list-style: disc inside;
}

ol > li {
  list-style: decimal inside;
}

3.5`.defaults.height`

类型：Number
说明：编辑器高度
默认：300

3.6`.defaults.maxHeight`

类型：Number
说明：编辑器最大高度
默认：800

3.7`.defaults.placeholder`

类型：Number
说明：编辑器占位文本
默认："点击开始输入"

3.8`.defaults.uploadFiledName`

类型：String
说明：选择图片的字段名称
默认："file"

3.9`.defaults.elementPath`

类型：Boolean
说明：是否显示节点的路径信息
默认：true

3.10`.defaults.resize`

类型：Boolean
说明：拖动改变编辑器纵向尺寸
默认：true

3.11`.defaults.toolbar`

类型：array
说明：工具栏
默认：['bold']

3.12`.defaults.imageChooseHandler`

类型：function
说明：选择图片上传处理函数

默认：

function imageUploadHandler(inputEl, callback) {
    callback(new Error('未配置图片选择上传'));
}

3.13`.defaults.imagePasteHandler`

类型：function
说明：粘贴图片上传处理函数

默认：

function imagePasteHandler(blob, callback) {
    callback(new Error('未配置图片粘贴上传'));
}

4`new RichEditor(options)`

实例化一个富文本编辑器，options 为入参，默认值为 .defaults。

5Prototype

5.1`#getHTML(): html`

获取富文本内容。

5.1.1`html`

类型：String
说明：富文本内容

5.2`#getText(): text`

获取纯文本内容。

5.2.1`text`

类型：String
说明：纯文本内容

5.3`#setHTML(html): this`

设置富文本内容。

5.3.1`html`

类型：String
说明：富文本内容

5.4`#insertHTML(html): this`

当前位置插入富文本内容。

5.4.1`html`

类型：String
说明：富文本内容

5.5`#getWordCount(): count`

获取富文本编辑器的内容长度。

5.5.1`count`

类型：Number
说明：文本长度

5.6`#getContentEl(): el`

获取富文本编辑器的内容长度。

5.6.1`el`

类型：Element
说明：元素，通常是 iframe 里的 body 元素

5.7`#command(cmd): this`

获取富文本编辑器的内容长度。

5.7.1`cmd`

类型：string
说明：执行命令，除非你知道命令

5.8`#focus([end]): this`

编辑器聚焦。

5.8.1`end`

类型：boolean
说明：是否聚焦到末尾
默认：false

5.9`#loading([bool]): this`

设置/取消编辑器的 loading 状态。loading 状态时编辑器不可写。常用于图片选择上传、图片粘贴上传等其他情况。

5.9.1`bool`

类型：boolean
说明：是否 loading 状态
默认：false

5.10`#appendContentCSS(cssText): this`

动态追加富文本编辑器的内容样式。

5.10.1`cssText`

类型：string
说明：css 表达式文本

5.11`#detach(): this`

编辑器分离，因为编辑器内容区域使用的是 iframe，而 iframe 在 dom 分离之后会销毁, 因此当编辑器分离也会导致 iframe 销毁，而当编辑器再次插入到页面中时，编辑器的 iframe 会丢失，所以，需要 detach、attch 来进行分离和结合。常用于单页面应用场景，页面离开后页面的 DOM 元素会被分离到内存中，以保持页面上的 DOM 节点数量保持在一定的可控范围内。