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.
Related
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.
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'm looking to use markdown in my website, and I'd like the editor (or something similar to) the one used here at Stackoverflow. As far as I can see, I can get this from the google code site.
What I want to know is, how do I then use this in my site? I see perl files etc included with this.
Anyone done this before, or have links to good documentation (the site of the original WMD appears to have disappeared).
Here is StackOverflows fork/branch:
https://blog.stackoverflow.com/2008/12/reverse-engineering-the-wmd-editor/
https://meta.stackexchange.com/questions/4168/can-i-use-stack-overflows-reengineered-wmd-editor
I inherited the management of a Symfony site and need to add some HTMl form tags to one of the "static" pages via the CMS. The scenario I have is:
/index.php/splash/welcome pulls up the welcome screen.
We want to be able to add a subscription button on that page.
The HTML has been supplied for us by the company that handles the subscriptions.
The form post method has an action that references a script on a remote site (no lectures on the security implications please ;-).
When I add the <form... and <input... tags via the CMS admin panel, the tags get removed automatically by Symfony.
Is there a way to tell Symfony to allow these tags?
Thanks in advance,
Marty.
This is goign to depend completely on how the developer set up the CMS. Youre using a rich text editor in source mode i would take a look at that editor's config file and documentation because its probably the one responsible for stripping the tags.
If its just a plain text area i would check the submit action for the edit form and take a look at the code... he may be using something to strip them in there.
If youre using one of the Symfony CMS plugins (Diem, Apostrophe, Sympal) i might be able to help further if i know which one youre using. If its something custom we would need to see the code. This isnt really indiciative of the Symfony core, but rather the CMS youre using.
Can someone point me in a direction so that I can use embed code in Rails? Sometimes I need to embed a slideshow pro file and sometimes I need to embed a youtube file and sometimes a vimeo file in the same area for different entries, it would be easiest to use embed code but it keeps stripping the embed code.
Do use a santize plugin? Can someone point me to a tutorial or give me some help to get me started?
thx
Ok, so the plugin was not the answer to my question --
I wanted to simply add embed code to my rails application -- basically in the same area of my site -- sometimes I wanted to add youtube, sometimes, vimeo and sometimes something coming out of slideshow pro director -- a .swf that is fed by an XML feed.
So after a ton of research on this site and many others -- I found there was a simple solution.
escaping html in RAILS.
xss_terminate
http://www.railslodge.com/plugins/910-xss-terminate
xss_terminate is a plugin in that makes stripping and sanitizing HTML stupid-simple. Install and forget. And forget about forgetting to h() your output, because you won't need to anymore.
But xss_terminate is also flexible. By default, it will strip all HTML tags from user input. This is usually what you want, but sometimes you need users to be able to enter HTML. The plugin allows you remove bad HTML with your choice of two whitelist-based sanitizers, or to skip HTML sanitization entirely on a per-field basis.
This plugin did it like a charm -- just remember to remove the h from
<%=h #article.body %> to <%= #article.body %>
Here's a sample rails app with vimeo integration. It looks like it makes use of this great vimeo plugin. From the README:
This gem implements a full-featured
Ruby interface for the Vimeo API v2.
Sounds like it might be just the ticket!
I normally just create a body area_input with RedCloth, this allows for simply drop embedment code inas well as text image etc.