如何优化 Element UI 2.0 的 input 组件在巨量文本下拖动和输入的卡顿问题？

[luminousNcc]

各位大佬，小弟最近接手了一个项目，是一个 TXT 文档的在线编辑器，使用基于 Vue2 的 Element UI 2.0.

编辑器的部分直接用了一个el-input，具体如下所示：

<el-input
  v-model="book.content"
  type="textarea"
  :autosize="{ minRows: 10, maxRows: 30 }"/>

现在的问题是当这个 TXT 文档的内容量过大（字数超过 100000 后)：

1. 拖动右侧的滚动条，文本渲染卡顿，拖动一次到内容呈现需要 2-3 秒。
2. 输入文字时卡顿，从键盘敲击到文字出现需要 5 秒。
3. 点击插入光标时卡顿，从点击到光标响应出现需要 2-3 秒。

想请问各位大佬有什么优化这种卡顿问题的方法吗？

[asiasky]

用元素的 contnetEditable 属性做输入，https://caniuse.com/?search=contentEditable

[ZGame]

换成 vscode ide 的编辑器内核

[realJamespond]

换第三方的 editor 试试，ckeditor

[Kmmoonlight]

https://prosemirror.net/examples/ ProseMirror 我们内网项目写脚本用这个

[luminousNcc]

@Kmmoonlight 感谢大佬，帮大忙了！这个性能确实快