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.
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 want a text input to select the given options in my rails form.
f.collection_select(:user_id, User.all, :id, :name)
is the closest to what I want, but there are too many users to show as a dropdown.
I've tried rails-jquery-autocomplete, and I've written ajax to insert search results to the view before, but it all seems too much and verbose in 2019 just to convert a select box to a text input.
If there is a best practice for filtering the given object collection in a rails form, I would like to know. Thank you.
I guess chosen js library might be a good option to consider and there is also a rails wrapper gem available for this (https://github.com/tsechingho/chosen-rails)
Include the gem in your gemfile and run bundle install
gem 'chosen-rails'
Include the following to application.js
//= require chosen-jquery
Include the following to application.scss
*= require chosen
Example usage:
Once the setup is complete you can use it as follows
<%= select_tag :users, options_for_select(User.all),class:"form-
control",multiple:true id:chosen-select" %>
And initialise it in java script as follows
$('#chosen-select').chosen();
You can refer to various options library provides in their official page (https://harvesthq.github.io/chosen/) and customise it to your use case.
I use Rails 4 and bootstrap-select-rails gem.
When I download page with my form, I got this
When I refresh page, I got this
If I turn off turbolinks, design is ok, but site is very slow.
How to display the correct design at first download without disabling turbolinks?
UPD:
at application.js:
//= require bootstrap-select
at application.scss:
#import "bootstrap-select";
at view:
=select_tag "document_id",
options_from_collection_for_select(#documents,'id', 'name'),
class: "selectpicker",
"data-live-search".to_sym => "true"
I added data-no-turbolink attribute to link
New
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
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)