eigen-editor
The editor-eigen export EigenEditor component for eigen business.
Installation
$ npm i eigen-editor --save$ yarn add eigen-editor
Importing
;
Props
<EigenEditor = = = = = = = = = = = />
onChange
编辑器中内容改变时执行的回调事件,可以拿到变化后的数据对象。content
要传入编辑器中的数据对象 注意:这个数据对象有一定的格式要求。getSkuData
添加SKU图片连接要调用事件,事件的参数就是添加的图片url,可以在这个事件中去请求服务,将返回数据格式为插件需求的格式。tools
要添加的编辑器工具online
是否更新编辑器内容toolBarStyle
工具栏样式对象editorStyle
编辑器样式对象contentStyle
编辑区样式对象uploadUrl
插入图片时上传图片的地址cropImageUrl
裁剪图片的接口地址insertImageChange
上传图片成功或切换选中图片事件
tools 可选值
- BOLD
- ITALIC
- UNDERLINE
- UNDO
- REDO
- FONTSIZEMODIFY
- BLOCKQUOTE
- SPLITLINE
- CLEARALLSTYLES
- ADDLINK
- ADDEMOJI
- COLORSMOdDIFY
- BACKGROUNDCOLORMODIFY
- FIRSTINTENT
- ALIGNCENTER
- ALIGNLEFT
- ALIGNRIGHT
- ALIGNJUSTIFY
- ADDIMG
- ADDSKU
- LINEHEIGHT
- LETTERWIDTH
- TOPMARGIN
- LEFTRIGHTMARGIN
- BOTTOMMARGI
Example
import React from "react";import ReactDOM from "react-dom";import request from "@utils/request";import qs from "qs"; import EigenEditor from "../src";import Draft from './draft_func' { let draft = editorState let newEditorState = draft return newEditorState} { let draft = editorState let newEditorState = draft console return newEditorState} Component { thisstate = // content: editorState: null event: null thisgetSkuData = thisgetSkuData thisfocus = thisfocus } { console // 同步编辑器里新生成的editorState this } { console } { let editorState = thisstate this } { console } { let param = query: type: 'picture' // page: 10, // size: 2, // sku_version: "3.0.0" data: intent: 44 // outline_type:'', // outline: 2, topic_tags: "" category_tags: "" image_shape: "all" query: "" id: "44" context: "" ; } { return resolve reject window } { return } { return res0prev } { const editorStyle = overflow: "scroll" width: "100%" display: "block" margin: "20px auto" padding: 20 return <EigenEditor = = = = // 通过传event,给编辑器插入数据 // 是一个对象,有params和func(返回一个新的editorState)这两个属性 // 编辑器通过执行event.()来得到新的editorState = = = = = = = = // 已废弃 // = = = = = = = /> } const root = document;documentbody;ReactDOM