margox / braft-utils Goto Github PK
View Code? Open in Web Editor NEWBraft Editor基础工具包
Braft Editor基础工具包
import 'braft-editor/dist/index.css'
import React, { PureComponent } from 'react'
import BraftEditor from 'braft-editor'
import { ContentUtils } from 'braft-utils'
import { ImageUtils } from 'braft-finder'
import { Divider, Button, Form, Input, Select, Spin, Upload, Icon, message, InputNumber } from 'antd'
const FormItem = Form.Item
@Form.create()
class Operate extends PureComponent {
state = {
controls: ['bold', 'italic', 'underline', 'text-color', 'fullscreen'],
editorState: BraftEditor.createEditorState(null),
}
handleChange = (editorState) => {
this.setState({ editorState })
}
uploadHandler = (param) => {
if (!param.file) {
return false
}
const { editorState } = this.state
const url = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
this.setState({
editorState: ContentUtils.insertMedias(editorState, [{
type: 'IMAGE',
url: url,
}]),
})
}
render() {
const { getFieldDecorator } = this.props.form
const formItemLayout = { labelCol: { span: 5 }, wrapperCol: { span: 17 } }
const extendControls = [
{
key: 'antd-uploader',
type: 'component',
component: (
<Upload accept="image/*" showUploadList={false} customRequest={this.uploadHandler}>
<button type="button" className="control-item button upload-button" data-title="插入图片">
<Icon type="picture" theme="filled"/>
</button>
</Upload>
),
},
]
const { controls, editorState } = this.state
return (
<div style={{ width: '720px' }}>
<Form onSubmit={this.handleSubmit}>
<FormItem {...formItemLayout} label="操作说明">
{getFieldDecorator('content', {
initialValue: editorState,
validateTrigger: 'onBlur',
rules: [{
required: true,
validator: (_, value, callback) => {if (value.isEmpty()) {callback('请输入操作说明')} else {callback()}}, }],
})(
<BraftEditor
style={{ border: '1px solid #e5e5e5', borderRadius: '3px' }}
onChange={this.handleChange}
onFullscreen={this.handleFullscreen}
controls={controls}
extendControls={extendControls}
/>,
)}
</FormItem>
</Form>
</div>
)
}
}
export default Operate
我这里在上传图片的时候,需要携带token才能拿到图片。
请问编辑器是否有中间方法,可以让我设置图片请求的token?
如果没有是否有必要加一个中间方法。
如题
引用了braft-finder 和 braft-utils 都会这样说找不到声明文。
我也试过单独安装上面两个,还是不能解决问题。请问有遇到该问题的大神吗?
希望添加 TypeScript 支持
不通过控件controls去改变选区的大小颜色或者背景颜色怎么实现?
我获取的编辑器实例里面有一个方法是handleKeyCommand
可以通过
this.editorInstance.handleKeyCommand('bold',this.state.editorState)实现选择加粗
但是选择区域的字体大小或者添加背景色怎么去操作,希望作者可以解惑。
怎么限制文字输入数量,包括粘贴进来的
我的业务是:将复制粘贴过来的东西清除样式。通过以下方法ContentUtils.handleKeyCommand(this.state.editorState,'removeSelectionInlineStyles'),这样子没法清除。
如题,在编辑器添加超链接的时候,输入框无法输入内容
比如粘贴进来,把光标移动到最前面或者图片前面之类的
insertHTML这个方法可以带入自定义带样式或者class什么的嘛
希望添加 TypeScript 支持
如果通过ContentUtils.clear(this.state.editorState),或者clearEditorContent(),则设定的样式都恢复成默认的了,请教如何清空文字,但保留工具栏的样式设定?
const editorState = BraftEditor.createEditorState(`<div>${props.value}</div` || '<div></div>');
<BraftEditor
ref={ref}
controls={[]}
extendControls={[
{
key: 'custom-button',
type: 'button',
text: '按钮',
onClick: () => {
console.log(editorState);
const newEditorState = ContentUtils.toggleSelectionColor(editorState, '#f39c12');
console.log(newEditorState.toHTML());
// ref.current.refs.toggleSelectionColor('#ffffff')
// ref.current?.handleKeyCommand('blob')
},
},
]}
```
通过ContentUtils 方法没办法进行颜色的修改,是调用的方式不对吗?
if (entity && entity.type) {
contentState = contentState.createEntity(entity.type, entity.mutability || 'MUTABLE', entity.data || entityData);
entityKey = contentState.getLastCreatedEntityKey();
}
目前工具有没有获取当前字体大小的方法呢,好像没看着,
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.