I've been using trix editor as my WYSIWYG in my application so far.
Now that I've added best_in_place gem for inline editing i would like to know if there is a way to implement trix editor or any other WYSIWYG editor, or if I have to change the best in place gem for some alternative since i need the WYSIWYG.
Integration of WYSIWYG editor to best-in-place textarea
This should be something similar, but I can't really figure it out.
$(document).on('best_in_place:activate', function(el) {
$(element).trix-editor();
});
doesn't seem to work.
Thank you!
You should be able to do something like
$(document).on('best_in_place:activate', function(el) {
// code to initialize the editor on
// $(element).editor(); ?
});
Related
I have been looking around and cannot find a good example of implementing Chosen, http://harvesthq.github.com/chosen/, into a Rails app. I am trying to convert my existing multi-select into a chosen styled multi-select box.
I tried inserting the files manually, copying chosen.jquery.js into my assets/javascripts folder along with adding chosen.css. Also added //= require chosen-jquery to application.js along with the following code
jQuery(function($){
$('.chzn-select').chosen();
})
Also have *= require chosen in application.css.scss
I added :class => "chzn-select" in a collection_select in a form_tag.
Also tried using the 'chosen-rails' gem (here is an example http://choppingbloc.tumblr.com/post/24894460392/multiple-select-boxes-with-chosen-jquery) but had no luck.
Anything I might be overlooking? The collection_select is working, but it is not styled like Chosen. I am a beginner so if there is anything obvious I may have overlooked, please tell - everything above is what I have done.
Set it up like this
You have to include both the css file and the js file
in you application.css.scss, (because it is sass, do not use /* require)
#import "chosen";
in you application.js
//= require chosen.jquery
You should give your selects a different class or id than
$('.chzn-select').chosen();
because, it might make things messy when you debug the html. Chosen gives classes with this prefix like .chzn-done, .chzn-single, chzn-drop, chzn-search.
If you have a railscasts pro account.
look at this
token-fields-revised
You should really drop the chosen plugin and go for the select2 plugin. It is based on the chosen plugin, but is way better.
I quite like that WMD is behaving nicely with my app. However, I have one problem.
Basically I edit content and store it as markdown in my database. Then I use Kramdown to get the HTML for the views. However Kramdown gets me the HTML tags which are not read by my browser. I use Chrome.
Sanitizing it will give a plain text even when the user has entered e.g. bold, italic, code etc.
So the basic idea is to get the generated HTML read as HTML and as 'rich-text'.
Inspecting the output source, I find that if I use Kramdown::Document.new(text).to_html there are some " " quotes introduce like this: "<p> ...<em>..</em>.. </p>"
These quotes hide the really HTML code after the quotes...(I assume)
and with sanitize the quotes are gone: <p> ...<em>..</em>.. </p> but I end up with plain text.
What am I missing here? Can I make my browser see that I have bold, or i have italic, a paragraph, an image etc...
Must I use kramdown or similar markdown to HMTL converters?
Thanks a lot!
UPDATE
I use compass for my stylesheets. When compass is uninstalled WMD editor works fine and correctly. For some reasons, it seems, compass hides any styles including 'test text' in my application.html.erb file but those created with its .scss partials files! I mean for example the following code when written in my application.html.erb file does not display as bold. <strong> test bold </strong>
Any ideas why this happens?
I have figured out the solution.
The problem was that the generated compass styles includes the following code segment:
body.bp {
#include blueprint-typography(true);
#include blueprint-utilities;
#include blueprint-debug;
#include blueprint-interaction;
// Remove the scaffolding when you're ready to start doing visual design.
// Or leave it in if you're happy with how blueprint looks out-of-the-box
}
In my stylesheets I had ignored to include the .bp class. All is good now...
I really like rails_admin, but my clients don't like CKEditor. Is this really the only option for WYSIWYG on this gem? Is there any way to use tinyMCE with rails_admin?
after struggling to get CKEditor working properly in RailsAdmin (on Rails 3.1), I used tinymce:
It works well and is done in minutes:
in your gemfile add:
gem 'tinymce-rails'
plus you inlcude a line in rails_admin.js.erb:
require_asset 'tinymce-jquery'
you may need to copy the whole file (rails_admin.js.erb) from the gem to /assets/javascripts/rails_admin/
before you do this.
finally, you will also need to add some jquery to the view files
app/views/rails_admin/main/edit.html.haml and app/views/rails_admin/main/new.html.haml
:javascript
jQuery(function() {
jQuery('textarea').tinymce({
theme: 'advanced'
});
});
This will add the Wysiwyg to all text area fields.
WYSIWYG editors typically just overlay an HTML text area element with JavaScript functionality. So any editor should work in theory. You could replace the references in the code to tinyMCE, make sure you have all the files properly installed and then set tinyMCE to use the ID of the text area control.
It should not make a difference to the back-end programming which client side interface is used to create HTML in the text area.
Great andistuder,
I propose a modified version of your solution.
Copy the rails_admin.js.erb from the gem to the /assets/javascripts/rails_admin/ in your project path.
Add the following line:
...
require_asset 'tinymce-jquery'
%>
jQuery(function() {
jQuery('textarea').tinymce({
theme: 'advanced'
});
});
And all will works like a charm!
I achieved this in a slightly different way, which worked for:
rails_admin (0.8.1)
tinymce-rails (4.4.1)
Implementation:
Gemfile
gem 'tinymce-rails'
app/assets/javascripts/rails_admin/custom/ui.js
//= require tinymce-jquery
var admin = {
initTinyMce: function() { tinyMCE.init({ selector: "textarea[name$='_html]'" }) }
}
$(function() {
admin.initTinyMce();
$(document).on('rails_admin.dom_ready', function() {
admin.initTinyMce();
});
});
Explanation
https://github.com/sferik/rails_admin/wiki/Theming-and-customization
Suggests the ui.js location
Suggests to use rails_admin.dom_ready
https://github.com/spohlenz/tinymce-rails
//= require tinymce-jquery: no ruby interpolation required and I like using manifest files
Custom:
I needed to run the initialization twice, all seems good so far
The selector textarea[name$='_html]' will convert all text areas where the field ends in _html, that's what I store, that's how I name my fields
Has the mark down editor been ported to a rails app? (the same one used on this SO)
What about parsing the markdown markup?
Most WYSIWYG editors should be pretty easy to integrate into your app without the need for Rails-specific gems/plugins. Here's an editor that supports Markdown:
http://livepipe.net/control/textarea
You could also try WYSIHAT if you don't mind putting a little work into customizing your editor:
https://github.com/37signals/wysihat
http://www.80beans.com/blog/development/2009/10/01/introducing-wysihat-engine/
For just parsing the markdown markup, you can try RedCarpet gem.
Also according to this configuration example, just need to add a helper in ./app/helper/application_helper.rb like:
def markdown(text)
render_options = {
# add options here
renderer = Redcarpet::Render::HTML.new(render_options)
extensions = {
# add extensions here
}
Redcarpet::Markdown.new(renderer, extensions).render(text).html_safe
end
Then render any text with:
<%= markdown YOURTEXT %>
Does anyone know of a good lightbox plugin for rails? I found redbox but it seems to be out of development.
Thanks!
-Elliot
I just use the regular Lightbox 2. Include all the appropriate javascript and stylesheets then :rel => "lightbox" on your links.
Here is example how to easily use lightbox in rails (v4 in my case):
1. Download from site: http://lokeshdhakar.com/projects/lightbox2/
2. Copy lightbox.js to app/assets/javascripts
3. Copy lightbox.css to app/assets/stylesheets
4. Rename lightbox.css to lightbox.css.scss.erb
5. Copy four img's to app/assets/images
6. Edit lightbox.css.scss.erb:
- All image paths replace with:
<%=image_path "close.png"%>
with proper image name.
Add a data-lightbox attribute to any image link to activate Lightbox. For the value of the attribute, use a unique name for each image. For example:
Image #1
Thats all.
Is there anything wrong with the jQuery version?
Jquery on Rails
http://railstips.org/2008/11/20/jquery-on-rails-why-bother
You can try lightbox2, don't know if there is any rails plugin to use it, but writing some helper functions shouldn't be that difficult.
You can use http://github.com/Lipsiasoft/lightbox
I would recommend rlightbox. It is a jquery UI plugin. It can be used for photos and videos and the documentation is pretty good
I wrote my own Rails wrapper to use Lightbox inside your existing Rails application.
Github: https://github.com/vernondegoede/lightbox-rails