I recently upgraded from CKeditor 4 to CKeditor 5.
The old one used to have a very nice image properties dialog where you could configure borders etc.:
Unfortunately, CKeditor 5 only has a text field to paste the image URL, and nothing else. There's also a simple toolbar to change floating etc. of images, and the ckeditor image-styles documentation seems to suggest that they prefer people to use semantic styling instead of just setting borders, sizes, etc. directly.
However, this if a huge mess when you have an existing webapp where people were used to the flexibility the old editor gave them.
Is there a config option I missed (or a plugin that can be enabled) in CKeditor 5 to get these advanced image controls back?
There is a CKFinder plugin for CKEditor5, this should help you get back the functionality that has been lost, here's a link https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/image-upload.html#ckfinder
Here's the features of this plugin
CKFinder
The CKFinder feature provides a bridge between the rich-text editor
and CKFinder, a browser-based commercial file uploader with its
server-side connectors (PHP, Java and ASP.NET).
There are two ways you can integrate CKEditor 5 with the CKFinder file
manager:
With the server-side connector only – In this scenario, images dropped
or pasted into the editor are uploaded to the CKFinder server-side
connector running on your server.
With both the server-side connector and the client-side file manager
(recommended) – Images dropped and pasted into the editor are uploaded
to the server (like in the first option).
But there are more cool features available, for instance:
uploading using the full user interface,
browsing previously uploaded images,
editing images (cropping, resizing, etc.),
organizing or deleting images.
I hope this helps :)
Related
I want to use CKEditor 5, insert image with URL dialog, instead of its default file upload dialog. how to do this in CKEditor 5 Classic?
There is, as far as I know, no such feature officially provided.
There is, however, a tutorial provided in the documentation on how to write such a feature: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/creating-simple-plugin.html
There is also a separate project on github for the same purpose, which appears to be a bit more stylish: https://github.com/khanhna/ckeditor5-image-via-url
Both approaches require to configure a modified build, and both appear to lack an important component: a button in the image's toolbar to edit that URL later on.
So, a more simple approach that does achieve practically the same is to just drag the images into the editor from some browser window.
Recently started work on a BigCommerce project and on the homepage I want to have a theme area where normal site admin users can upload their own images based on holidays (Xmas, halloween etc) in the theme editor.
I know how to add in some custom elements in the theme editor using the Schema and Config files (headings, text, font colours etc), and how to reference them in the homepage. I'm also fine with referencing set images in the assets folder which aren't going to change, and manually coding references to them.
However I can't quite seem to work out how to add a custom image upload to the theme editor, or how to reference it in a page. Can't seem to find any answers in the Stencil documentation or usual Google searches etc either.
The Stencil Theme Editor currently only supports the file upload data type in the Optimized One-Page Checkout customization settings, but there are a couple of possible workarounds to allow the user to upload their custom background image and then reference it in Theme Editor settings:
One option would be to have the user upload their image to WebDAV, making sure that their image followed a naming convention that you specified. For example, the Halloween image could be required to have the file name halloween.png. You could map that value to a Theme Editor dropdown setting for Holiday Background>Halloween.
Another solution might be to have the user upload their image to WebDAV as mentioned above, but instead of a dropdown menu, you could have the user type their file's name into a text input setting in the Theme Editor. Keep in mind though that there's a 64 character limit for input values.
Hope this helps!
There are 4 ways to get images into the BigCommerce store.
You can:
Upload into the content folder through webdav. Then the images would be referenced like url.com/content/image.jpg. This does require a webdav connection and while everything does point you to using file managers like cyberduck, you can actually map a drive to a network resource to make this super easy. This mean you can create a z drive that is actually your bigcommerce content upload through webdav. It's pretty easy to set up and for customers to use. The drawback is that these files do not get put on a CDN so there's a little loss of performance.
Upload into the theme's images folders. This is complex and would require your client to figure out the stencil local dev connection and push versions up to their store. This would allow the images to be CDN'd but is super complex and your clients won't figure it out... It could also expose you to some long-term version control issues as they may be overwriting you or vice versa.
You can use the media manager to upload images. If you're referring to them in code, an easy trick is when your clients want to replace an image, to delete it and upload a new one with the exact same name... then the reference doesn't break. This is the easiest way to deal with site-wide issues from the client-side. Images are CDN'd this way as well.
You can consider using the marketing banner function for semi-temporary marketing messages. This is what it is made for, the images will be CDN'd and it's full GUI with no techy connections for your clients to figure out. This is perfect for banners that span a single page, but I don't think there is currently a side-wide setting for locations.
I'm using CKFinder 3 integration with CKEditor. Now, I want to select multiple files on the CKFinder window and want them to get added on the CKEditor link dialog.
Currently, even if I'm selecting multiple files, only one file is getting added.
Can anyone know how to achieve this functionality?
First problem is the CKFinder which by default sends only a single URL to the CKEditor. You would need to try changing this behavior using below two events:
https://docs.ckeditor.com/ckfinder/ckfinder3/#!/api/CKFinder.Application-event-files_choose
https://docs.ckeditor.com/ckfinder/ckfinder3/#!/api/CKFinder.Application-event-file_choose_resizedImage
Another problem is CKEditor. Whenever you select an image or a file in CKFinder a corresponding link (anchor tag) or image (img tag) is being created and inserted into CKEditor. Both link and image plugins support single insertion so you would need to write new plugins which insert multiple links and images.
This is a lot of custom coding.
Our Redmine server has CKEditor, which allows for inserting images into Wiki pages, documents, etc.
The images are embedded into the pages via a direct link to the image, i.e. https://redmineserver/attachments/download/94/someimage.png.
The only way we know of to update this image is to delete it then upload the new image. The problem is that the new image will be at a different directory, i.e. https://redmineserver/attachments/download/89/someimage.png, thus breaking all our previous links to https://redmineserver/attachments/download/94/someimage.png.
There is an extension called CKFinder which will fixes this, but we're looking for a free alternative (without coding our own plugin).
Does anybody know of another plugin to update images without breaking their references?
Plone 4.1.
What would be the easiest way to make TinyMCE image picker dialog point to a site default folder (/image-bank) instead of current folder?
This + folder display as album would provide a rudimentary image bank support for Plone easily.
I'd hope to achieve this feature for
All Plone out of the box content types (ATContentTypes)
My custom AT content types
MY custom Dexterity content types
Portlet editor WYSIWYG (is it zope.formlib?)
If it's difficult to edit Python code all over the places, it's accetable just to a Javascript snippet patching TinyMCE settings on the client side.
Mikko: What a coincidence. I'm just trying to achieve the same thing. I managed to create a more specific adapter than `Products/TinyMCE/adapters/Upload/Upload`.
This new adapter changes the upload folder (by setting self.context) to the central-images-folder and then updates radio button listing (and image preview) with the central-folder images (and just uploaded image). This is done by defining an uploadOk method inside the new adapter.
However, to change the initial folder, I think the only way is to customize ploneimage.html.pt or ploneimage.js inside the skins/tinymce/plugins/ploneimage folder. But changing any of these two large files (which might change in the future), could make new releases of TinyMCE not to work with your changes. So you will be forced to re-customize them again.
My idea (which I already emailed this morning to Four Digits) is to provide this feature with TinyMCE out-of-the-box, via a configuration option. This way the package files would be always aware of this feature and future changes won't harm this new functionality.