im trying to make a rich text editor with execCommand and a div that is contenteditable.
It should have some small functionalities like bold, italic, underline, ol, ul, ... All those things should work with execCommand.
I also wanna have feedback from my cursor when i am standing in a bold word, that my button toggles to 'on' (changes styling), i do this with queryCommandState.
I have encountered numerous bugs and problems and i was wondering if execCommand and queryCommandState are stable? On caniuse.com they say it is but i've come across the following bugs:
In Chrome:
No feedback on subscript and superscript
In Firefox:
When making something italic or underline or ... the cursor cant move in that particular part of the string. This doesn't happen when i make a text bold.
ordered and unordered list doesnt seem to work at all in firefox. the bullet is shown but cant enter any text
In Internet Explorer:
Cant select any text
I'm probably forgetting some bugs, but my overall experience with execCommand and queryCommandState is that it's pretty buggy.
Is execCommand something to consider for apps that go in production? Or is it generally discouraged?
Related
I've installed Medium Editor on our site, on two different pages. They both work fine, and are initialised with the exact same code, but on one of pages the Bold button/shortcut doesn't work.
The page on which it doesn't work gets a lot more styling (and has a lot more js libraries) compared to the one that does work, and so I'm wondering if something else might be getting in the way.
I can't see any js errors in the console. Has anyone encountered this problem? I saw another forum post saying it was something to do with styling on font-weight, but I can't see how this would actually stop the function working completely: it just seems to be disabled - the "B" button in the Medium Editor's popup menu doesn't change color when you click on it.
If it was a css issue I'd expect the button to change color but the text to not look different, perhaps, but it does just seem like "Bold" is disabled. Also, any tags already in the content's html do display ok.
Has anyone else encountered this, or other functions seemingly not working?
EDIT: I just poked it some more and noticed that if something is bold already, and I highlight it, the B button does look activated, and and I can "unbold" it. However, after unbolding the selected text, I can't "bold" it again.
EDIT2: More poking has revealed that if the highlighted text is set to be a heading, or is italicised, then I can bold and unbold it as intended. So it's really just "normal" text which seems to be "bold-resistant".
I found the answer - the problem page had the text area inside a label tag, and so was picking up the styling for label across the site, which had font-weight: 700. This was preventing Medium Editor from applying the Bold style to it.
I came across a website that used styling on the caret for an input text field. I've never seen this before but it looks really nice. I've done a ton of research but there doesn't seem to be a lot of information on how to do it. Please see gif below:
How do you change the colour and height of a caret?
For reference the website is betterment.com.
Isn't it the same style as the input itself (color, font-size, etc..) ?
Here it is green.
Double space can be achieved using CSS with line-height:2em, which also makes text selection doubles when you drag on it. Is there any way to have text selection not include extra padding that occurs from CSS line-height, just like how it would look like when you drag what I have wrote here?
I have the following options:
Divide paragraph into sentences, each with their own element, and push/pull words when overflow/underflow. (What I have implemented so far)
Make line-height 2em, disable default text selection, and draw text selection box with Javascript. It may still be complicated, but probably not as much as having to push/pull words on every text input.
There is this diabolically simple trick I am not aware of.
There is a simple trick: use Firefox.
Chrome:
Firefox:
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 have an HTML file and I am opening it with Webkit.
I want to develop an app such that after opening it, I should be able to select some text and make it noted (say by pressing a 'Note Text' button).
When I press the button, a note image should appear on the right, but I cannot figure out the selected text position and I also have no idea about how to add a floating image on the right (maybe a div element)?
Can anyone give me a fragment of sample code about adding annotations/notes in Javascript?
I recently used this article on Quirksmode.org to get started with identifying a user selection in Javascript. Essentially, IE differs from other browsers in what information you get about the selection: Mozilla and other browsers provide the relatively powerful Selection, while IE provides a TextRange.
If you're able to stick to Webkit-based browsers, you have significant ability to identify selected text with the Selection returned by window.getSelection().
As for adding a floating image near your selected text, you can use the anchorNode property of the Selection to find the element near to which you'll want to add your image. To do the actual positioning of the image - yes, probably in a div, I recommend learning about positioning in CSS.