So I have a Rails app in which users can create entries, similar to blog posts. Both the title area and the content areas are HTML5 contenteditable divs. I don't need to be able to save anything like bold or italics, I just need to be able to save paragraph breaks and commas, exclamation points, etc. When the user opens the entry again, it needs to display the entry as they wrote it, with all the correct breaks, etc.
Are there any gems or plugins of the sort that would help me accomplish this?
It turns out, that you can't simply pass HTML from contentEditable div via form submission, so some JavaScript should be involved. Checkout similar question and link in first answer.
Related
I have a system where I want users to be able to customise an order confirmation email. The email has placeholders which are replaced with real customer data.
At the moment we tell people to use tags like {customer_name}, however this confuses some people and has a lot of room for error.
I would like to have something where the placeholder can be inserted from a menu and then acts as a unit, just like any character in a textarea.
I have thought about using tinyMCE and writing a plugin but this seems like overkill.
Does anybody have any ideas, or know of any tools I could use?
Thank you.
You can't really style items within a text area. I think the best you could do is have a menu that inserts the tags that you are already using.
Another thing you could do is add a 'preview' div below the textarea. It would live parse the users entry (or just do it when the user pushes a 'preview' button) and you could do replacements on the tags to insert an image or something that made more sense to the user than the shortcode.
I have a web admin where there is a wysiwyg editor when a user edits information.
There is also a view only template.The user views the information before clicking an edit action.
Currently the view template results in one line for the saved field value.
<p><b>Hello</b></p><p>there</p>
What options do I have to al least make the a little more readable when the user is "viewing"?
Options I can think of are:
Leave as it. Well, that can become a long line of text.
Somehow to avoid encoding of MVC3 and to add actual <br> in place of the </p> or <br> that is in the content. At least the lines will break up.
Have the content actually present as html. This is, you will see bold. What if there is an unclosed tag.
With any of the above, i may place it in a scrollable div.
(I had trouble tagging this question. Feel free to retag).
Typically when you are working with editors you are going to eventually be presenting the HTML live on the site anyway, so encoding shouldn't be a big concern as you are already trusting them.
Now, what I've done in the past is with using editors, such as ckeditor, etc, they cleanup the content which would fix the issue with your concern about unclosed tag.
so I would go with option 3 on your list.
Also ensure that any editor you support encoded data before sending to the server. Do not turn off request validation.
Use the [AllowHtml] attribute on a model property if necessary.
Also use the Anti-xss library from Microsoft - specifically the HTML sanitizer to help remove evil script and help protect against cross site scripting.
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).
Could someone clarify for me what input Flash accepts for its text fields?
I am tasked with managing a content management system, this then generates XML which power's flash sites. I have nothing to do with Flash. I work with PHP. Currently we use a rather temperamental Flash Text Editor which is prone to all sorts of troubles.
I tried to plug-in tinyMce but it broke the Flash templates. I then recently spoke to someone who said that flash should take any HTML. Now I am confused as this would point to a dodgy template.
Can someone clarify. Do Flash text fields handle all HTML or just a limited subset of HTML. If it is the latter, what happens if it comes across a tag it doesn't recognise? Does it display the tag or break?
Thanks,
Jason
see this page for a list, but be warned, some things (br, p in particular) might not function exactly the way you think. for example i had an issue where an img with a br after it did not move the next line of text down correctly, it floated it on the right of the text instead.
edit: also be aware that if you allow bold and italics tags and you're using an embedded font, then you'll need to embed the bold and italic forms too.
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.