I am trying to add different styles within a textarea eg bold, different colors etc
WYSIWYG editors (eg tinyMCE) used in web pages typically do this but I am having trouble working out how they do it.
You cannot do this:
alt text http://www.yart.com.au/test/html.gif
So how do they achieve it?
Owen has the right idea. Those libraries replace the textarea with an iframe and then put the iframe's document into designMode or contentEditable mode. This literally enables you edit the html document in the iframe while the browser then handles the cursor and all keystrokes for you and gives you an api that can be called to make styling changes (bold, italic, and so on). Then when the user submits the form they copy the innerHTML from the iframe into the original textarea. For more details about how to enable this mode and what you can do with it see: https://developer.mozilla.org/En/Rich-Text_Editing_in_Mozilla
However, my suggestion to you is to use one of the existing rich text control libraries if you would like this ability on your site. I have built one before and found that you will spend huge amounts of time dealing with browser inconsistencies in order to get something that works well. Beyond the differences in how you enable editing features, you will also want to normalize the html that is created. For example, IE creates <br> elements when the user presses enter and FF creates <p> tags. For style changes IE uses <b>, <i>, etc. while FF uses spans with style attributes.
Usually they will overlay the textarea with their own display component like a div. As the user types, javascript will take the content typed and apply the styles in the display area. The value of the textarea is the text with the html tags needed to render it in the specified style. So visibly the user sees the styled text.
This is a simplified explanation of course.
I believe tinymce specifically uses a table/iframe for display purposes (which is substituted in place of the existing textarea). Once you're ready to save it copies all the info back to the textarea for processing.
Related
I copy a text from a source in a platform. It is a private platform that has a box where you can type text. There is a button where you can see the HTML source code afterwards. I copied numerous texts with no problem. When I am trying to copy-paste the above, I noticed that in the HTML code a specific tag gets produced.
<p><strong><em><span lang="en-gb">Week of the 5th of September</span></em></strong></p>
So, my question is, how is that possible. Does a text after copying it generates specific tags? So, in the copying process, some things get copied apart from the text we can see... Also, this could be happening because the source text (that is about to be copied) contains characters that are not supported from the unicode set up in the platform (web application)?
I am really curious to understand what is happening.
Based on the fact you said it had a button where you can view source, this sounds like a WYSIWIG (What you see is what you get) editor like CKeditor, TinyMCE, Froala, etc. They take standard HTML textarea elements and using Javascript and CSS convert them into more robust editors. They allow you to do simple text formatting in the textarea, upload images, view source, etc.
They are used a lot in blogs and for content editing for people that don't write code but want to be able to manage and maintain content in web sites. For instance if you type a "paragraph" of text in one of these it will automatically wrap it with the appropriate <p> tags using Javascript.
In your case you're adding content in this box, and it's simply applying the formatting to it with Javascript. It will do the same if you just type in the box, vs. copy/paste.
Here are some links to WYSIWIG editors so you can learn more about how they function:
http://ckeditor.com/
https://www.tinymce.com/
https://www.froala.com/wysiwyg-editor
Fun Fact: The editor you used when you typed your question on Stack Overflow uses one of these. https://meta.stackexchange.com/questions/121981/stackoverflow-official-wmd-editor
It`s not much information, so I‘ll take a guess:
For <strong><em>: The website could eventually use a div with the contenteditable="true" attribute (more info on mdn) as the input method. When you then paste in text from another application that already has markup like bold or italic, it‘s converted to html tags.
The <span lang="en-gb"> could come from the browser, another application or the website through analyzing the text and adding this.
I was inspecting today's Google Doodle of Moog Synth, dedicated to Robert Moog,
when I came across the following piece of html code:
<w id=moogk0></w>
<s id=moogk1></s>
<w id=moogk2></w>
<s id=moogk3></s>
(You can view the source & do a Ctrl+F for , you will get it in the first search result).
I googled about s & w tags but found nothing useful except that the s tag is sometimes used to strikeout text but is now deprecated.
Obviously google will not be using deprecated tags but I guess there's a lot more behind this than plain html code. Can anybody explain me the use of this tags? & how does the browser recognise them? & if the browser does not recognise them, whats their use?
The browser doesn't recognise them.
But HTML was designed to ignore what it doesn't recognise, so these are simply not understood by the browser and get ignored. As elements without content, they will not get rendered at all either, though they will be part of the DOM.
However, these can be styled directly as elements in CSS and picked up by Javascript (getElementsByTagName and getElementById etc...).
In short, these elements provide a target for CSS and Javascript without any other impact on display.
Unknown elements are treated as block elements (like div) and can be styled accordingly and be used in scripts.
The tags you are talking about are user created XML tags.
If you need to display dynamic data in your HTML document, it will take a lot of work to edit the HTML each time
the data changes.
With XML, data can be stored in separate XML files. This way you can concentrate on using HTML/CSS for display and layout, and be sure that
changes in the underlying data will
not require any changes to the HTML.
With a few lines of JavaScript code,
you can read an external XML file and
update the data content of your web
page.
We have some code that removes "dangerous" attributes and tags from HTML. I noticed that style is among the list of "dangerous" attributes. What could be the risk from that attribute?
In IE you can include #behaviors in there which can load little Javascripts.
With CSS3 you can also interject little bits of text, which could be dangerous depending on your website.
Here's an example of a bug in MediaWiki that creates a vulnerability based on inline style attributes.
It's possible to make things that are invisible or otherwise very deceptive using style sheets. For example, you could put a giant, invisible anchor link over the whole page so that when the user clicks on something, he's taken to an identical page on a server in Russia.
There's LyX and such editors that attempt to ensure you write text that has a distinct structure. I want same behavior from a html5 contentEditable field except I don't know how.
My requirements:
No DIV -tags are created.
Text is not allowed outside a text container. (paragraphs, headings, pre -blocks and inline -elements)
I also need to figure out how to traverse the content and push it to the server in that restricted form.
(I'll also love a good documentation on things I can do for a contenteditable -field)
Here is the DOM specification for what it means for an element to be editable: http://www.w3.org/TR/html5/editing.html#editable
It sounds like just making all the existing paragraph tags and heading tags contenteditable will give you what you want, if I understand what you're asking. If you want the user to be able to insert new paragraphs and headings, the Enter key while editing will insert line breaks as <br> tags in Chrome, but if the user types in HTML tags they'll be escaped and just show up as text. As for inserting other formatted content, that's entirely up to the user agent; my tests in Chrome show that it apparently does not allow the user to insert bold/italic/etc. text.
EDIT: apparently in Chrome (and presumably by extension, Safari as well), pressing Control-I, Control-B, Control-U cause the same behavior you might expect from a rich text editor!
I also tested in Firefox and found that, unlike Chrome and not quite contrary to the spec, it does in fact insert new <p> tags instead of <br>'s, with a _moz_dirty="" attribute added on. You shouldn't need to remove this; if Firefox follows the spec, it'll never break the DOM by inserting text outside a tag that way. But, do note that users using Chrome and Firefox will produce different HTML structures, which you might want to smooth over with Javascript or server-side sanitization... I also don't have IE available on this machine to figure out how it handles newlines, unfortunately, and Microsoft's documentation doesn't specify.
As for pushing it to the server, you can do that with AJAX by pulling the text content of the elements in question (or just make the whole <div> contenteditable), building an array of their text contents, and then POSTing it to the server. This is pretty easy to do with jQuery (further help with this can be provided for this upon request).
I want the font color to change in a textarea as I type in specific keywords, like in Visual Studio.
I have not seen this anywhere, so I don't know if this is possible with HTML and JavaScript.
Has anyone seen anything like this? Or know how to write it?
Textarea is a standard HTML element and so was invented just after the dawn of time. Unfortunately this means it is limited in it's appearance and functionality.
Changing the colours of specific words is not possible as far as I know. However a way to get around this would be to have an iFrame embedded in the page. That way, you can treat the iFrame content as another web page and style it using CSS.
The Yahoo RTE, the FCKEditor and the Lightweight RTE works in this way.
Another option, which does not use an iFrame is the editor used here on Stack Overflow, known as the WMD. The files are here.
It's not possible.
Way to go is to make textarea's font, but not cursor, transparent using color:#000;-webkit-text-fill-color:transparent, then create underlying, 100% overlapping div to which content of textarea will be copied + formatted on textarea's oninput event.
You'll need to adress (or avoid) some issues coming out of syncing these two elements, like scrolling for example, but it can be done. I made my own HTML editor this way.
AFAIK, css property -webkit-text-fil-color is supported in Opera, Chrome and should be in soon-to-be-released Firefox v.48.
You would probably have to run javascript on the client to detect when the text changes, then replace the text to be highlighted with some child html elements with the proper style.
For example
Original text:
This is what the user typed.
Highlighted text
This is what the <a class="className">user</a> typed.