基于Draftjs实现的Electron富文本聊天输入框(二)|基于Draftjs实现的Electron富文本聊天输入框(二) —

图文显示

以Entity的格式添加图片：

// 通过新建一个Entity，插入图片 appendImage(image) { const {editorState} = this.state; const contentState = editorState.getCurrentContent(); const imageSrc = https://www.it610.com/article/image.data || image.file.path; // AtomicBlockUtils插入图片 const contentStateWithEntity = contentState.createEntity('image', 'IMMUTABLE', {src: imageSrc, image}, ); const entityKey = contentStateWithEntity.getLastCreatedEntityKey(); const newEditorState = EditorState.set( editorState, {currentContent: contentStateWithEntity} ); const newEditorStateWithAtomic = AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '); this.setState({ editorState: newEditorStateWithAtomic, }); }

通过AtomicBlockUtil创建的entity有一些问题：当前为空行时，图片会自动插入下一行; focus、删除等操作不是很正常；
通过blockRenderFn属性传入自定义的图片组件

// 自定义block样式 blockRendererFn(contentBlock) { const type = contentBlock.getType(); let result = null; if (type === 'atomic') { result = { component: DraftImage, editable: false, }; } return result; }

对contentBlock类型为atomic指定了自定义组件DraftImage
在image.onload()方法中获取图片原尺寸，根据输入框大小限定显示的图片尺寸

import React from 'react'; import cs from 'classnames'; export default class DraftImage extends React.Component { constructor(props) { super(props); this.state = { src: '', isActive: false, }; }componentDidMount() { this.setImageSrc(this.props); }componentWillReceiveProps(nextProps) { this.setImageSrc(nextProps); }setImageSrc(props) { const {block, contentState} = props; const key = block.getEntityAt(0); if (!key) { return ''; } const entity = contentState.getEntity(key); if (entity && entity.getType() === 'image') { const data = https://www.it610.com/article/entity.getData(); const image = new Image(); const imgSrc = data.src; image.onload = () => { const size = this.getImageSize(image); this.setState({ src: imgSrc, width: size.width + 'px', height: size.height + 'px', }); }; image.src = https://www.it610.com/article/imgSrc; } }handleClick(e) { e.stopPropagation(); this.setState({ isActive: !this.state.isActive, }); }// 根据输入框宽高限制图片 getImageSize(image) { const origWidth = image.width; const origHeight = image.height; const editorWrapperRect = document.getElementsByClassName('chat-draft-editor')[0].getBoundingClientRect(); const maxWidth = editorWrapperRect.width - 10; const maxHeight = editorWrapperRect.height - 10; let newWidth = ''; let newHeight = ''; let ratio = 1; if (origHeight <= maxHeight && origWidth <= maxWidth) { newHeight = origHeight; newWidth = origWidth; } if (origHeight <= maxHeight && origWidth > maxWidth) { ratio = origWidth / maxWidth; newHeight = origHeight / ratio; newWidth = maxWidth; } if (origHeight > maxHeight) { ratio = origHeight / maxHeight; newWidth = origWidth / ratio; newHeight = maxHeight; } return {width: newWidth, height: newHeight}; }render() { const imgCls = cs({ 'draft-editor-image': true, 'img-active': this.state.isActive, }); if (this.state.src !== '' ) { return ( ); } else { return null; } } }
通过监听onPastedFiles(files)方法处理粘贴的文件

handlePastedFiles(files) { files.forEach((blob) => { if (blob.type.startsWith('image/')) { const image = clipboard.readImage(); const url = image.isEmpty()? '': image.toDataURL(); this.appendImage({ data: url, }); } }); return 'handled'; }

Draftjs这个方法提供的files对象数据不够，只用来判断type是否为图片，读取数据仍使用的clipboard；

发送

消息发送后，需要将文本框置空
【基于Draftjs实现的Electron富文本聊天输入框(二)|基于Draftjs实现的Electron富文本聊天输入框(二) —— 图文输入】这里有个bug，清空输入框文本时，不能立即Focus，否则内容不会被清空
为保证图文消息的发送顺序与输入框编辑时一致，对数组遍历时，设置固定延时：

基于Draftjs实现的Electron富文本聊天输入框(二)|基于Draftjs实现的Electron富文本聊天输入框(二) —— 图文输入

推荐阅读

助学贷款贷款年限是什么意思

管家婆CRM

云顶之弈永恩带什么装备云顶之弈10.25永恩阵容搭配攻略

你曾经学过的革命英烈和英雄人物还记得多少？

板栗糖尿病能吃吗糖尿病患者能吃板栗吗

鲜虾仁怎么炒好吃又嫩

怎样清洗隐形内衣呢小妙招怎样清洗隐形内衣呢

教高中好还是教小学好

编程it，什么是it编程

佳能5d微距镜头怎样用佳能5d相机拍微距物品

哪些人不能喝洋葱蒸水

绞股蓝适合哪些人吃

芦笋皮有什么作用？

万科彩虹汇扬州万科

月经|15岁女孩月经一直没有来，因为是“石女”！究竟是什么情况？

1314情话数字情话表白1314精选60句

迅雷看看播放器中保存当前画面的详细操作教程是什么迅雷看看播放器中保存当前画面的详细操作教程

Win8系统宽带连接出错623的处理办法

安徽省科技馆开放时间和门票安徽省科技馆开放时间

香菇排骨汤的做法大全，香菇排骨汤的做法大全视频