用div实现编辑器的功能，可ctrl+c使用ctrl+v粘贴进去

瞌睡虫～

已于 2022-03-09 15:34:00 修改

阅读量821

点赞数

文章标签： javascript 前端编辑器 react.js

于 2022-03-09 15:32:18 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41020757/article/details/123378977

版权

本文介绍了如何利用contentEditable属性创建一个可编辑的div组件，实现了包括复制、粘贴文字和图片在内的功能。通过样式处理，返回的是一个DOM字符串。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话不多说，直接上代码吧，自己封装的一个小组件，主要是利用contentEditable="true"属性设置div可编辑啊，可以复制文字，图片什么的，我这边是做了样式的处理，返回值是一个dom字符串。代码如下，不懂的留言：

import React from 'react';
import { connect } from 'react-redux';
import moment from 'moment';
import PropTypes from 'prop-types';
import { fetchutil, util } from 'util';
import { Spin, message } from '@web-public/antd';
import './index.less';
// 上传图片设备对接sourceType
const SZSOURCETYPE = new Map([['jpg', 75], ['jpeg', 75], ['png', 75]]);

class Editor extends React.Component {
  static defaultProps = {
    imgShowWidth: 400, // 输入框中粘贴的图片显示的宽度
    imgShowHeight: 200, // 输入框中粘贴的图片显示的高度
  }
  static propTypes = {
    imgShowWidth: PropTypes.number, // 输入框中粘贴的图片显示的宽度
    imgShowHeight: PropTypes.number, // 输入框中粘贴的图片显示的高度
  }
  constructor(props) {
    super(props);
    const { value = '' } = this.props;
    this.state = {
      uploadUrl: 'web_service/file/pre_upload',
      loading: false,
      msgList: [],
      lastContent: '', // 最终的数据,
      value
    };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.value !== prevState.value) {
      return {
        value: nextProps.value
      };
    }
  }

  /**
   * 粘贴 ctrl+v
   * @param {*} event
   */
  handlePaste = async (event) => {
    event.preventDefault();
    const clipboardData = event.clipboardData;
    const textList = [];
    const imageList = [];
    for (let i = 0; i < clipboardData.items.length; i++) {
      if (clipboardData.items[i].type.indexOf('image') !== -1) {
        imageList.push(clipboardData.items[i]);
      } else {
        tex

最低0.47元/天解锁文章