用element制作一个好看的长文本框（可粘帖照片）

 实现一个类似于这样的发送框，可以滚

截图之后会这样子

下面是html和css

   <el-card shadow="hover" class="card-hover-blue-border" style="width: 99%; height: 230px; margin: 10px;">
          <div class="reply-container">
          <div class="reply-info" >
            <div
            placeholder="输入评论..."
            class="reply-input"
            >
            </div>
        </div>
        <el-button type="primary" class="el-icon-s-promotion" style="height:50px;margin-top: 120px;" ></el-button>
      </div>
        </el-card>

.card-hover-blue-border:hover {
    border-color: blue;
    border-width: 1px;
    border-style: solid;
  }
  .reply-info {
  display: inline-block;
  margin-left: 2px;
  width: 97%;
  @media screen and (max-width: 1200px) {
    width: 80%;
  }

  .reply-input {
    min-height: 200px;
    max-height: 200px;
    line-height: 22px;
    padding: 10px 10px;
    color: #030303;
    background-color: #fff;
    border-radius: 5px;
    border-color: white; /* 默认状态边框颜色为白色 */
    overflow-y: scroll; /* 显示滚动条，即使内容未溢出 */
  scrollbar-width: none; /* 针对 Firefox 隐藏滚动条 */
  -ms-overflow-style: none; /* 针对 IE/Edge 隐藏滚动条 */
  position: relative; /* 为添加伪元素做准备 */

  &::-webkit-scrollbar { /* 针对 WebKit/Blink 浏览器隐藏滚动条 */
    width: 0;
    height: 0;
  }

  &::before { /* 用于模拟滚动条区域的伪元素 */
    content: "";
    position: absolute;
    top: 0;
    right: -17px; /* 负值大小根据实际滚动条宽度调整 */
    bottom: 0;
    width: 17px; /* 负值大小对应的宽度 */
  }
    &:empty:before {
      content: attr(placeholder);
    }
    &:focus:before {
      content: none;
    }
    &:focus {
      padding: 8px 8px;
      border: 2px solid white; /* 更改为白色，与默认状态一致 */
      box-shadow: none;
      outline: none;
    }
  }
}
.reply-container {
    display: flex; /* 使用 Flex 布局 */
    justify-content: space-between; /* 子元素两端对齐，中间留空 */
  }

如果要实现照片的上传的话需要给input框添加监听，对button添加点击事件

 <el-card shadow="hover" class="card-hover-blue-border" style="width: 99%; height: 230px; margin: 10px;">
          <div class="reply-container">
          <div class="reply-info" >
            <div
            tabindex="0"
            contenteditable="true"
            id="replyInput"
            spellcheck="false"
            placeholder="输入评论..."
            class="reply-input"
            @input="onDivInput($event)"
            slot="reference"
            >
            </div>
        </div>
        <el-button type="primary" class="el-icon-s-promotion" style="height:50px;margin-top: 120px;" @click="sendComment"></el-button>
      </div>
        </el-card>

上传的base64的文件需要进行分析，以及一些文字也需要进行同步分析，下面是js，自行修改一下就能用了

 var app = new Vue({
        el: "#app",
        data() {
            return{
                comments:[{name:'yigeren'}],
                replyComment:'',
                srcList:[]


                        }
        },
        methods: {
  base64ToFile(base64Data, fileName) {
        var arr = base64Data.split(',');
        var mime = arr[0].match(/:(.*?);/)[1];
        var bstr = atob(arr[1]);
        var n = bstr.length;
        var u8arr = new Uint8Array(n);
        
        while(n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
    
        // 创建Blob对象
        var blob = new Blob([u8arr], {type: mime});
    
        // 创建File对象
        var file = new File([blob], fileName, {type: mime});
    
    return file;
},
 
  // 识别文本中的截图并上传
    uploadScreenshotsFromText(text) {
      const pattern = /data:[^"]+/g;
const images = text.match(pattern);
const images_url = [];

if (images !== null) {
    const promises = images.map((image, index) => {
        return new Promise((resolve, reject) => {
            const file = this.base64ToFile(image, `截图${index}`);
            var formData = new FormData();
            formData.append('file', file);
            var xhr = new XMLHttpRequest();
            
            xhr.open('POST', 上传图片的url, true);
            xhr.onload = function() {
                if (xhr.status >= 200 && xhr.status < 300) {
                    var response = JSON.parse(xhr.responseText);
                    app.srcList.push(response.url);
                    images_url.push(response.url);
                    resolve();
                } else {
                    reject('请求失败');
                }
            };
            
            xhr.send(formData);
        });
    });

    // 等待所有请求完成后再返回images_url
    return Promise.all(promises).then(() => {
        return images_url;
    });
} else {
    return Promise.resolve(images_url);
}
},
//获取评论框数据
        onDivInput: function(e) {
            this.replyComment = e.target.innerHTML;
        },

 async  sendComment(){
            if(!this.replyComment){
                 this.$message({
                    showClose: true,
                    type:'warning',
                    message:'评论不能为空'
                })
            }else{
                let a ={}
                let input =  document.getElementById('replyInput')
                let timeNow = new Date().getTime();
                a.name= this.myName
                var images_url=await  this.uploadScreenshotsFromText(this.replyComment)
                // 创建一个div元素来容纳HTML文本
                var div = document.createElement('div');
                div.innerHTML = this.replyComment;
                // 获取所有的<img>标签
                var imgTags = div.getElementsByTagName('img');
                // 替换<img>标签的src属性
                for (var i = 0; i < imgTags.length; i++) {
                    imgTags[i].setAttribute('src', 'data:' + images_url[i]);
                }
                // 获取更新后的HTML文本
                this.replyComment= div.innerHTML;

                a.comment =this.replyComment
                a.headImg = this.myHeader
                this.replyComment = ''
                input.innerHTML = '';
              
                $.ajax({
                    url: 你自己的url(存储数据),
                    type: "POST",
                    data:{comment: a.comment,reply_id:''},
                    dataType: "JSON",
                    success: function (res) {
                    if (res.status) { 
                     
                      
                    } else {

                            }
                            }
                        });

            }
        },
})