I want to make a basic text editor using angularjs (or just pure javascript). The idea is that I will have a div to contain the text, instead of using textarea. I want the user to be able to click anywhere inside the div and have a blinking cursor appear where they click. I really have no idea how to do this. Any suggestions? By the way, I would prefer not to use contentEditable.
Since you prefer not to use contenteditable, Here's a few suggestions you could have a look at to get a blinking cursor, manually:
Overlay the div with a canvas element, get the click's position, and animate a line on the canvas at that position.
Overlay a animated .gif containing the blinking line at the click's position.
Use a animated .gif containing the blinking line as the div's background, and set the background-position, depending on the click's location.
For the above two suggestions, instead of a .gif, you can use a static image, and toggle it.
You'll have to keep in mind that the line will have to snap to the closest character boundary, so you won't have your cursor blinking in the middle of a character. Using a monospaced font would make that a lot easier.
You will still have to write the other features a text field has, though:
Text manipulation.
Selections.
Copy / pasting
You can make the div editable by adding contentEditable="true" attribute to the div element.
<div contentEditable="true"></div>
As you mentioned you wanted to avoid using of contentEditable then you can go for Javascript/Jquery plugin. It will be very easy for you if you use plugin rather developing it on your own. Here is a jquery plugin which can come in handy. http://www.appelsiini.net/projects/jeditable
you could try setting the div to contenteditable
<div contenteditable>
</div>
JSFiddle
Seems you are looking for html5 contenteditable attribute.
http://html5demos.com/contenteditable
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 was wondering how the guys who made carv.ai achieved the text masking effect on the paragraph "Carv connects wirelessly ...".
I know that we can mask a background image on a text.
The first thing that you can do to have text masking, is either give the masking div a greater z-index than the text, or make the text the same color as the masking color. Then you can use jQuery to make the div slide away.
Here is the jQuery:
$("#id").animate({width:'toggle'},350);
I am using tinyMCE editor, i need to make some contents radonly (nonEditable).
As per its documentation, if i use class "mceNonEditable" with some elements, it fulfill the requirement, but unfortunately if i select that specific element and press backspace / Enter / Delete button, it removes that content.
All i want is that, user shouldn't be able to make any contact with those elements.
Official example can be seen here.
Any how, I also tried to accomplish this with an overlay div, overlay div needs absolute position, and after applying this style, editor convert this div into drag able form.
Please help, if there is any other solution..
I've found that setting the contentEditable attribute to false on the element does the trick.
I have two simple textareas where in i want to highlight the javascript code being written.
As soon as the user types the function in the text area , the keywords etc have to be displayed in different color or so.
I tried to hack this script . But couldnt get what i wanted.
You could check Ace (demo) and CodeMirror (demo).
I suppose Textarea that can do syntax highlighting on the fly? and Online Code Editor questions will be useful for you as well.
I've always been interested in having textarea elements with added functionalities such as code highlighting, while still remaining as simple editable textareas. I've experimented a little bit here: http://www.dcc.uchile.cl/~jmunoz/
It's far from optimal and quite buggy, but still... It allows text highlighting using arbitrary rules. I used to have a working version which allowed to change the text color (And not just the background), but It had some issues.
Basically what I do is adding a div overlay with exactly the same content and font style as the text area but with transparent fonts. The text inside has span elements wrapping certain words and phrases which may have special backgrounds, borders, etc.
To allow for different font colors, I tried making the textarea text transparent while showing the overlay div text. The main issue there was that the cursor became transparent too.
I would say that using a div with editablecontent seems like a much better option.
I think that you can use a div or section tag with content editable attribute. Inside this div or section you can use an additional markup for higlight functions, vars and etc. But this attribute work only in new browsers that support html5 attribute content editable. Here is a demo
If you need a simple js highligter, may be this one https://github.com/cloudhead/hijs is usefull for your task
Because a text area cannot contain markup, you cant so highlighting per se. The approach I used for an inline spell checker was to overlay divs for words that were spelled incorrectly. This was possible because it was possible to get the x and y location of words inside the text.
However it may be preferable to overlay the textarea with a content editable div which would allow you to wrap content in spans etc and then apply styling.
I am trying to implement something like the "Change/Remove Link" in Gmail/Google Docs richtext WYSIWYG edtior, when you type a URL, a div shows underneath it says "Goto Link, Change, Remote"
How could I write something like that using jQuery?
How to get row and column of cursor?
how can I calculate font width and height (especially non-fixed width font with some Bold/Italic style)
How to make sure the DIV appears at the start of a word?
Thank you in advance!
Answer: http://jsfiddle.net/morrison/57BR3/
What it does:
Creates div positioned near hyperlink.
Looks like Google docs box.
Ability to change text and url.
Remove is implemented.
What it does not do:
Work on textarea. Textareas don't support html as they are plain text. This is a complex process to work-around. Find a library, then implement my answer.
Open when your cursor gets moved onto it by arrowkeys. Doesn't work because of above item.
You're suggesting you're building a WYSIWYG editor. Are you sure you want to use a textarea? Textareas don't support HTML. To answer your later comment, the best way to get the (x, y) position of the caret in a text area is to use the textarea-caret-position plugin.