zhangzxpan 2022-09-07 16:21 采纳率: 76.5%
浏览 89
已结题

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

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

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

img

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

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

  • 写回答

5条回答 默认 最新

  • web修理工 2022-09-08 15:12
    关注
    

<!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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(4条)

报告相同问题？

问题事件

  • 系统已结题 9月17日
  • 已采纳回答 9月9日
  • 修改了问题 9月7日
  • 创建了问题 9月7日