I have an application that creates several hundreds of inline CKEditor instances on the same page and it is too slow to create them all at once. I want to create an editor when the user clicks a contenteditable element, like this:
$("#editor").click(function()
{
CKEDITOR.inline("editor");
});
Example fiddle: https://jsfiddle.net/adrianrosca/m3dtvcku/4/
But when I click in the middle of the text, the cursor will jump to the beginning of the content and that's not a good behaviour.
Is there a way to get the cursor to stay put or is there another way to create/destroy lots and lots of inline editors.
Related
My question is it possible to dynamically change the text of a Konva.text by doble clicking and entering the new text with the keyboard?
Konva has no out-the-box editable Text.
The docs page suggests placing an editable HTML element on top of your canvas, let the user make edits, then remove it when done. With this approach, your main problem would be to keep the text styles consistent between the Konva element and the DOM element, to some degree. Otherwise, the transition between the two modes might not look truly WYSIWYG-like. However, depending on what you need, this solution might be just close enough.
Another approach would be to create a hidden textarea/input, capture its events, and fully emulate text interactions, like cursor movements and text selection, on canvas. This would be hard to do properly but could arguably lead to a more seamless UX. In fact, this is what fabric.js does under the hood for its editable text.
I know there are many similar topics but none of them has the solution to my problem so please read my question carefully before sending similar topic links and marking as duplicate question.
I have a content editable DIV object, something similar to TextArea control. My goal is to cancel key press events if content starts scrolling and there must be no flickering.
When i use keyUp event, it's too late to cancel and there is also no methods available to cancel changes. What's done is done at this stage.
When i use keyDown or keyPress events, they are cancelable. But new changes are not yet applied. So, i know which character is pressed etc. but i still don't know how it's going to affect the scrolling size.
Plus, i allow style changes like making the text bold or changing the font size. Since there is;
document.execCommand("undo");
command, i'm able to test these changes and undo if scrolling starts. To test things, i use a cloned div with same content. It works fine. Changes are applied to cloned div (which is visible at the moment for debugging purposes but will be invisible if the method works) and if cloned div has an overflow, changes are canceled.
My problem is at doing the same thing for key presses. It's harder to simulate what happens to editable div content than using document.execCommand for other styling options. What i need is to get the innerHTML result at keyUp stage before keyUp occurs and event is still cancelable like keyDown or keyPress.
To simulate things, i tried getting cursor position and adding pressed characters manually using substring function but content isn't plain text and i had many problems with it. For instance when i press enter, an HTML block <div><br></div> is added for newline character which messed up cursor position. I tried many ways to handle things but it's very open to bugs. So, i decided not to follow this path.
In short my question is;
How can i possibly limit an editable div area by height, not allowing
to overflow or scroll without any flickering, just canceling key press
events? Do i have to simulate something like willKeyUp or is there any
other cross browser way?
Here is jsfiddle link for my sample which works for document.execCommand case (changing font size, weight etc.) but fails at typing letters;
http://jsfiddle.net/7zQD2/
Edit: To clarify my goal at jsfiddle example, after writing 5 lines of text, either when you press enter or type to end of the line, cursor should never reach to the sixth line. Key presses should be canceled and cursor should stay at fifth line with no content changes or flickers.
One solution is to use the cloning setup you already have, but to set the opacity of the first copy to 0 and position it on top of the clone with position: absolute in the css. The first copy won't be visible, but will catch a click directed towards the visible one underneath it. You can change your event to fire on keyup.
Since the transparent div still exists, and still has height, it can measure text height for you without being visible to the user. The visible text then updates to match what is learned with the transparent text, and never reaches the 6th line or flickers.
http://jsfiddle.net/7zQD2/2/
I want to draw a dot each time the user clicks/touches a point on any web page. Ideally this would be some kind of transparent pane that draws these dots but also allows the clicks/touches to pass through the pane so that original page doesn't lose functionality.
I think you have to do two things. First of all create a click event listener on your body, that way you will catch all clicks. When clicked, place an dom element, for example a div on that position and format it as you wish.
Secondly look at this: Click through a DIV to underlying elements
Hope it helps!
I have a set of thumbnails and whenever a user clicks a thumbnail I'd like to show a corresponding descriptive text.
I was planning to do it with one div that its innerhtml will change according to the onclicked thumbnail (with javascript). Will all the descriptive text be invisible to robots (seo-wise)?
Any better idea how to implement it?
For SEO, it is simplest if all text you want the search engine to see is in your actual HTML markup. Rather than change the innerHTML on one div, you might put multiple divs next to each other and just hide/show the right ones. Then all text will be in the markup.
Thumbnail descriptions also belong in the alt attribute on the image and search engines look for them there. I don't know exactly how your app works to know if that's sufficient, but you may at least want to also put the descriptive text there.
I'm trying to build a word processor web app, similar to Google Docs. I've started using Mercury Editor (which relies on the contentEditable attribute) and I've created an editable div element that looks like a paper page (as Google Docs does).
Now the big problem is how to deal with several pages, i.e., how to detect when text (or other content) overflows the page height and then create a new page with the content split. There are a few scenarios when this could ocurr:
A user type a break line at the end of the page. A new page should be created.
A user is typing a word and he reaches the end of the page. A new page should be created and that word should be moved to the new page.
A user pastes some large text and it doesn't fit totally on the current page. A new page should be created and only the text that doesn't fit should be moved to the new one.
A user inserts any other element (an image for instance), that doesn't fit in the current page. A new page should be created with that element.
I've tried to dive into the Google Docs JS code but it's pretty impossible to follow, since it's compressed. There is a standalone version of Google Docs, with the code beautified, however it's old and doesn't handle several pages.
Any hint about how to accomplish this will be appreciated.
If your container have a fixed size you can use the overflow event to detect it.
window.addEventListener ("overflow", yourFunction, false);
Basically you'd want two divs, like this
<div id='pageWrapper'>
<div id='page' style='max-height: 600px; overflow: hidden;'>
</div>
</div>
All #pageWrapper does is sit there and look like a page, all the content that someone adds is added to the #page. Everytime someone adds content, whether through pasting or typing check #page's scrollHeight versus it's offsetHeight. If the scrollHeight is bigger you've overflowed the page, and you can start moving content (word by word, or element by element) to the next page until the scrollHeight is equal to the offsetHeight again.
If the user inserts a page break, just set #page's height to wherever the page break is, so that anything that comes after that will overflow the page. This will get tricky with large documents, since if someone overflows page 1, content will have to be adjusted until page whatever, but I guess that's why Google Docs doesn't have pages.