levik
2004-01-19 11:04:59 |
Rich edit control
So after getting a number of formatting-related requests, I decided it was time to simplify the process of posting rich-text comments/problems/solutions/forum posts. To that end, I have done some research on the topic, and found this:
http://www.kevinroth.com/rte/demo.htm
Let me know if this souped up text area works in your browser, and what you think about me making it a standard on the site. |
Charlie
2004-01-19 11:30:05 |
Re: Rich edit control
Within the text box the words are double (at least) spaced. The <pre> values get converted to the < symbology. The formatting looks good. |
SilverKnight
2004-01-19 11:34:54 |
Re: Rich edit control
suuuwwwweeeeetttt ! |
levik
2004-01-19 15:23:29 |
Re: Rich edit control
Charlie - not sure what you mean. Are you listing the problems with the control?
SK - sorry, but the insert image function will be disabled before this is implemented :) |
DJ
2004-01-19 18:57:53 |
Re: Rich edit control
I think it looks pretty good. The font style, font, and size boxes could be replaced with just a button (like the buttons for bold or italics) to use a fixed-width font, and text highlighting could probably be removed (to preserve the current format of the site). Also, the box automatically replaces repeated spaces with the character, which is nice. The 'view source' button is a must. Buttons for subscript and superscript would be very useful as well. |
DJ
2004-01-19 19:00:05 |
Re: Rich edit control
To charlie: hitting return inserts a paragraph (<p>). To get a single line break (<br>), use shift-return. If you want to use <pre> tags (or any other HTML) you need to click the 'view source' button at the bottom to see the underlying code. |
Charlie
2004-01-19 20:22:42 |
Re: Rich edit control
Thanks DJ. I see now that the "view source" also allows editing source, and the shift-return works as well, just as you say. |
levik
2004-01-20 00:53:37 |
Re: Rich edit control
Hmmm... I was actually thinking of doing away with the view source. At least that way I could be sure that whatever's posted has all the tags closed.
Assuming pre and tt functionality is provided via the GUI what would you need to edit source for? |
DJ
2004-01-20 10:27:40 |
Re: Rich edit control
While the GUI is nice, it doesn't do everything. One of the biggest shortcomings in not being able to edit the source directly is with the special characters (see my testing thread), which I use quite often -- the existing buttons for the HTML codes are rather lacking, and very limited in selection.
Also, having to enter every comment using the GUI would be extremely annoying. First, I don't ever enter a comment directly into the box on the site, I type it up first in notepad (for many problems, the ability to search/replace text is invaluable) and paste it in. If that were pasted into the GUI, I might as well have not done anything.
If you're worried about closed tags, the script for the text-edit box automatically closes any tags that are left open anyway (if you type in "<i>hello", it will output "<i>hello</i>"). |
Brian Smith
2004-01-20 12:28:48 |
Re: Rich edit control
The text editor is rather nice. I like it. Much better than parsing my writeups and inserting all the line breaks, < and > codes, etc. |
Brian Smith
2004-01-20 12:32:43 |
Re: Rich edit control
I found an inconsistancy between flooble and the editor. The editor uses EM (embellishment) tags for italics, but flooble requires I tags for italics. |
levik
2004-01-20 16:02:53 |
Re: Rich edit control
Flooble requires nothing - unfortunately the whole set of functions for these things are REALLY old and must be replaced. All it does is filter out most tags except for the allowed ones. I imagine I will still have to worry about somebody slipping in a rouge IMG ont he sly, but the rich textarea looks to be a good solution on the side of allowing users to do more.
DJ, if you are right about the auto closing of tags, that might work.
I'm planning to devote some serious time to perplexus over the next few weeks, so hopefully I'll be able to get this done. (No small task mind you. Text areas are used in many different places, and their functionality is always slightly different.) |
DJ
2004-01-21 12:02:18 |
Re: Rich edit control
The reason I'm familiar with the one you suggested is that the same basic control is used on xanga.com, where I have a weblog. Other nice features that are that the key commands ctrl-i, -b, and -u work for formatting as they normally would within a word processor.
I prefer to just type in the HTML tags; I imagine most people will prefer the GUI. As far as rogue tags, as you put it, I'm sure you could change the existing filtering method to get rid of any <img> or <embed> or other potentially abusive tags, rather than delimiting the tags that you specifically want to allow. There are very good preexisting codes to do this on the PHP website, and since PHP is server-side, you can run all those checks after the control form is submitted. To me, that seems like the best way to allow full use of the test-edit box and still prevent abuse. |
levik
2004-01-23 13:31:19 |
Re: Rich edit control
Just so you guys don't think I've been slacking off at this, check out the work in progress... I substituted the color picker for symbol selector, and got rid of a bunch of things we'd never use. In the process, I managed to break keyboard handling, so I'll have to go back and see what it was that I did wrong. |
Sam
2004-01-23 13:48:56 |
Re: Rich edit control
Wow, that looks very good!
Glad to see that you still love us after all this time... ;) |
Greg
2004-01-29 01:39:45 |
Re: Rich edit control
Thanks for the hard work Levik. Another one of these FREE rich edit controlers for text area can be found at
http://www.interactivetools.com/products/htmlarea/
I've never used it specifically, but their other products are wonderful. Just wanted to give you a choice in case one was harder to implement/modify than the other. |
levik
2004-01-31 12:15:13 |
Re: Rich edit control
I think I spotted that one while I was looking for a suitable candidate. However I didn't want to use it since it was IE only...
In any case, I made some more tweaks to the one I likned before - you can now see the result of a submission. I would appreciate it if you guys could test it out with some of your more interesting comments to see if it works well or not.
Let me know if you run into any weirdness. If not, hopefully I will start putting it into the site around next weekend. |
Charlie
2004-01-31 23:06:47 |
Re: Rich edit control
In the posted comment, the strong and em tags show up with their surrounding angle brackets instead of producing bold and italic. The already-set-up bold shows as bold and the bulleted list shows up fine, rather than with unorderd list tags. So it comes out partly as if it were showing source (just for the newly entered bold and italic). |
levik
2004-02-01 18:05:46 |
Re: Rich edit control
Hmm... On my mozilla it uses SPAN for all the styling, so I didn't bother "allowing" STRONG and EM.
I'm going to enable them now, let me know if the results come out any better. |
levik
2004-02-01 18:15:59 |
Re: Rich edit control
In the spirit of disclosure, there is a list of allowable tags, some of them must be closed, some don't need to be. For every tag that must be closed (such as PRE) the validator will keep count of the open and closed tags in the submitted text. If at the end they don't match up, a required number of closing tags will be appended.
Here are the allowed tags as of now (Must close tags with a "*"):
A*
B*
BR
I*
TT*
P
PRE*
LI
UL*
OL*
SPAN*
STRONG*
EM*
DIV* (just realized that DIV is used for indentation) |
Charlie
2004-02-01 19:43:58 |
Re: Rich edit control
It looks good for the bold and italic, except that clicking on a button such as that (to precede typing bold/italic -- or non-bold after bold/italic) most of the time removes the focus from the text box, rather than allow continuation of the typing in the new face. When swiping previously typed text this isn't too important, but if one is going along typing, and wants to prepare for bold by clicking the button, having the focus lost from the text box is disconcerting.
(By the way, the title bar says Rich Tect Edit Demo rather than Rich Text Edit Demo.) |
DJ
2004-02-02 10:48:01 |
Re: Rich edit control
You could also include <sup> and <sub>. Also, while <ol> is allowed, you removed that button from the toolbar.. |
levik
2004-02-02 23:49:48 |
Re: Rich edit control
Charlie - I changed the behavior to "focus-back" on the edit area after one of the buttons is pressed - hopefully it will work, let me know if there are other "behavioral" issues.
DJ - good catch on the ***script tags. Will go add them now. About the OL, I didn't think it needed a button. UL is by far the more used, and anyone needing OL will probably know what they're doing enough to go and add one manually. Like you :) |