Does anyone know of any plugins in any forum system that allow a much fuller rich text editing feature? I want users to write articles with images, headlines, etc. I want it to look like a web magazine article and not just a normal forum post. Then I want it to be styled to look like a Word document. I don't care about how much markup it will take to get it done. No point in worrying about performance if people aren't using your forum.
None that I know of ... not even "blog" software offers that AFAIK ... you have to write it offline in your full function editor software and export it as html. Maybe some adobe online stuff will do it, but don't know that it exists as a plugin per se
If you have no problems with HTML be the output, I feel there are several that allow quite a good result, of course it all depends on what you expect...
Actually..that particular need - to write texts that have certain elements like headlines, fillers etc. - is what drove me to create the boardtype feature in Protendo. I haven't come across a pure editor that do these things, but even if it was one, it would be harder to maintain a structure within that, than to create the fields yourself inside the forum script - where you can make sure everyone follow the same template(or even create new templates on the spot). IMHO anyway.
why using a forum and not a cms? Joomla or WP can do that
If you were referring to me, radu81, those beasts do not behave like I want to, and they are nothing like SMF.(which I want to keep). :D
And besides, why not a forum? Its the BEST place for community interacting, and all a CMS does is provide a content structure - which a forum + extra code can also do.
I don't think "simple text" is what differentiates forums from blogs or CMS. I think rich text would be a way to differentiate forums from Facebook though.
Some BBC that are missing that I think would help most forums:
- headlines. Using h1-h6. I don't think it adds much in terms of performance but would add a lot for SEO and usability. Maybe call it h with a level attribute. So - [h level=1 instead of [h1
- when we have headings, we can have a table of contents. Simple toc tag would insert a list of headline tags. You could style it right or left (it would float). You could select the list style.
- highlighting. Using bg or [highlight]. This would be useful for quotes where you don't want to embolden something but you still want to make it stand out.
- table options: border, width, spacing, etc. More for layout than tabular data but borders make it better for tabular data.
- float. Same as the CSS property. Simple parsed_equals: left|right|none.
I am thinking of way to redesign the text editor so it is styled differently. This is, of course, a big operation which would involve work on SCEditor.
First off, I think where the editor shows up is very important. If we're talking about rich text editing and allowing the user to control more of the design of their post, where the post is being shown matters. The quick reply should look like the quick edit does (except with all of the features of the reply box). The regular post screen should do the same thing. Your signature would appear at the bottom, your user info would appear to the left. It would be constrained by the size of the display. The subject and time would appear above. Make it look like you're editing a post that was already made.
I have been using forums for 15+ years. It took me a little brain power to figure out which of the two icons I figured were font size were for font size. I still have no idea what the parameter is to change the list style. When I want to, I just use itemcodes. Most people don't even know that they can change the list style. The pre BBC looks like it should be a justify BBC. Especially in its position. My point is that they are confusing.
Mixing ideas from Word and Google, I think we should use ribbons/tabs and some of the features of Word but the styling simplicity of Gmail. Gmail uses icons for their tabs and Word uses icons. I think the icons are a little confusing at first so I would say stay away from them. I think what we have is cluttered and I like the simplicity of the Gmail tabs. Put things behind drop downs.
I know the tabs add another click for a lot of common operations but when we make the BBC buttons "prettier" and add more of them, it will quickly make the entire post screen ugly. That one click is going to be better than using brain power to search. We could, if it proves annoying, add a "common" or "favorites" tab. The common would be something we deemed to be commonly used. The favorites would be something that the user chooses.
In terms of general styling, I think the buttons should be flattened and given a little more space with a light vertical border (see screenshots).
Tab: "formatting"
I am not normally a fan of cut/copy/paste buttons on a text editor. Nobody uses them on desktop. Then I realized that I would use them on mobile. I would love to add a select button there as well so I didn't have to long press anything.
Put the left/right/center (add justify) under one "align" button like in Gmail and change the icon based on what it is currently set to. Like any button like this, just set it to whatever the last one used was when in "source" mode.
Change the font style and size so that you can actually see the name of the font instead of the icon. Same thing for the size and color.
The table button should be a modal that lets you draw the table and select options. I bet 99% of the people that use forums don't know about any of the table options. I bet 99% of the people that use tables don't know that there are table headers.
Tab: "insert"
This is all of those things that aren't normal text. Attachments, pictures, spoilers, links, code, quote, etc. Add in "message" and "user" links.
Tab: "emoticons" (nobody uses smileys anymore)
The standard web word is emoticon. Put the smileys in there. You can even add tabs under this like in Gmail.
Tab: "options"
This is where you'd have a bunch of checkboxes for this post. Anything that's not a checkbox would be opened in a modal to get more info.
/me has to read this when is not so tired. xD
@Joshua Dickerson lots of great ideas there !
The main differences to gmail seem to be that all of the text formatting options are under one ribbon that you can hide, where as ours are always shown and I think they are all on the top line. Once thats done you could add more buttons with less fear of cluttering up the editor screen (more).
The smiles (emoti) are always shown, pretty easy to use the existing popup code, place all the smiles in there and change the More box to a smiley.
We also have some forum specific buttons that you don't always see elsewhere, not sure what to do with those.
The icon backgrounds should be all css, so flatting it should not be much of an issue, probably just dropping the box shadow would do a lot.
Anyway lots of good ideas, some things should be easy to implement, others may require some serious editor tweaking.
I like having popular smileys or emoticons always shown. Can't people who want them all hidden just set them all to be displayed in the more box?
Yup ... I was just thinking that if you did that perhaps instead of "more" it should show a smiley button instead.
I agree that makes sense.
I am going to keep adding ideas.
After you use the "insert" ribbon to insert a table or list, another ribbon would appear and it would go to that ribbon for "table" and "list".
Table would have insert row/column above/below/left/right. Delete row/column. Merge cells. Then options: border color/width, width. Maybe a style attribute or separate attributes for striped and other styles you can extend. I think a table header should be a separate tag: thead. Same as tfoot.
The list would show the list style, allow you to increase/decrease indent the list (nesting the list) and start num for ordered lists.
This is personal opinion, but I know few people who like the ribbon interface. Buttons and menus changing on you all the time is quite annoying. In MS products I always find myself having to click back and forth to find the right ribbon which is much more annoying than the old fixed menu system. Maybe I'm in the minority so I'll ask. Does the user base really want to see a ribbon interface on the editor? There's not that many buttons anyway. Why hide a lot of them most of the time?
AFAIK the ribbon interface is one of the most hated UI around. LOL
Though it's used (even only because it's the only one available, and MS is pushing it anywhere).
I did convert the old SMF editor to a "tabbed" version:
http://custom.simplemachines.org/mods/index.php?mod=2782
the images are of the "stable" version, while in the development one I moved everything to it's own tab (that is not different from ribbons TBH, just a different name and maybe better organization), I may have posted some image in the support topic, I don't remember... :-\
I kind of like both ways. With ribbons we have to be sure
not to annoy users with them! I think I would like to test an editor with ribbons for tasks. There could be one ribbon for all text formation, another one for smileys, a third one for all media stuff and maybe a fourth for working with tables and so. The first ribbon with the text formatting icons should be active by default.
Yes, the editor should always show what is needed often. I don't like the idea to have to switch between the ribbons all the time when I want to write a post.
Can an intelligent editor be programmed?
The problem with that is nobody uses the same things at the same frequency.
For example I think I click on one of the buttons of the editor once in a... month? And usually just to see what it gives, if it the same I type myself.
Please provide an accurate definition of "intelligent". LOL (Sorry, I couldn't help it :P)
Can the editor show only the formatting possibilities that make sense? And the other ones make invisible, or visible but not clickable (perhaps light grey in color so a difference is visible)?
Example: When a part of a text is marked, we can format it or insert a link. We can't insert an image then (this would erase the marked text), so this icon should not be clickable.
This kind of intelligence... ;)
Edit: Can we have an "undo" and "redo" button in the editor? O:-)
It could. I'm not sure that the editor knows what tags are open at each position though. In other words, I'm not sure if it has a tag stack. If it did, that would be pretty easy to implement and would be an awesome feature.
As for ribbons: they are just what Microsoft wanted to call tabs. Look at the Gmail screenshot. You are using tabs and finding the icons. That's the same thing you do in Word. Maybe I should call them tabs so we remove the connotation.
Should be able to add the undo / redo, I think there is a plugin for that ... I need to update the editor to the latest for the beta anyway.
Not a general fan of ribbons or tabs or the need to fit everything in the world under one hamburger button that is all the rage these days. If the info fits easily on screen at once put it there so you don't have to guess or enforce how people use things.
To me the special annoyance of ribbons over tabs is the "intelligence" being discussed. They try to guess what I'm doing and activate that ribbon. So I select the ribbon I want say planning to do the same thing lots of times. In the middle I go do something quick and unrelated to that ribbon like resize an image which annoyingly selects a different ribbon even though I never use anything from the new ribbon. I then go back to what I'm mostly doing but the previously selected ribbon and the the button I want is now gone. Then I have to go find the right ribbon again.
I recall Microsoft once admitting the dumbest UI thing they ever did was the "smart menus" which would hide things you didn't use often with a "show me everything" option or something like that. I thought the admission was a good sign until shortly thereafter they did that on steroids with the even worse ribbon interface. At least the "smart menus" could be turned off.
Undo/redo would be great though.
I made a PR to the 1.1 branch which updated the editor to the "latest" version (1.4.7+)
Also added the undo and redo buttons to the toolbar (as well as ctrl z and ctrl y events, so now those should work mo-better).