谷歌文档textcursor [英] google docs textcursor

问题描述

我需要创建一个类似于Google文档的应用程序。我已经看到，谷歌文档不使用任何textarea，但常规div来创建页面。但我不知道的是他们如何设法获得文本光标。这是一个闪烁的图像吗？因为当我尝试使用Chrome开发人员工具查看网页代码时，我没有看到任何图像。他们如何做到这一点？ 解决方案

Google文档使用了独特的编辑方法。 contentEditable上没有文本，但所有内容都使用DOM呈现。它监听击键和操作DIV。

游标只是绝对定位的DIV，它是编程式隐藏或显示的。搜索名为kix-cursor-caret的类。

编辑器代号为Kix，您可以在这里看到它的源代码： https://github.com/benjamn/kix-standalone

I need to create an application which is similar to google docs. I have seen that google docs doesn't use any textarea but regular divs to create pages. But what I don't know is how they manage to get a text cursor. Is it an image blinking? cause I didn't see any image when i tried to see the webpage code with chrome developer tools. How do they do it?

解决方案

Google Docs uses unique editing method. There is no text ares with contentEditable on, but everything is rendered using DOM. It listens for keystrokes and manipulates DIVs.

Cursor is just absolute positioned DIV which is programatically hidden or shown. Search for class named "kix-cursor-caret".

Editor is codenamed Kix and you can see it's source codes here: https://github.com/benjamn/kix-standalone

这篇关于谷歌文档textcursor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！