react-draggable前端实现元素拖拽的组件
react-draggable前端实现元素拖拽的组件
使用方式：将一个需要被拖拽的组件包到它定义的一个组件中，当鼠标拖拽时，重新计算组件的位置，即实现了拖拽。
官网链接：react-draggable组件实现元素的拖拽
react-file-viewer 实现DOCX文档显示相关
步骤：
npm install react-file-viewer
import FileViewer from 'react-file-viewer'
return ()
参数如下：
fileType = {type} //要显示的资源类型
资源类型如下：
图像：png，jDeg,gif,bmp,包括360度图像,pdf格式；csv，xslx，docx
视频：mp4，webm
音频：mp3
filePath = {path} //要显示的资源的URL
onError = {函数} //在文件查看器获取或呈现所需的url资源时，出现错误将调用的函数
errorComponent={函数} //出现错误时呈现的组件
unsupportedComponent= {函数} //在不支持文件格式的情况下呈现的组件
组件代码：
import FileViewer from 'react-file-viewer';{url ? () : ('')} draft-convert/draftjs-to-html富文本编辑器
npm install draft-js 或者 yarn add draft-js
WangEditor组件的代码如下：
import React, { useState, useEffect } from 'react'
import WangEditor from 'wangeditor' //1.引入插件
export default function WangeEditor(props) {const { value, onChange } = props;const [editorContent, setEditorContent] = useState(null)let editor = nulluseEffect(() => {editor = new WangEditor("#div1")editor.config.onchange = (newHtml) => {// onChange(newHtml);console.log('通过onchange 获取到内容：', newHtml);setEditorContent(newHtml) // 使用useState保存起来}//自定义展示的菜单// editor.config.menus = [// 'head',// 'bold',// 'fontSize',// 'fontName',// 'italic',// 'underline',// 'strikeThrough',// 'indent',// 'lineHeight',// 'foreColor',// 'backColor',// 'link',// 'list',// 'todo',// 'justify',// 'quote',// 'table',// 'splitLine',// 'undo',// 'redo',// ]/*** 1.上传图片*/editor.config.uploadImgServer = '/myupload-img/Ajiang' //1.增加配置，将本地文件上传到服务器，赋值的=接口名称//2.自定义想添加的某些参数editor.config.uploadImgParams = {cliengguid: 'AjiangIWantToUpload'}editor.config.uploadFileName = 'AjiangFile' //3.自定义文件名称/*** 2.上传视频*/editor.config.uploadVideoServer = '/myupload-video/Ajiang'editor.create() //一定要创建return () => {// 组件销毁时销毁编辑器 注：class写法需要在componentWillUnmount中调用editor.destroy()}// 这里一定要加上下面的这个注释 // eslint-disable-next-line react-hooks/exhaustive-deps}, [])useEffect(() => {if (editor) {editor.txt.html(value);}}, [value])return ()
}本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！