网页中带格式的文本编辑框如何实现？

问题遇到的现象和发生背景 ?

在这个网页里有一个文本框，可以编辑，而且从WORD中复制粘贴过来时还能完全保留原来的格式，请问是如何实现的？
网页：http://cunchu.site/app/neirong/index.html

img

我的解答思路和尝试过的方法

请问使用VUE的话该如何实现？能否有已经成型的组件可以使用？



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin="anonymous"
        integrity="sha512-PhuYrdDBtBeUjY7KTmjRYFFadw8uXXdTmzZyhCHZewYsqZJ0pxFCwU528jRoil42LXMW3ksegQT5zdjkfiR1IA=="
        src="https://lib.baomitu.com/vue/2.7.7/vue.min.js"></script>
    <style>
        textarea {
            min-height: 1800px;
            width: 1000px;
            color: #f00;


            border: none;
            outline: none;
            padding: 10px;
            font-size: 20px;
            overflow: auto;
            white-space: normal;
            line-height: 34px;
        }
    </style>
</head>

<body>
    <div id="app">
        <pre>
            <textarea v-model="textarea">
            </textarea>
        </pre>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                textarea: `这是一个测试数据,这是一个测试数据,这是一个测试数据这是一个测试数据,这是一个测试数据,这是一个测试数据这是一个测试数据,这是一个测试数据,这是一个测试数据这是一个测试数据,这是一个测试数据,这是一个测试数据这是一个测试数据,这是一个测试数据,这是一个测试数据这是一个测试数据,这是一个测试数据,这是一个测试数据这是一个测试数据,这是一个测试数据,这是一个测试数据这是一个测试数据,这是一个测试数据,这是一个测试数据这是一个测试数据,这是一个测试数据,这是一个测试数据这是一个测试数据,这是一个测试数据,这是一个测试数据这是一个测试数据,这是一个测试数据,这是一个测试数据这是一个测试数据,这是一个测试数据,这是一个测试数据`
            },
            methods: {

            }
        })
    </script>
</body>

</html>

这种是富文本组件，你可以试试这个，在vue里面安装该组件，内容黏贴进去就行
https://blog.csdn.net/qq_43405603/article/details/125676543

这个网站是使用 CodeMirror 这个插件做的
如果想用vue实现的，可以看看这个组件 vue-codemirror

你说的word是什么，office工具里面的word工具吗？如果是那里面的你别想了，那个复制只能获取到文字，无法获取到完整的格式，这已经跨软件了操作了，是无法识别对方粘贴的格式的

这个需要使用web富文本编辑器