After install CKedit dont work. I used the guides - https://github.com/galetahub/ckeditor
I've tried everything but it does not work
config/initializers/assets.rb
`Rails.application.config.assets.precompile += %w(ckeditor/config.js)`
config/initializers/assets.rb
//= require ckeditor/init
routes.rb
mount Ckeditor::Engine => '/ckeditor'
ActiveRecord + carrierwave
gem 'carrierwave'
gem 'mini_magick'
rails generate ckeditor:install --orm=active_record --backend=carrierwave
everything tried, but anyway dont work, help
Here is simple code try this .No need any gems
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Full page editing with Document Properties plugin</title>
<script src="https://cdn.ckeditor.com/4.11.2/standard-all/ckeditor.js"></script>
</head>
<body>
<div class="container">
<textarea cols="80" id="editor1" name="editor1" rows="10">
</textarea>
</div>
<script>
CKEDITOR.replace('editor1', {
fullPage: true,
extraPlugins: 'docprops',
// Disable content filtering because if you use full page mode, you probably
// want to freely enter any HTML content in source mode without any limitations.
allowedContent: true,
height: 320
});
</script>
</body>
</html>
Related
I am using Rails 6 and ActionMailer to send an email when the user joins. It is also probably very important to mention that I use API only application and I host it on Heroku.
I have an .html.erb view setup and it looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
<div style="width: 100%;display: flex;flex-direction: column;align-items: center;padding: 15px;background-color: white;font-family: 'Helvetica';color: #2c3e50">
<h1>Welcome to company!</h1>
<div style="height: 1px;background-color: dimgrey;width: 50%;margin-top: 10px; margin-bottom: 20px;"></div>
<h4 style="margin:0">Want to learn more about our platform?</h4>
<p style="margin-bottom: 30px">Check out this quick video guide.</p>
<h4 style="margin:0">Join our Discord server</h4>
<h4 style="margin:0">Follow us on social media</h4>
<p style="margin-bottom: 30px">Some icons with social media</p>
<%= link_to "Create Password", #url, style: "color: white;padding:10px;border-radius:10px;margin-bottom:20px" %>
</div>
</body>
</html>
Now, this code in preview would give this kind of view
And that is good, that is what I want.
But when user receieves it in production it looks something like this
Am I using something that I shouldn't? How do I make it look like it looks like in the preview.
Here are some more files that might interest you:
Stuff I added to production.rb regarding the mailer:
config.action_controller.asset_host = 'https://myapponheroku'
config.action_mailer.asset_host = config.action_controller.asset_host
config.action_mailer.perform_caching = false
config.action_mailer.delivery_method = :smtp
host = 'myapponheroki'
config.action_mailer.default_url_options = { host: host }
# smtp settings here
Do I have to add anything else here to make it work?
My mailer is located in app/views/user_mailer
Please ask if you need any more code snippets or information.
What email client was used for that screenshot? Could just be an email client issue and flex. Maybe to debug, you could change your view to use just a regular table and see if that fixes the formatting.
Also, I have used these in the past with success. They usually are handled by most major email clients pretty well.
https://litmus.com/community/templates
I cannot get the galetahub ckeditor gem to work with Rails 4 for me. I searched for any problems online but cannot find any. I'm following the instructions exactly.
I include gem "ckeditor" in my Gemfile
I include gem "carrierwave" and gem "mini_magick"
I run rails generate ckeditor:install --orm=active_record --backend=carrierwave
I run rake db:migrate
Inside application.rb I include config.autoload_paths += %W(#{config.root}/app/models/ckeditor)
Inside routes.rb I have mount Ckeditor::Engine => '/ckeditor'
I'm using SimpleForm so I paste the following ERB <%= f.input :description, as: :ckeditor %> in my view.
And I think that's it. But my text area does not convert to a CKeditor area for some reason.
STEP 1: Add gem 'paperclip' and gem "ckeditor" in your gemfile.
STEP 2: Bundle Install.
STEP 3: rails generate ckeditor:install --orm=active_record --backend=paperclip
STEP 4: Place config.autoload_paths += %W(#{config.root}/app/models/ckeditor) in application.rb
STEP 5: Place mount Ckeditor::Engine => "/ckeditor" if not present in routes.rb already and run db:migrate
STEP 6: Open application.html.erb and place this <%= javascript_include_tag 'ckeditor/ckeditor.js' %> in header.
STEP 7: Place this in footer(above the body tag) in application.html.erb
<script type="text/javascript">$(document).ready(function() {
if ($('textarea').length > 0) {
var data = $('textarea');
$.each(data, function(i) {
CKEDITOR.replace(data[i].id);
});
}
});</script>
STEP 8: Restart the WEBrick SERVER.
That's it.
Else
Download the CKEditor Zip file, extract the files and place them in the sub directory “javascripts/ckeditor”, add the main JS file to the layout..
javascript_include_tag 'ckeditor/ckeditor.js'
Place this in footer(above the body tag) in application.html.erb
<script type="text/javascript">$(document).ready(function() {
if ($('textarea').length > 0) {
var data = $('textarea');
$.each(data, function(i) {
CKEDITOR.replace(data[i].id);
});
}
});</script>
I have the same problem using rails 4 and apparently the problem is that the form helper
form.cktext_area
Or in your case
f.input :description, as: :ckeditor
it's not generating what it supposed to generate, and you don't have to load the editor manually, the only thing you need to do is to is to add the class 'ckeditor' to your textarea and it will load automatically, like this:
f.cktext_area :body, :class => 'ckeditor'
Meanwhile the Galetahub gem has been updated, but it has to be updated in your app manually. Read the github page: https://github.com/galetahub/ckeditor.
ajkumar basically answered the question well already, but if you are still lost, all you need to do is download the js file, include it in your html, have a script snippet included in the HTML to activate ckeditor on a certain textarea tag ID, and then change the class of the "textarea" tag you want to change to ckeditor. Quick sample below
<!DOCTYPE html>
<html>
<head>
<title>A Simple Page with CKEditor</title>
<!-- Make sure the path to CKEditor is correct. -->
<script src="../ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
</script>
</form>
</body>
</html>
The galetahub gem is currently broken on Rails 4. This one is working fine though: https://github.com/tsechingho/ckeditor-rails
In case you are having trouble making it work with active admin, make sure to put this:
config.register_javascript 'ckeditor/ckeditor.js'
config.register_javascript 'ckeditor/init.js'
Into config/initializers/active_admin.rb
I have installed:
compile ":jquery-ui:1.8.24"
compile ":jqgrid:3.8.0.1"
I got the next error:
| Error 2013-06-03 15:20:33,892 [http-bio-8080-exec-7] ERROR resource.ResourceMeta - While processing /plugins/jqgrid-3.8.0.1/css/jqgrid/ui.jqgrid.css, a resource was required but not found: /plugins/jqgrid-3.8.0.1/css/jqgrid/ellipsis-xbl.xml
I opened the file C:\Users\user\.grails\ivy-cache\org.grails.plugins\jqgrid\zips\jqgrid-3.8.0.1.zip. There is not any: css/jqgrid/ellipsis-xbl.xml
The latest version of JQGrid (4.5.2) has the file ellipsis-xbl.xml included. But I'm using the latest Grails plugin which uses that older version.
How could I tell Grails to look for ellipsis-xbl.xml in another location (let's say web-app/css/jqgrid-additions/ellipsis-xbl.xml).
I did a research on Google and it is what could be related:
taglib: <jqgrid:resources /> (according with the documentation, it
includes the required javascript and css for the plugin)
Add a configurationmapping in BuildConfig.groovy (I didn't find any
Grails documentation about that!)
I added to the GSP the next code to check if it looked at a different
location (and it check in the same location, at /plugins...):
<style>
.ui-jqgrid tr.jqgrow td {text-overflow:ellipsis; -moz-binding:url('ellipsis-xbl.xml#ellipsis');}
</style>
I end up by removing all css/js plugins except for jQuery (which is built-in). Just extract css/js files in /web-app directory. Then include them in /grails-app/conf/ApplicationResources.groovy like this:
modules = {
ui {
dependsOn 'jquery'
resource url: 'css/default.css'
resource url: 'css/print.css', attrs:[media:'print']
}
bootstrap {
dependsOn 'jquery'
resource url: 'css/bootstrap.css'
resource url: 'css/bootstrap-responsive.css'
resource url: 'js/bootstrap.js'
}
choice {
resource url: 'js/choice.js'
}
application {
dependsOn 'jquery,choice'
resource url: 'js/application.js'
}
}
Choice and application are application specific. Include here as an example. Then, call them in layout:
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><g:layoutTitle default="My Application" /></title>
<g:layoutHead />
<r:require modules="jquery,ui,bootstrap,choice,application" />
<r:layoutResources />
</head>
<body>
<div id="wrapper">
<div id="main" class="container-fluid">
<div class="row-fluid">
<div class="span12">
<g:layoutBody/>
</div>
</div>
</div>
</div>
<r:layoutResources />
</body>
</html>
This way, I can manage css/js library myself.
I got this problem writing the website with Ruby on Rails.
bundle show
* jquery-ui-rails (4.0.1)
In app/assets/javascripts/application.js
//= require jquery.ui.datepicker
In app/assets/stylesheets/application.css
*= require jquery.ui.datepicker
In app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
And then in somepage.html.erb, I got
<script type="text/javascript">
$(function(){
$("#startdate").datepicker();
$("#enddate").datepicker();
});
</script>
When running it, Chrome says that
Uncaught TypeError: Object [object Object] has no method 'datepicker'
I suppose that resource not being referred properly is the cause because the problem could be fixed by adding the follows into app/views/layouts/application.html.erb
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
These could be found at http://jqueryui.com/datepicker/. I saw demos having working datepickers without these codes. But I do not understand why it is not working in mine. Anyone got any suggestions? like something to add other than those I mentioned above?
It probably because of either of the following:
1) You are including multiple javascript files in your application.html.erb which is leading to havoc when put altogether.
2) You are using some other javascript file that also using $ just like jquery is using.
Having two same symbols is the possible cause of getting no method 'datepicker' for the jquery.
The alternative is to replace all the occurences of $ with jQuery
OR
Just wrap your jquery code insode a block like the following:
jQuery(function($){
//all jQuery code which uses $ should be here.
});
I originally needed to set the ajax beforeSend to include the csrf meta tags for all ajax post requests (the session was getting reset, big pain, etc). This got post requests working fine. However this seems like something that should have been taken care of in the latest version of jquery-rails. I feel like I missed something when I upgraded...and yes, I am including the csrf meta tag in my layout.
Now my issue is link_to :remote. My links are generating the correct html:
<%=link_to( "important", "/questions/importance?qid=#{q.id}&imp=up",
:method=>"post",:remote=>true)%>
generates:
<a rel="nofollow" data-remote="true" data-method="post"
href="/questions/importance?qid=30&imp=up">important</a>
However, when clicked the request is a GET request and is not an xhr request / doesn't use my js handlers. This did work fine before upgrading to 3.1.3 from 3.0.7
Request that is generated:
Started GET "/questions/importance?qid=30&imp=up" for 127.0.0.1 at 2012-01-30 11:41:36 -0500
Creating scope :page. Overwriting existing method Question.page.
Processing by QuestionsController#importance as HTML
Parameters: {"qid"=>"30", "imp"=>"up"}
Here's the relavent parts of my layout:
<%= javascript_include_tag 'application' %>
<%= csrf_meta_tag %>
<%= yield :javascript %>
<script type="text/javascript">
$(document).ajaxSend(function(e, xhr, options) {
var token = $("meta[name='csrf-token']").attr("content");
xhr.setRequestHeader("X-CSRF-Token", token);
});
</script>
Any insight into this? Did I miss something when upgrading?
application.js:
//= require jquery
//= require jquery-ui
//= require jquery.purr
//= require best_in_place
//= require fancybox
//= require_tree .
javascript files that are being included (via page source):
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.purr.js?body=1" type="text/javascript"></script>
<script src="/assets/best_in_place.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.fancybox.js?body=1" type="text/javascript"></script>
<script src="/assets/fancybox.js?body=1" type="text/javascript"></script>
<script src="/assets/autocomplete-rails.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.fancybox-1.3.4.pack.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.validate.min.js?body=1" type="text/javascript"></script>
<script src="/assets/validators.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="26P9UWaXFsZBE6jfjkQv00GgS+7+XmOOPxlh55liz4Q=" name="csrf-token" />
You need jquery_ujs for the data-method attributes rails creates to actually be used. Assuming you have the jquery_ujs gem in your app, adding
//= require jquery_ujs
To application.js (after jquery is loaded) should fix things