Rsimditor

基于simditor实现的React富文本编辑器。

使用

安装：

• $ npm install rsimditor --save
• $ npm install jquery --save-dev

编码：

import React from 'react'
import {render} from 'react-dom'
import RSimditor from 'rsimditor'
import 'rsimditor/simditor.css' //样式，可以加载自定义的样式
render(<RSimditor onChange={()=>{}} options={{}} />,
    document.getElementById('root'))

可以直接使用源码中的例子：

• $ git clone https://github.com/palmg/rsimditor.git
• $ npm install
• $ npm run example

启动完成后浏览器输入 http://localhost:8080/ 即可看到效果。

使用注意：

1. 如果使用webpack打包并引入css样式文件，请增加file-loader以处理simditor中的自定义文字。

• 安装：$ npm install file-loader --save-dev
• 配置：

  module.rules：[{
      test:/\.(eot|woff|ttf)$/,
      use: ['file-loader']
  }]

2. Rsimditor需要jQuery，请根据项目需要安装jQuery。
3. 按照非受控组件的方式来使用Rsimditor组件。

API

initValue string

用以指定富文本编辑器的初始值，在组件被装载之后会被设定。

focus boolean

当值改变时，会触发富文本编辑器聚焦或失去焦点的事件。默认为undefined。

onChange function

当富文本编辑器的值发生改变时，会触发onChange方法。结构为：(value)=>{return false}。 当返回一个string类型的值时，会使用返回值设定富文本编辑器的内容，所以可以通过onChange来处理数据过滤。

options object

富文本编辑器的控制参数：

选项 | 类型 | 说明 ------------ | --------- | ------------- placeholder | string | 背景文字，富文本内容为空时会显示该文字。 toolbar | array | 富文本编辑器上方显示的工具栏。可以使用"\|"字符来分割。详细说明请看工具栏说明。 toolbarFloat | boolean | 当屏幕滚动时，设定上方的工具栏是否浮动。默认为true。 toolbarFloatOffset | number | 设定工具栏浮动的偏移量。默认为0。 toolbarHidden | boolean | 指定是否隐藏工具栏，toolbarFloat设定为true该配置不会生效。 defaultImage | string | 默认图片。当上传图片时，会有一个异步过程，通过指定defaultImage设定一个占位图片或gif加载效果，默认为"images/image.png",如果图片不存在，直接显示上传文件的名称。 tabIndent | boolean | 设定是否支持table键盘缩进。默认为truen。 upload | object | 设定文件上传的方式和传输的服务器地址。默认为false，不上传图片，直接使用base64格式。请查看图片上传说明。 imageButton | array | upload启用时设定上传选项，可选值upload（本地上传）、external（外部链接）。两者都启用时，会呈现一个下拉菜单。默认为['upload', 'external']。 pasteImage | boolean | 标记是否支持通过剪切板粘贴图片，仅支持chrome和Firefox。默认false。 cleanPaste | boolean | 标记当用户从剪切板粘贴文字内容时是否清除样式。默认false。 allowedTags | array | 支持标签。 allowedAttributes | array | 支持标签属性。 allowedStyles | array | 支持标签样式 codeLanguages | array | 支持格式化语言

工具栏说明

工具栏目是一个列表结构。

var options = {
    toolbar: [
        'title',  //标题，<h1>～<h5>
        'bold',  //加粗，<b>test</b>
        'italic',  //斜体
        'underline',  //下划线
        'strikethrough',  //删除线
        'fontScale',  //文字大小
        'color',  //文字颜色
        'ol',  //有序列表
        'ul',  //无序列表
        'blockquote',  //引用
        'code',  //引入代码
        'table',  //引入表格
        'link',  //超链接
        'image',  //添加图片，图片分为上传和base64两种方式，默认使用base64添加到富文本中。
        'hr', //分割线
        'indent', //右缩进
        'outdent', //左缩进
        'alignment'] //水平对齐方式
}

返回列表

图片上传说明

在options参数中通过upload配置来设定文件上传：

var options = {
    upload:{
        url:'server path'
        connectionCount:3
        leaveConfirm:'Uploading is in progress, are you sure to leave this page?',
        base64:true,
        params: null,
        fileKey: 'upload_file'
        formData:function(file, up, $){}
    }
}

url string 文件上传目标服务器的地址。指定后，当文件上传时会向该地址发送xhr请求传递文件。启用后必须指定。

connectionCount number 同时上传图片的链接数。默认为3。

leaveConfirm string 当文件上传未完成时，用户关闭或刷新浏览器的提示内容。

base64 boolean 当文件向服务器传输失败后，是否使用base64格式添加到富文本编辑器中。默认为false。

params object 在上传文件时，向服务器发送的参数。会添加到FormData中。

fileKey string 向服务器传递的fileKey参数。同样使用FormData传递。

formData function object FormData数据生成方法。当传递的参数比较复杂时可以自行设定FormData格式。formData参数可以传递一个方法，也可以传递一个实例（对象）。当传递实例时，必须实现generate方法。可以在formData方法中设定file.file_path来设定图片上传完成后的src路径。 使用function设置：

var value = 'myValue'
function generate(file){
    var formData = new FormData();
    //示例代码
    formData.append(key:value);
    file.file_path = 'https://myDomain.com/filepath'
    //do something
    return formData;
}
<RSimditor options={upload:{formData: generate}}/>

使用object设置：

function Form(value){
    this.value = value;
}
Form.prototype.generate = function(file) {
    var formData = new FormData();
    //示例代码
    file.file_path = 'https://myDomain.com/filepath'
    formData.append(key:this.value);
    //do something
    return formData;
}
<RSimditor options={upload:{formData: new Form('myValue')}}/>

服务器返回信息 上传完成后需要服务器告知组件是否上传成功。通常情况下，只要response返回200状态就认为上传文件成功，500等其状态码认为上传失败。 除此之外，在stateCode == 200的情况下还可以通过结构化信息标记上传结果：

{
  "success": false,
  "msg": "error message",
  "file_path": "[real file path]"
}

选项 | 类型 | 说明 ------------ | --------- | ------------- success | boolean | 上传成功标记。除了指定为false，其他情况都视为上传成功。 msg | string | 上传失败信息，只有在success === false 时生效。 file_path | string | <img/>标签的src属性数据。

图片网络位置设定：除了通过服务器返回的file_path设定src。还可以在formData方法中通过设定file.file_path来设定src。

返回列表

标签

该参数可以指定富文本编辑器支持的标签，默认为：

    ['br', 'span', 'a', 'img', 'b', 'strong', 'i', 'strike', 'u', 'font', 'p', 'ul', 'ol', 'li', 'blockquote', 'pre', 'code', 'h1', 'h2', 'h3', 'h4', 'hr']

当用户设定新的标签列表时，会合并当默认列表中。

返回列表

标签属性

设定每一个标签支持的属性(arrtibure)，默认为:

{
    img: ['src', 'alt', 'width', 'height', 'data-non-image'],
    a: ['href', 'target'],
    font: ['color'],
    code: ['class'],
}

当用户设定新的标签列表时，会合并当默认列表中。

返回列表

标签样式

标签支持的内联样式。

{
    span: ['color', 'font-size'],
    b: ['color'],
    i: ['color'],
    strong: ['color'],
    strike: ['color'],
    u: ['color'],
    p: ['margin-left', 'text-align'],
    h1: ['margin-left', 'text-align'],
    h2: ['margin-left', 'text-align'],
    h3: ['margin-left', 'text-align'],
    h4: ['margin-left', 'text-align'],
}

当用户设定新的标签列表时，会合并当默认列表中。

返回列表

格式化语言

富文本支持的格式化语言。

[
  { name: 'Bash', value: 'bash' }
  { name: 'C++', value: 'c++' }
  { name: 'C#', value: 'cs' }
  { name: 'CSS', value: 'css' }
  { name: 'Erlang', value: 'erlang' }
  { name: 'Less', value: 'less' }
  { name: 'Sass', value: 'sass' }
  { name: 'Diff', value: 'diff' }
  { name: 'CoffeeScript', value: 'coffeescript' }
  { name: 'HTML,XML', value: 'html' }
  { name: 'JSON', value: 'json' }
  { name: 'Java', value: 'java' }
  { name: 'JavaScript', value: 'js' }
  { name: 'Markdown', value: 'markdown' }
  { name: 'Objective C', value: 'oc' }
  { name: 'PHP', value: 'php' }
  { name: 'Perl', value: 'parl' }
  { name: 'Python', value: 'python' }
  { name: 'Ruby', value: 'ruby' }
  { name: 'SQL', value: 'sql'}
]

返回列表

接口方法

除了直接使用props参数，Rsimditor还支持直接使用ref特性获取组件实例来操作富文本编辑器的接口，比使用props传递参数更高效。

var editor;
<Rsimditor ref={ref=>{editor=ref}}

方法 | 说明 ------------ | ------------- getValue | 获取富文本组件的值。是一个HTML结构的字符串。 setValue | 设定富文本组件中呈现的内容。 focus | 聚焦到富文本编辑器。 blur | 移除焦点。

应用扩展

目前支持HTML5规范的自动存储和全屏特性。

自动存储

$ npm install rsimditor-autosave --save

//………………
import 'rsimditor-autosave' 引入包
<Rsimditor options={{autosave: 'rsimditor-autosave-content'}}/>

通过autosave参数指定自动保存的路径。当设定为false时关闭自动保存功能。

编辑器全屏

$ npm install rsimditor-fullscreen --save

//………………
import 'rsimditor-fullscreen'
import 'rsimditor-fullscreen/styles/simditor-fullscreen.css' //全屏按钮的图标样式
<Rsimditor options={{toolbar: ['fullscreen']}}/>

toolbar参数标记全屏按钮出现的位置。