Im searching for a real simple WYSIWYG Editor to embed it in a RoR Application. The trouble is that it should be used by 0815 users that dont want to learn a markup language. I know most WYSIWYG editors prduce bad HTML but there is no alternative for this project.
What I need is a real basic editor that provides the possibility to use headlines, lists, images and breaks (<p>). There is no need to set the fonts, sizes,... this should be set by my css.
I already tryed tinyMCE but its a mess in this case because its overloaded with functions that I dont need. I know I can turn them off but Im searching for a slim alternative that produces clean html!
Choose your poison.
Related
I am relatively new to Rails, having recently completed Hartl's Rails Tutorial, and am now embarking on my first full fledged project. What I am interested in adding to my web app is something similar to the text input feature in SO, where you could type, and see directly how your text will turn out. After some digging around on SO, I have decided on using the gem bluecloth, which is Markdown implemented in Ruby, but now have the following questions:
I am unsure about how to tie what bluecloth outputs to the form_for helper. My understanding was that you could convert to strings via the function html = BlueCloth.new(str).to_html(), but I am unsure what to do when you have a text field as part of form_for, where I should plug in the bluecloth part? In other words, I am still a bit confused about the magic of typing in one box and seeing the item show elsewhere on the page.
Are the WMD bar button items and functions included Markdown editors (such as bluecloth), or would this be something I have to build manually? If so, how would I get something like the bold button to show "** **" in the editor as you type?
Thanks for your help!
As comments have noted, Markdown is a markup language like HTML, so its not easy to do WYSIWYG.
There are probably two approaches to getting this kind of functionality.
Server side
Post your markdown text to a server and get the server to return HTML. I've done this a lot in Python, but for Ruby this SO answer suggests maruku. The disadvantage of this approach is that it requires a server request every time you want to view the preview, and then some way to integrate that back into your UI without disrupting the user. Stackoverflow uses this approach with the WMD editor and some C# on the server.
Client side
Another option is to use a client side library to take your markdown "code" and generate html which you can then integrate into your page using javascript. An example of this is dillinger. This uses a textarea and something like showdown to render the HTML in the browser. I'm taking this approach one step further in a WYSIWYG Markdown editor I'm developing called demarcate.js
Or... ditch Markdown
The comments have already suggested alternative WYSIWYG editors... most of these are not markdown editors but rich text editors which produce HTML at the end. TinyMCE and wysihtml5 are good options and I've also used CKeditor before with some success - it has a cool "in-place" feature in the latest version which inspired my Markdown editor above.
I need to add a rich text editor to my website. This my first time doing this, so which rich text editor do you suggest I use? I need one that is fully functional and easy to integrate with a rails application, also I am using prototype.
Thanks in advance :)
A very promising one is the Aloha Editor
You can add an editor like TinyMCE as the posters above have recommended. However IMHO the HTML generated by these editors tends to get messy. I would suggest you look at something like Redcloth. With a text field. And for added bling you could give a ajaxy preview, just like stackoverflow does!. This would be a much more cleaner solution IMHO.
If you are going to use a WYSIWYG editor, take a look at CKeditor and also the Yahoo YUI2 Rich Text Editor.
As for TinyMCE there is a Rails plugin that would make things easier if you decide to use it.
I would suggest TinyMCE which is really easy to implement. You just add an id for the textarea you want to use and then use that id in the configuration of TinyMCE. You could even configure TinyMCE to put a RTE on ALL textareas.
It's written in javascript so it doesn't matter what backend you use.
http://tinymce.moxiecode.com/
And here's an example with source:
http://tinymce.moxiecode.com/tryit/full.php
Aloha looks nice and has some very nice features, but I've run into some annoying bugs. You may want to take a look at Mercury.
I just defined some forms in /lib/form/doctrine/ But the form elements currently don't have any CSS formatting.
Is there a default stylesheet that I can quickly copy/paste to style the forms, error messages, etc.?
It's not out of the box for Symfony but Blueprint CSS is a nice CSS framework, and when I used symfony 1.4, it used to color automatically the errors (I don't know if they changed the class names and stuff).
It's a bit heavy, but it ensures a solid structure if you use it for your development.
I just used Symfony's CSS from the admin. It was exactly what I was looking for - good results with minimal effort. Thanks for the suggestion cuhuak.
This stems from my question that i started at MVC Beginner Question
Im now confident in developing a MVC website from the MVC side of things.
My fatal floor now is the UI level designing. i.e. designing views and master pages including css styling.
Just wanting to get any advice on where i should start? Im currently about to look at the expression studio to see if that will help.
I need to get up and running in this quickly so that it doesnt hold back the development of the website.
Thanks in advance
I would look at a CSS grid-framework like 960 Grid System or Blueprint.
There is often controversy from CSS/Markup purists as to whether the use of such frameworks is valid, but they often overlook that not everyone is a CSS expert. I have found that the use of these frameworks has saved me hours of productivity since my CSS skills (as a programmer) are not that great.
As far as using Expression, I tend to use this as a "test-bed" with simple HTML files. The Designer and CSS Style support seem to be more interactive than that which Visual Studio supports, so for quick mock-ups -- Expression, then move that HTML/CSS over to VS as soon as possible.
One other priceless tool to use while designing is the add-on "Firebug" for Firefox ... it allows you to inspect single elements on your page, the CSS properties affecting that element - it even allows you to change CSS attributes "on-the-fly" to immediately see the ramificatiions. This tool has saved me HOURS!
Consider finding a suitable theme in a free open source template.
Consider something that suits at http://www.freecsstemplates.org/.
Is there any ready-to-go docbook editor for web applications out there?
I'm thinking of something like FCKeditor or TinyMCE that returns a docbook xml code back to the web application. I am aware that FCKeditor is customizable to do this, but I have not heard of anyone who did this.
Maybe the Xopus web based XML editor does the trick?
http://xopus.com/xopus-web-based-wysiwyg-xml-editor.html
It has support for Dita and Docbook.
I think you are looking for an online docbook IDE or an editor that automates a lot of the XML rigmarole associated with the docbook format.
You could try the oXygen editor http://www.oxygenxml.com/xml_editor/docbook_editor.html . Their trial is 30 days to see if you like it.
Hopefully that gives you some new google terms as well, but that is all I have.
(If, in addition to a good tool for what you need, you find a nice graphical validator. I would love to see something that works better for my work flow than command line jing.)
Docbook is one of the file formats supported for single-source editing in Open/ Libreoffice.
Note that there can be no such thing as a WYSIWYG editor for a presentation-neutral document representation: to be WYSIWYG, things like page dimensions and margins need to be fixed.