I was wondering if it possible to change the class of an image tag gotten from summernote.
Currently I am using summernote with rails4 and have implemented it the following way:
in creation of a new project
<%= form_for(#project, :html => { :multipart => true }) do |f| %>
<%= f.text_area :description, id:"summernote" %>
<script type="text/javascript">
$(document).ready(function() {
$('#summernote').summernote();
});
</script>
and when I show it
<%= #project.description.html_safe %>
If I insert an image like this it works but i would like to know two things:
1: Where does this image get stored? If I look at the source code generate it is just data:image/jpeg;base64,/9j/4S/(Bunch of random letters)
2:I would like give a class to all tags generated for images uploaded with summernote (and possibly save them using paperclip if possible)
Thanks for the help!
The "f.text_area" in your code will hold everything you enter in the summernote box entry. Once you submit the entry all images will be converted to base64 and stored directly in your database end server.
To apply your own tags on the images click on the "Code View" button found in summernote editing toolbar and locate your image code then manually place an opening <div class= "your-class"> before the image code and another closing <div> tag after your image code.
Related
I have the following rails code (it uses simple form):
<%= f.input :color, collection: custom_colors.split(/\n/).reject(&:empty?) %>
custom_colors comes from a text area where users are asked to enter entries seperated by new lines.
The issue: This displays correctly, however, when a user goes to edit, the color is not saved and the select is empty. I'm using a typical rails scaffold.
The issue (continued): The reason I believe this is not working, is that when saved, the color looks like blue\r\n. However, when I do:
<%= field.options.split(/\n/).reject(&:empty?) %> it returns blue\r, which means the input won't match, as blue\r\n clearly does not equal blue\r
How do I fix this?
Try this in your form.
<%= f.input :color, collection: custom_colors.split(/\n/).map(&:strip).reject(&:empty?) %>
Like the title says, I am created the blog application from the Rails guide and I want to be able to edit comments made on articles without redirecting to an edit.html.erb page. I want a div that was previously hidden to appear in the middle of the screen with the edit form on it and the text fields filled with the comment that is being edited. Here is an image of the div that is going to appear in the middle of the screen.
I know how to edit comments by going to edit.html.erb but not in the same page or if this is even possible.
I am not looking for help with the css or html, but if there is a way to do this with js or rails that would be awesome. Thanks in advance!
Edit: So the answer by Satendra gets the partial to show up, but the fields do not contain the original comment that I wanted to edit. How can I get the text-fields to be populated with the comment?
Follow these steps to make edit comment on same page.
Create a partial name _edit.html.erb put your edit.html.erb code there.
Create a div in middle of the screen where you want to render this partial.
<div id="edit_comment" >
</div>
put :remote => true to your edit button link.
# change your path accordingly
<%= link_to edit_comment_path(:comment_id => comment.id), :remote => true %>
The :remote => true is the most important part here, it allows the whole Ajax business in the first place.
In comment_controller.rb inside edit function change respond_to js
def edit
#comment = Comment.find(params[:id])
respond_to do |format|
format.js
end
end
Create edit.js.erb and put below code there.
$("#edit_comment").html("<%= j render(:partial => 'edit', :locals =>{ :comment => #comment }) %>");
# use comment variable in your partial as it is passed as local.
Its Done.
I pass 2 hours on a problem & I didn't find any answer.. In simply add a link with an image tag on Ruby on Rails like that
<%= link_to(image_tag("/assets/images/icons/facebook.svg"),'https://www.facebook.com/raspberrycook')%>
and the picture doesn't appear. I check with Firefox's debugger and image won't load. But when I try to get http://localhost:3000/assets/images/icons/facebook.svg, image appear! So I rename the picture as fb.svg & I update my link...
<%= link_to(image_tag("/assets/images/icons/fb.svg"),'https://www.facebook.com/raspberrycook')%>
... and it works! Any idea?
I'm very new to Rails and I need to dynamically add/remove input fields on a "form_for" in Rails. I am using these inputs to alter a user's profile.
Here's the snippet I want to turn dynamic:
<%= f.label :languages, "Languages" %>
<%= f.text_field :languages, class: "shortInput", value: #parsed_json_user['user']['languages']%> <br />
I have seen many tutorials using nested attributes (I'm not even exactly sure about what those are) and such but I will not be using models. As you can see, I just want an object with a multitude of values (e.g. array) since I'll be using an API to update the "User" model.
I need something like:
Languages:
English remove
add new
Should I be using fields_for? Or somehow use JS or JQuery? Any help would be appreciated.
I searched everywhere for a similar question and haven't found any but if you actually know of or find one, pointing me in the right direction would be wonderful!
Thanks in advance
#languages = User's Languages
f.collection_select :user_languages[], #languages, :id, :name , {hide_label: true, :selected => #languages.first.id} , {:style => "width: 120px",:required => true}
Update: For single form, no nesting - one option is to hack together your own jquery. I had used a different site for my testing, but this Jquery example was the one I found easier. I removed the stuff about a counter for max fields ... it goes in the /app/assests/javascript/.js ...
$(document).ready(function() {
$(".add_field_button").click(function(e){ //on add input button click
e.preventDefault();
$('.input_fields_wrap').append('<div><input type="text" name="mytext[]"/>Remove</div>'); //add input box
}
});
$(".input_fields_wrap").on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove();
})
});
And the html code ...
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
</div>
If you're not having luck yet - Cocoon Gem or railscast 197/198 will do what you need with jquery which is dynamic. Ignore the parts about nesting and just take what you need from it.
Also, I'm still poking around in turbolinks which had an update recently...you might be able to find an answer there...probably not exactly what you would want...
From what I can tell is that is rely's on two paths you write in rails, that are then built upon via the jquery that acts on (add/delete) :before or :after the link_to_add_association or link_to_remove_association in order to add/hide fields from view on the dom & then the update button actually pushes the whole mess to through activeRecord into the database.
I am trying to design a webpage that contains both a radio button field and a list of links. When one of the links is clicked, I would like to pass the associated value of the button to a controller. So far I have the following code:
In my views page:
<div id="radio_buttons">
<%= radio_button_tag 'radioGroup', "1" %> 1
<%= radio_button_tag 'radioGroup', "2" %> 2
<%= radio_button_tag 'radioGroup', "4" %> 4
</div>
...
<div class = "text">
<%= link_to "mylink", search_path(:radioGroup => #radioGroup)%>
</div>
In my Controller:
#radioGroup = params[:radioGroup]
When I add the line 'puts #radioGroup' to my controller, it prints nothing. I have been able to pass different values to a new web page upon a link click (i.e those contained in a text field) but for some reason I can't figure out how to do the same thing with buttons. Does anyone know how to accomplish this?
Thanks!
If you want to submit multiple values to another page you should use an HTML form for it. Check this page for more related info: http://guides.rubyonrails.org/form_helpers.html.