CN113485691A - Slate-based editor block-level cursor positioning method - Google Patents
Slate-based editor block-level cursor positioning method Download PDFInfo
- Publication number
- CN113485691A CN113485691A CN202110496141.7A CN202110496141A CN113485691A CN 113485691 A CN113485691 A CN 113485691A CN 202110496141 A CN202110496141 A CN 202110496141A CN 113485691 A CN113485691 A CN 113485691A
- Authority
- CN
- China
- Prior art keywords
- cursor
- block
- slate
- level
- component
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Document Processing Apparatus (AREA)
Abstract
The invention provides a Slate-based editor block-level cursor positioning method, which relates to the field of WEB front-end development and comprises the following steps: s1, supporting the element cursor, setting the designated element by configuration parameters according to actual needs, wherein the designated element can be provided with a front cursor and a rear cursor S2, and rendering a Block-Card component; (1) rendering the plug-in component; (2) and judging the Boolean value of the isBlockCard on the component, and further judging whether the block-level cursor needs to be supported, if so, returning. According to the invention, a user can position the front cursor position and the back cursor position of the block-level element simply through interactive modes such as mouse clicking, keyboard direction keys and the like, so that more interactive operations are completed, for example, a blank paragraph is inserted above the element, for example, a whole table is deleted by pressing a delete key and the like, so that the interactive experience can completely bear the interactive expectation of the Word document, the interactive experience is closer to the original operation of the Word document, the learning cost of the user is reduced, and the practicability is stronger.
Description
Technical Field
The invention relates to the field of WEB front-end development, in particular to a Slate-based editor block-level cursor positioning method.
Background
The front-end development is a process of creating a WEB page or APP and other front-end interfaces and presenting the front-end interfaces to a user, and user interface interaction of an internet product is realized through HTML, CSS and JavaScript and various derived technologies, frames and solutions.
The model referred by the method for positioning the Slate editor is browser native DOM Selection, a selected area contains attributes of anchor and focus, both the anchor and the focus use an Offset in a Path array + Offset node to describe specific positions of nodes, the identification mode can only describe positions of leaf nodes (Text), positions before and after block-level elements such as forms and pictures cannot be directly described, interaction experience of the editor is greatly influenced, positions cannot be described, specific interactions cannot be completed, the basic requirement in Wrod is achieved, most of mainstream knowledge base products can avoid the problem through product angles, for example, specific interactions can be completed through a mouse to an element popup interaction menu, the problem can be solved, however, learning cost of users is increased undoubtedly, and practical use is not facilitated.
Disclosure of Invention
The invention aims to solve the defects in the prior art and provides a Slate-based editor block-level cursor positioning method.
In order to achieve the purpose, the invention adopts the following technical scheme: a method for Slate-based editor block-level cursor positioning, comprising the steps of:
s1, supporting element cursor, setting the appointed element with front and back cursor through configuration parameter according to actual need;
s2, rendering Block-Card component
(1) Rendering the plug-in component;
(2) judging the Boolean value of the isBlockCard on the component, and further judging whether a block-level cursor needs to be supported, if so, returning;
(3) rendering a block-level cursor component;
(4) adding the result of the plug-in component rendering to a Block-Card component container;
s3, the Slate selection area is compatible, when the Block-Card component triggers a focusing event, the focus is changed into an uncontrolled selection area by inquiring the attribute state of the Block-Card component, and further the synchronous exception of a Slate positioning mechanism is avoided;
and S4, intercepting and processing, classifying the interaction behaviors of the user, performing interaction processing if the user operation is carriage return, deletion and cursor movement, and performing input processing if the user operation is Chinese or English input.
Further, in S4, the trigger event for Enter is Enter, the trigger event for Delete is Delete, and the trigger events for moving the cursor include Arrow-Left, Arrow-Right, Arrow-Top, and Arrow-Bottom.
Further, in S4, the interaction processing is specifically to rewrite the extended hook function to perform processing on carriage return, deletion, and moving the cursor.
Further, in S4, the input process includes chinese processing and english processing.
Further, the chinese processing is specifically that a composition start event is monitored first, after the composition start event is triggered, a callback function is executed, the callback function judges whether the cursor is a block-level cursor, if the boolean value is true, the slat selection area is moved to a specified position, and then the DOM selection area is forcibly driven to update.
Further, the english processing is specifically to first prevent a default insertion behavior of the browser, and then insert english.
Compared with the prior art, the method and the device have the advantages that the user can position the front cursor position and the rear cursor position of the block-level element simply through interaction modes such as mouse clicking, keyboard direction keys and the like, further more interaction operations are completed, for example, a blank paragraph is inserted above the element, for example, a deletion key is pressed to delete the whole table and the like, interaction experience can completely bear the interaction expectation of the Word document, the interaction experience is closer to the original operation of the Word document, the learning cost of the user is reduced, and the practicability is higher.
Additional features and advantages of the invention will be set forth in the description which follows, and in part will be obvious from the description, or may be learned by practice of the invention. The objectives and other advantages of the invention will be realized and attained by the structure particularly pointed out in the written description and claims hereof as well as the appended drawings.
The technical solution of the present invention is further described in detail by the accompanying drawings and embodiments.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.
Fig. 1 is a step diagram of an editor block-level cursor positioning method based on Slate according to the present invention.
Detailed Description
The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
In a first embodiment, referring to fig. 1, the method for editing editor block-level cursor positioning based on Slate includes the following steps:
s1, supporting element cursor, setting the appointed element with front and back cursor through configuration parameter according to actual need;
s2, rendering Block-Card component
(1) Rendering the plug-in component;
(2) judging the Boolean value of the isBlockCard on the component, and further judging whether a block-level cursor needs to be supported, if so, returning;
(3) rendering a block-level cursor component;
(4) adding the result of the plug-in component rendering to a Block-Card component container;
s3, the Slate selection area is compatible, when the Block-Card component triggers a focusing event, the focus is changed into an uncontrolled selection area by inquiring the attribute state of the Block-Card component, and further the synchronous exception of a Slate positioning mechanism is avoided;
and S4, intercepting and processing, classifying the interaction behaviors of the user, performing interaction processing if the user operation is carriage return, deletion and cursor movement, and performing input processing if the user operation is Chinese or English input.
Preferably, in S4, the trigger event for Enter is Enter, the trigger event for Delete is Delete, and the trigger events for moving the cursor include Arrow-Left, Arrow-Right, Arrow-Top, and Arrow-Bottom.
Preferably, in S4, the interaction processing is specifically to rewrite the extended hook function to process carriage return, deletion, and moving the cursor.
Preferably, in S4, the input process includes chinese processing and english processing.
Preferably, the chinese processing is specifically to monitor a composition start event, execute a callback function after the composition start event is triggered, the callback function judges whether the cursor is a block-level cursor, move the Slate selection area to a specified position if the boolean value is true, and then forcibly drive the DOM selection area to update.
Preferably, the english processing is specifically to first prevent a default insertion behavior of the browser, and then insert english.
It can be seen from the above embodiments that, the invention enables a user to position the front and back cursor positions of the block-level element simply by mouse clicking, keyboard direction keys and other interaction modes, and further completes more interaction operations, such as inserting a blank paragraph above the element, for example, pressing a delete key to delete the whole table, and the like, so that the interaction experience can completely bear the interaction expectation of the Word document, the interaction experience is closer to the native operation of the Word document, the learning cost of the user is reduced, and the practicability is strong.
It will be apparent to those skilled in the art that various changes and modifications may be made in the present invention without departing from the spirit and scope of the invention. Thus, if such modifications and variations of the present invention fall within the scope of the claims of the present invention and their equivalents, the present invention is also intended to include such modifications and variations.
Claims (6)
1. A method for positioning cursor on editor block level based on Slate is characterized in that the method for positioning cursor on editor block level based on Slate comprises the following steps:
s1, supporting element cursor, setting the appointed element with front and back cursor through configuration parameter according to actual need;
s2, rendering Block-Card component
(1) Rendering the plug-in component;
(2) judging the Boolean value of the isBlockCard on the component, and further judging whether a block-level cursor needs to be supported, if so, returning;
(3) rendering a block-level cursor component;
(4) adding the result of the plug-in component rendering to a Block-Card component container;
s3, the Slate selection area is compatible, when the Block-Card component triggers a focusing event, the focus is changed into an uncontrolled selection area by inquiring the attribute state of the Block-Card component, and further the synchronous exception of a Slate positioning mechanism is avoided;
and S4, intercepting and processing, classifying the interaction behaviors of the user, performing interaction processing if the user operation is carriage return, deletion and cursor movement, and performing input processing if the user operation is Chinese or English input.
2. The Slate-based editor block-level cursor positioning method of claim 1, wherein: in S4, the trigger event for carriage return is Enter, the trigger event for deletion is Delete, and the trigger events for moving the cursor include Arrow-Left, Arrow-Right, Arrow-Top, and Arrow-Bottom.
3. The Slate-based editor block-level cursor positioning method of claim 1, wherein: in S4, the interaction process is specifically to rewrite the extended hook function to process carriage return, deletion, and moving the cursor.
4. The Slate-based editor block-level cursor positioning method of claim 1, wherein: in S4, the input process includes chinese processing and english processing.
5. The Slate-based editor block-level cursor positioning method of claim 4, wherein: the Chinese processing is specifically that a composition start event is monitored, a call-back function is executed after the composition start event is triggered, the call-back function judges whether a cursor is a block-level cursor, if the Boolean value is true, a slat selection area is moved to a specified position, and then a DOM selection area is forcibly driven to update.
6. The Slate-based editor block-level cursor positioning method of claim 4, wherein: specifically, the English processing is to prevent the default insertion behavior of the browser and then insert English.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110496141.7A CN113485691A (en) | 2021-05-07 | 2021-05-07 | Slate-based editor block-level cursor positioning method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110496141.7A CN113485691A (en) | 2021-05-07 | 2021-05-07 | Slate-based editor block-level cursor positioning method |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113485691A true CN113485691A (en) | 2021-10-08 |
Family
ID=77932812
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110496141.7A Pending CN113485691A (en) | 2021-05-07 | 2021-05-07 | Slate-based editor block-level cursor positioning method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113485691A (en) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104049837A (en) * | 2013-03-15 | 2014-09-17 | Lg电子株式会社 | Mobile terminal and modified keypad using method thereof |
| CN105138503A (en) * | 2015-08-27 | 2015-12-09 | 网易（杭州）网络有限公司 | Data editing method and device |
| US20160109954A1 (en) * | 2014-05-16 | 2016-04-21 | Visa International Service Association | Gesture Recognition Cloud Command Platform, System, Method, and Apparatus |
| CN111897530A (en) * | 2020-07-23 | 2020-11-06 | 上海珀立信息科技有限公司 | UI system and method based on UE4 platform |
-
2021
- 2021-05-07 CN CN202110496141.7A patent/CN113485691A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104049837A (en) * | 2013-03-15 | 2014-09-17 | Lg电子株式会社 | Mobile terminal and modified keypad using method thereof |
| US20160109954A1 (en) * | 2014-05-16 | 2016-04-21 | Visa International Service Association | Gesture Recognition Cloud Command Platform, System, Method, and Apparatus |
| CN105138503A (en) * | 2015-08-27 | 2015-12-09 | 网易（杭州）网络有限公司 | Data editing method and device |
| CN111897530A (en) * | 2020-07-23 | 2020-11-06 | 上海珀立信息科技有限公司 | UI system and method based on UE4 platform |
Non-Patent Citations (1)
| Title |
|---|
| PUBUZHIXING: "基于Slate的块级光标定位方案", pages 1 - 8, Retrieved from the Internet <URL:https://zhuanlan.zhihu.com/p/346679410> * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| WO2015039566A1 (en) | Method and system for facilitating automated web page testing | |
| JPH08501401A (en) | Object-oriented notification framework system | |
| US20170289293A1 (en) | Manipulation of browser dom on server | |
| WO2005048079A2 (en) | Mobile content engine with enhanced features | |
| JPH0683772A (en) | Method and system for language translation in dialog-type software application | |
| CN103098001B (en) | A kind of disposal route of user interface and electronic equipment | |
| CN103902057A (en) | Webpage input method and device for mobile terminal device | |
| CN105279431B (en) | Method, device and system for recording operation information in mobile equipment | |
| Díaz et al. | End-user browser-side modification of web pages | |
| CN115983221B (en) | Visual RPA table operation recording and automatic executing method and system | |
| CN113239672A (en) | Target file editing method and device, electronic equipment and storage medium | |
| CN115964027A (en) | Desktop embedded RPA flow configuration system and method based on artificial intelligence | |
| CN109240664A (en) | A kind of method and terminal acquiring user behavior information | |
| CN109298819B (en) | Method, device, terminal and storage medium for selecting object | |
| CN105630268A (en) | Method and device for uploading files in network | |
| CN113485691A (en) | Slate-based editor block-level cursor positioning method | |
| CN112817817A (en) | Buried point information query method and device, computer equipment and storage medium | |
| CN109815977B (en) | Cutting and marking integrated method for mass production of machine learning samples | |
| CN116028035A (en) | Code processing method, front-end page development system and electronic equipment | |
| EP1735718A2 (en) | A method and apparatus for providing in place editing within static documents | |
| CN104965633A (en) | Service jumping method and apparatus | |
| CN113901360A (en) | Data processing method and device and electronic equipment | |
| CN109032907B (en) | Data monitoring method and system for equipment application | |
| CN113868565A (en) | Skin style file editing method and device | |
| Wei et al. | Assisted human-in-the-loop adaptation of Web pages for mobile devices |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |