Images generated from SummerNote WYSIWYG Bootstrap broken - ruby-on-rails

I am using Summer Note (http://hackerwins.github.io/summernote/) in my CMS to edit pages. For images, summer note allows you to insert images as img tag with a bunch of data (not uploaded to the server and stored in filesystem, but stored directly into database). So I am storing images within the HTML text, which is all stored in my postgres database (data type is text).
When the html is displayed on the front end, the text shows up fine but the images are broken. Is this due to the data type (text) or does there exist a better WYSIWYG bootstrap solution that allows uploading of images, as well as resizing them? Or perhaps a hack that could get around that to using uploaded images to the filesystem?

Have you tried adding .html_safe
Example:
#page.content.html_safe

Related

Active Storage: filenames with special characters

In my application, users can change the background image of a banner. They upload the file using Simple Form and Active Storage. It's working correctly but we had a user trying to upload a file name banner-website.png (2).png. The file is uploaded and saved but doesn't appear as a background image. I guess this happens because of special characters in the filename.
What is recommended to avoid such situations? Do we need to sanitize file names?
Several things to check:
Check the console and tried to view the CSS and see if the full link
is being populated? Try checking the CSS code and copy the link to
an address bar to see if the image loads from that direction.
Check the users png file to make sure its not corrupt. PNG headers that are corrupt can cause issues displaying in a website.
Check to see if your sanitizing plugin is causing an issue with that file. I have never used that one so regarding that I cannot say.
I tried uploading a file with a same name into my Rails 6 testbench (vanilla with active storage and stimulus js) and it works fine. It could be a conflicting CSS code too.
Just my 2 cents.
I've found the solution here: Rails Active Storage - Background Image invalid property?
Adding a single quote around the URL solved it.

Saving SVG in Rails Active Storage

I have a Rails application where I am storing image in the model using
has_one_attached: logo
However, when I check in the AWS console, I see that the file is saved as a text file with the contents of SVG in it. When I try to retrieve the image using a signed URL, it gives me back the content of the text file.
I want to display this image in my HTML. How can I render this SVG in my application?
because svg is text ,it will be saved as text.
for displaying it in rails app this answer should work

How do I allow images in a textbox | ASP.NET Core

I am developing an ASP.NET Core application & I need a control as described below:
Is there an existing control or a way to allow users to insert images in a textbox.
There is no way to simply insert an image into a textbox. WYSIWYG editors like TinyMCE give the appearance that this happening by rendering a HTML area with an img tag pointing to an image file at some location. In the end, what's submitted is this backing HTML, not the image itself.
For something like an image that already exists at some publicly-accessible location online, nothing more is required. However, if you're talking about allowing a user to embed an image that exists only on their local filesystem, that requires additional machinery. Again, WYSIWYG editors like TinyMCE often include something along the lines of a "file browser" or "upload" control that handles this type of thing. When the user picks an image from their computer, the control uploads that image to some location on the server and then, again, adds a simple img tag pointing to the now online location of that image. This has to be configured, though. There's usually server-side scripts that must be installed on the server and you have to somehow tell it both where to store the uploaded images and how to address them from a publicly-accessible URL. This is likely what you're missing with TinyMCE. However, setting all that up is beyond the scope of Stack Overflow. Consult the documentation for your library of choice.

Generating a docx file using Pandoc: images missing! Due to multiple requests?

I'm generating a markdown document using my Rails 4.2 app which includes images that are on the same server (in the public folder).
Using pandoc (pandoc-ruby 1.0.0), I want to convert the document into various formats, especially HTML (to preview it in the browser) and DOCX (to download it).
The preview in the browser works perfect. But when converting to DOCX, the images aren't included. I guess this is due to multiple requests to referenced images while pandoc is generating the document.
I have already experimented with setting allow_concurrency to true, but this didn't solve the problem. Also, it happens on both the development and the production environment (while in development, it takes a long time, and in production it doesn't - maybe due to some differences in timeout limits?).
I have already found a way to solve my problem by not referencing the images using an URL, but by embedding it as base64 string into the document. But this for sure can't be the solution of choice, as it tends to bloat up the HTML document a lot. Also, on production, I already get RuntimeError (Stack space overflow: current size 8388608 bytes) from pretty small embedded images. So I have to find a real solution.
Reference the images by file path instead of url if they are on the same server.

How to upload x3dom files to be displayed like a gallery

I've been working with x3dom for the past month and now I wan to be able to display my work, does anyone know of an uploader where I could upload the x3dom file so that it is saved in a sort of image gallery, or is the only way to do it to keep copy pasting x3dom code to an html file and then upload thru ftp?
any variety of available upload scenarios will work
x3d is all text so you can store them as flat files and upload via ftp or if you want to have a template and dynamically viewable system you could store the x3d in a database and display that db info in a dynamically generated html file

Resources