I have wysiwyg editor and filtered using htmlpurifier, Id like to allow the users to directly drop or paste images in the editor and the image is saved as textformat, but the htmlpurifier filter this out, how to configure htmlpurifier to allow embedded images?
I don't know how the editor is doing the embedding, but if it is embedding them as data URLs, you can enable it modifying %URI.AllowedSchemes to include 'data'.
Related
I am creating a full stack blog application but I am confused how can i render rich text editor data on the backend using express and mongoDB Just like this stackover flow text editor. Most important thig is how can find Images of text editor data and push it on cloudinary. help me out please
First, you should choose what editor you would like to use. One popular open source editor is Quill for example.
After you implement it in your frontend, you should listen to the events on the editor instance (image.added, image.removed...) and based on that you can upload or delete your images from the cloud.
There is also an option to store images encoded in the HTML so you don't have to upload them to cloud at all, but that is not the good practice since it will significantly increase the payload of the HTML.
After you are done with the article, the output HTML from the editor can be saved in the MongoDB, and later you can fetch it and display it in the client side.
Is there a way to have directus insert links to thumbnails instead of the original full-size image when using the wysiwyg editor?
Context:
We have directus configured to use S3 for file uploads. Our backend directly connects to the directus db to fetch data and return it to the client in whichever form it is needed.
Now for the wysiwyg editor all html it generates is fine. However, images inserted with it always link to the original image.
In our case the client is a mobile app. Saving bandwidth with thumbnails is important because the app is used a lot without wifi.
I'd like to avoid having to parse the src tag and replace it with a different link. Mainly because it is not a simple search and replace, as the link contains the location on s3 (uuid), not the id that directus uses for thumbnails (private hash) - so I would also need to query the database a second time.
EDIT: I'm actually doing the search, query db, and replace (Optimized a bit by collecting the links, then going to the db once in a big query, then do the replace). I haven't found an easier way of doing it.
I want to allow uploaded images only, not images linked from external websites. Is there a way to only display the "Upload" section of the "image" plugin/dialog?
The image plugin does not have a built in configuration option to do what you want. As TinyMCE is released under an open source license you could certainly modify the code of that plugin to get your desired outcome.
I implemented Tinymce on a website and it's being used as a content editor by the owner of the website (the content is saved in a .txt file). I would like to know if it is possible to save an image uploaded in the tinymce editor into a specific folder on the server.
Thanks!
You'll be able to choose a specific location for image uploading using the images_upload_url property. You can read more on that and our Image Uploading API here: https://www.tinymce.com/docs/configure/file-image-upload/
I have an image gallery built with slimbox and it is in MODX. I need to be able to modify the link tags so the client can add in captions to each image. When you right click on an image in MODX in the TinyMCE editor you can edit the title tag which is where the caption comes from. The problem is when it is saved it is automatically deleting my rel attribute for the lightbox function.
I have checked the xconfig.js file in the TinyMCE folder but the rel attribute seems to be allowed. Do I have to edit this file (I have tried to no avail) or do I need to add a separate line of code to the actual page that the problem is occurring on?
Any help would be appreciated. Thanks.
Looking at the default setup for TinyMce in MODX REvolution it turns out img tags don't allow the use of "rel" by default.
'img[align<bottom?left?middle?right?top|alt|border|class|dir<ltr?rtl|height'
+'|hspace|id|ismap<ismap|lang|longdesc|name|onclick|ondblclick|onkeydown'
+'|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover'
+'|onmouseup|src|style|title|usemap|vspace|width],'
Did you changed this to allow rel? If you did it might just be a caching problem so you might want to clear all the manager caches maybe even flush permissions.