I am trying to run ckeditor in a rails app . I see the textarea field but don't see any toolbars . I installed it as follows
Gemfile
gem 'ckeditor'
gem 'paperclip'
routes.rb
mount Ckeditor::Engine => '/ckeditor'
Field on _form
<div class="field">
<%= f.label :description, :ckeditor %><br>
<%= f.cktext_area :description %>
In the head of application.html.rb, I have
<%= javascript_include_tag :ckeditor %>
application.js is
//
//= require jquery
//= require jquery_ujs
//= require ckeditor/override
//= require ckeditor/init
//= require_tree .
I removed turbolinks from the project. I did stop and restart the server.
When I looked at the download from https://github.com/galetahub/ckeditor it looks like I should have folders such as app\assets app\controllers etc. I don't see these in my project. I thought that the gem install would handle everything. I'm not sure if that is the problem or not.
Source at the ckeditor field
<div class="field">
<label for="help_request_description">ckeditor</label><br>
<textarea name="help_request[description]" id="help_request_description">
</textarea><script>
//<![CDATA[
(function() { if (typeof CKEDITOR != 'undefined') { if (CKEDITOR.instances['help_request_description'] == undefined) { CKEDITOR.replace('help_request_description'); } } else { setTimeout(arguments.callee, 50); } })();
//]]>
</script>
</div>
<div class="field">
<!-- < %= f.label :description, :ckeditor %><br> -->
< %= f.cktext_area :description,:toolbar=>'Full', :width=>'700px', :height=>'600px' %>
</div>
<div class="field">
NOTE - the code fragment in the image is because I deliberately disable that code injection with a space for testing. Taking it out will not show the toolbar.
I am almost positive that the ckeditor issue began when I updated Ruby to 2.1.7 from 1.9.x . At the same time, I had issues with my horizontal menu dropdowns not working.
I had to change the line in application.html.erb that referenced turbolinks from 'application' to 'defaults'. That would fix the crash and error message but apparently was causing other issues.
I uninstalled Ruby 2.17 and reinstalled Ruby 2.0. I reinstalled turbolinks and set everything back to the default settings (for turbolinks) That seems to have resolved the menu dropdown and this issue of the ckeditor toolbars.
Related
I have upgraded my rails app from 3.2.2 to 5.1.4. I updated tinymce version to 4.7.9. But on every page i am getting this error on console and tinymce is not working there.
Error on console:
Uncaught Error: Could not find control by type: button
Gemfile
gem 'jquery-rails'
application.js
//= require tinymce-jquery
instruction/_form
<%= tinymce_assets %>
<p>
<%= f.label :mt_inst %><br />
<%= f.text_area :mt_inst, :class => "tinymce", :rows => 40, :cols => 120 %>
</p>
<%= tinymce %>
I checked this is giving error to Rails 5 app as well so you must download this tinymce-jquery from
https://cloud.tinymce.com/stable/tinymce.min.js
Then manually put it under app/assets/javascripts/ folder and require it with the filename in application.js
Me and my co-workers were testing my web app. And, in the form in my computer/local/dev and server/production it shows the date format dd/mm/yyyy 00:00 and for my coworkers mm/dd/yyyy 00:00 am/pm with the same local chrome settings and computer settings.
why is this?
and how can I change this for all users? if possible.
piece of code:
<div class="mini_jumbotron">
<div class="mini_text">Inicio<%= image_tag("calendar.png", :class => "calendar")%>
</div> <br>
</div>
<%= f.datetime_field :Inicio %>
Try below code:
<%= f.date_field :Inicio, as: :date, value: f.object.try(:strftime,"%d/%m/%Y"), class: 'form-control' %>
You can also use this gem: https://github.com/Nerian/bootstrap-datepicker-rails
on your gemfile.rb
gem 'bootstrap-datepicker-rails'
then bundle install and restart rails server
then add this line to app/assets/stylesheets/application.css
*= require bootstrap-datepicker
and add this line to app/assets/javascripts/application.js
//= require bootstrap-datepicker
and to use this in your form:
<%= f.date_field :Inicio, :id => "datepicker" %>
and add this javascript on the same view of your form
<script>
$('#datepicker').datepicker({format: 'dd/mm/yyyy HH:MM:ss'});
</script>
I have a Ruby on Rails project that uses the material-saas gem. I recently noticed that text field animations have stopped working. More specifically, when a text field is active, the label does not move up on the page and whatever the user types in the input field writes over the label text and looks awful. Here (https://github.com/Dogfalo/materialize/issues/682) is an example of the style issue I'm encountering. In addition to the label text not moving correctly, the form also has a file field that is not working. When a user selects a file to upload, the file name does not appear in the form, which is the intended behavior.
I recently ran rake assets:clobber and rake assets:precompile and I wonder if that has something to do with this issue.
I did some research and in the Material CSS docs they say:
You can also call the function Materialize.updateTextFields(); to
reinitialize all the Materialize labels on the page if you are
dynamically adding inputs.
I attempted this fix, but I get Uncaught TypeError: Materialize.updateTextFields is not a function in my console when I load the page.
Here is my form view:
<%= render 'shared/header' %>
<div class="container">
<h3>New Photo of the Day</h3>
<div class="row">
<%= form_for #photo, multiple: true do |f| %>
<div class="input-field">
<%= f.label :title %>
<%= f.text_field :title %>
</div>
<div class="input-field">
<%= f.label :caption %>
<%= f.text_area :caption, class: "materialize-textarea" %>
</div>
<%= f.label :date %>
<%= f.date_field :date, class: "datepicker"%>
<div class="file-field input-field">
<div class="btn waves-effect waves-light yellow accent-4 white-text">
<span>File</span>
<%= f.file_field :image %>
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
<div class="input-field center-align">
<%= f.submit "Upload", class: "btn-large waves-effect waves-light" %>
</div>
<% end %>
Here is my assets/application.js
//= require jquery
//= require materialize-sprockets
//= require jquery_ujs
//= require react
//= require react_ujs
//= require components
//= require_tree .
Here is my assets/custom.js
$(document).ready(function() {
Materialize.updateTextFields();
});
This is all really strange because I know the form style animations were working. I did not change the code for my form. The only thing I can think of is the clobber / precompile command, which I needed to run to get some ui improvements up onto production.
Thanks for taking the time to look this one over and I appreciate the assistance!
Looks like a few issues to me:
Rails is magic, and it does something called "turbolinks." Basically, pages are dynamically replaced instead of actually changing pages. It makes your site faster, but doesn't always issue the same Javascript events.
You'll also need JQuery 2 (I've updated my answer after advice from Dmitry).
Change the first few lines of your application JS to:
//= require jquery2
//= require turbolinks
//= require materialize-sprockets
Secondly, I found a second bug that exists in the materialize library. Basically, it wouldn't define updateTextFields() until turbo links loaded a page. To fix this, I've submitted a PR, but in the meantime, I would money-patch this by copy/pasting the method from the source to your code (inside $(document).ready). Use something like this to let your code get updated once they fix the bug (pretty much a polyfill).
Materialize.updateTextFields = Materialize.updateTextFields || // code from forms.js
You are using jQuery 1.x.
Try using jQuery 2.x or 3.x.
Source: https://github.com/Dogfalo/materialize/issues/4593
E: The way to do this in your setup would be to change the line //= require jquery to //= require jquery2.
I just switched to rails and started on my first application. Im struggling a bit with the forms and bootstrap however!
It says my form is rendering and Im not receiving any errors, but none of my form code is showing.
Im running rails 4.2.5 with the latest bootstrap-sass and simple_form versions.
Im not sure whether my bootstrap css is actually working at all either, it doesnt appear to be. Been trying different versions, installing and uninstalling and changing the code for hours but canẗ seem to get it working. Would be immensely grateful for help!
Kind regards,
Jens
Form (_form.html.erb) code;
<%= simple_form_for #book, html: ({ cĺass:'form-horizontal'}) do |f| %>
<div class = "field">
<%= f.input :title, label: "Book Title" %>
<%= f.input :description %>
<%= f.input :author %>
<%= f.button :submit %>
<% end %>
I renamed my application.css to .scss, it now contains only;
#import "bootstrap-sprockets";
#import "bootstrap";
application.js contains:
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
your code is a partial so where are you calling it from? It needs to be rendered inside of another file like index.html.erb.
Whenever the name starts with a _ it means its a partial not a full page, its to be rendered inside another page.
Also there's a div that doesn't end in your code but why even use a div for a class when you can pass that in through Rails ? class: "field" or something along those lines.
Try viewing the resulting html source and looking for one of the inputs to make sure that it's really getting rendered. If it is than the problem may be that you're missing a closing div for your <div class = "field">.
If not then I would suggest you take a look at your new.html.erb (or wherever your rendering your partial and making sure you have something like:
<%= render 'form' %>
Notice that the = is important here. If you're missing this it could be the cause of your issue.
#app/views/books/new.html.erb
<%= render "form", locals: { book: #book } %>
#app/views/books/_form.html.erb
<%= simple_form_for book, html: ({ cĺass:'form-horizontal'}) do |f| %>
<%= f.input :title, label: "Book Title" %>
<%= f.input :description %>
<%= f.input :author %>
<%= f.submit %>
<% end %>
The above should make sure you're outputting a valid form (HTML).
If you're still not seeing the form appear, it will likely be a CSS issue. The difference being that CSS gives styling definition to HTML.
As mention in other answers, the solution to this lies in the classes you're giving to your HTML elements. Since you're using bootstrap, it means you have to first ensure you have bootstrap installed and loaded.
You can use rails-assets to pull from the bootstrap repo directly:
#Gemfile
source "https://rails-assets.org"
source "https://rubygems.org"
gem 'rails-assets-bootstrap', ">= 4.0.0.alpha"
#app/assets/stylesheets/application.sass
#import bootstrap
--
If you wanted to test your HTML/CSS directly, you need to remove the class: "form-horizontal" class from your HTML. If this shows the form, it means your CSS is incorrect, in which case I'd recommend you post back on here with it.
Thanks a lot guys! I got it to work, I had simply forgotten the "=" before render! The other oddities were just last minute tired scrabbling in an attempt to make it work. :P Again, thanks a ton for your help guys!
Trying to do a nice clean install of CKEditor in a Rails 4 Application
This gem https://github.com/tsechingho/ckeditor-rails
I have a couple problems...
-The first is that I have CKEditor in a form and when I go to that form's page, it only loads a regular text input box. When I manually reload the same page, CKEditor will load, but only after I reload the page it's on. It does not show on the first page load.
-Second is that CKEditor is only spitting out raw html. I'm sure this is just a simple mistake on my part but I havent come across any answers yet.
Here is everything related and per instructions of the gem
Gemfile
gem 'ckeditor_rails'
app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require ckeditor-jquery
//= require bootstrap
//= require turbolinks
//= require_tree .
$('.ckeditor').ckeditor({
// optional config
});
app/views/posts/_form.html.erb
<div class="form-group">
<%= f.label :title %>
<%= f.text_field :title, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :body %>
<%= f.text_area :body, class: "ckeditor" %>
</div>
<div class="form-group">
<%= f.submit class: "btn btn-primary" %>
</div>
This is a full list of console errors/warnings. All should be from after CKeditor installation.
Invalid CSS property name: -webkit-overflow-scrolling style.css:3000
Invalid CSS property value: transform 0.3s ease-out style.css:3997
Invalid CSS property value: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0%), color-stop(rgba(0, 0, 0, 0.0001) 100%)) style.css:4331
Invalid CSS property value: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0%), color-stop(rgba(0, 0, 0, 0.5) 100%)) style.css:4340
Uncaught TypeError: Cannot call method 'appendChild' of undefined ckeditor.js?body=1:74
Uncaught The editor instance "post_body" is already attached to the provided element.
For future Googlers --
See this Github Issue
The problem is interference with TurboLinks. It turns out that the actual page load was not the problem, but rather the link directing to the page with a CKEditor form. The solution is to disable turbolinks directly from the div containing the link where CKEditor lives.
In my case the solution looked something like this...
_header.html.erb
<ul class="nav navbar-nav pull-right" data-no-turbolink>