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
Related
I am really wanting to know how to integrate jqTree as a webpacker webpack in my Rails 6 application
UPDATE:-
Using yarn add jqtree seems to have magically cleared up most of my issues however I am currently facing tree is not a function error
I am using the Ancestry gem to organise menu items and I need a drag and drop javascript tree view solution that will work nicely with the Ancestry gem. I have picked on jqTree as my desired solutions but I am happy to be persuaded to use an alternative as there seem to be a lot around but initially I would just like to be able to at least get a tree view working within Rails 6
Presumably I have to start by setting up jQuery, for which there are plenty of resources on how to do this so I guess this is more about how to get any jQuery component up and running in a Rails 6 app
I guess I'll have to start with a jsx file and import some stuff and import some css into application.scss but just what this should look like I really am unsure of
So far I have setup jQuery according to the instructions here https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker
I can confirm with a simple alert that this is all hooked up and working
I have made some more progress
Instead of downloading the jqTree files, I have used yarn to install jqTree
replacing
I have downloaded the jqTree files and unpacked them to folder called jqTree inside my javascript/packs folder
with
yarn add jqtree
and now I have sorted out the require which is as it should be without the ;
So
require ;'jqTree/tree.jquery.js'
becomes
require('jqtree')
also in my javascript/packs folder I have created a sortable.js file which did contain the following
require ;'jqTree/tree.jquery.js'
jQuery(window).on('load', function () {
alert("Done"); //This works!
});
$(function() {
$('#tree1').tree({
data: data,
autoOpen: true,
dragAndDrop: true
});
})
the ; in the require statement confuses me a lot but the console error was demanding it
This now looks like this
require("jqtree");
$(function() {
alert($('#tree1').data('items'));
});
$('#tree1').tree({
data: $('#tree1').data('items'),
autoOpen: true,
dragAndDrop: true
});
With the above code I get an reference error: data is not defined
In a view I have the following code
<%=javascript_pack_tag("sortable")%>
<%= content_tag "div", id: "tree1", data: {items: #menu_items} do %>
Loading items...
<% end %>
The issue I have now is that my browser is reporting an error that tree is not a function.
In my application.css.scss I have
*= require "jqtree.css"
Which doesn't work
I have a detailed answer for this that has taken me quite sometime to put together, I will update this answer with that detail over the coming days but it starts with getting everything hooked up properly with jQuery, jQuery-ui and the componment itself which in this case is jqTree
Yarn is definitely the answer
Starting with the command line to add the relevant packages
yarn add jquery
yarn add jquery-ui
yarn add jqtree
Once the relevant yarn packages are installed I needed to make jQuery and jQuery-ui available for reasons that I am yet to fully comprehend, a simple require is not enough
Following this post https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker
I setup my environment.js file in the config/webpacker folder to look like this
const { environment } = require('#rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
);
const aliasConfig = {
'jquery': 'jquery-ui-dist/external/jquery/jquery.js',
'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
};
environment.config.set('resolve.alias', aliasConfig);
module.exports = environment
After restarting my server I created a simple js file called test.js in the app/javascript/packs folder which as far as I can tell is where all javascript now resides although there is still the possibility of using sprockets by putting javascript in the assets/javascript folder, I have been advised, with no explanation as to why, that it is not a good idea to mix webpacker with sprockets for serving javascript.
Webpacker does has the ability to serve stylesheets as well, however I still prefer my stylesheets to be served by sprockets in the app/assets folder and using stylesheet link tags as traditionally done in Rails apps as testing proved to be more efficient this way so mixing sprockets with webpacker in this way doesn't seem to be an issue.
I just chucked a simple alert message into the test.js file just to check that webpacker and jQuery was all hooked up properly.
So test.js looks like this
require("jquery-ui");
require("jqtree");
$(function() {
alert($('#tree1').data('items'));
});
Then to use the javascript I just included a javascript pack tag in the view I wanted to use it in like so.
in a random edit.html.erb view
<h1>Editing Menu Item</h1>
<%= render 'form', menu_item: #menu_item %>
<%= link_to 'Show', [:admin, #menu_item] %> |
<%= link_to 'Back', admin_menu_items_path %>
<%=javascript_pack_tag("test")%>
No need for paths or extensions to the file name, it just works!
I find this approach to be really neat for two reasons
1) I am not unnecessarily bloating out web pages by including page specific javascript in every single page by including it in the application.js file which gets included by default in the layout and therefore in every page.
2) I don't seem to have to worry about DOM loaded events and so far no issues with turbolinks interfering with it, although I suspect that may be more by luck than judgement and I may have to revise that thought in the future and make use of 'data-turbolinks-track': 'reload' option, but so far so good and this has not been necessary.
So now that all is hooked up and working it was time to make the jqTree component work with ancestry gem to be able to structure and organise the menu items for the site,
But up to this point it has been a simple matter of using yarn top install components and hooking up jQuery properly. I didn't use yarn initially and that led me to all sorts of problems resulting in my original question.
The rest is to follow...
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(); ?
});
I am using active admin gem in my Rails application.In that, I have a resources article and user and I need to use TinyMCE-rails in the article.
It is possible to add if possible how?
There are a number of WYSISWG editor plugins for ActiveAdmin. The TinyMCE plugin has not been updated for a while so I don't know its status. A couple of the others are more current.
I realize this is a bit late but in hopes that this may help someone else in the future - TinyMCE is active and the tinymce-rails gem is actively maintained (latest release as of writing is just under 2 months old). Getting this to work in ActiveAdmin is not too hard, the github page and TinyMCE and ActiveAdmin for Rails post tell you most of what you need but here is what I did:
add the tinymce-rails gem - bundle install
add TinyMCE assets by adding //= require tinymce to application.js
register tinymce.js in active_admin.js and initialize it by adding the following to your active_admin.js file (this was the missing key for me):
...
//= require tinymce
...
// initialize tinymce
$(document).ready(function() {
tinyMCE.init({
selector: 'textarea.editor',
browsser_spellcheck: true,
menubar: 'edit view insert format tools table help',
plugins: 'code image link lists media preview table'
});
});
To use it in a form:
...
f.input :description, input_html: {rows: 4, class: 'editor'}
...
Hope this helps someone down the road.
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 did bundle and generate install and now I have the jquery's files instead of prototype
I can see from mozilla firebug that the jquery's files are included, however I can't use jQuery or $ functions, the app/mozilla console don't know them.
Any suggestions how to fix this?
I'm using jquery-rails 1.0.12 and rails 3.0.8
It would be great if you could give more details but here are some things you can try:
Make sure that when you view the page source you can see the jQuery files are included. I usually have <%= javascript_include_tag :defaults %> between the HEAD tags
You can test if everything is working by adding the following code:
$(document).ready(function() {
alert('hello world');
});
Hope this helps
Make sure the line below is commented out (in application.rb) and that you have restarted your server.
config.action_view.javascript_expansions[:defaults] = %w(jquery rails)