I am trying to center image using WYSIWYG editor. I don't want to do it by source button and manually insert the code. I have tried to install image2 plugin,but with no effect.
Plugin initialization in config.js localized in /CMS/CMSAdminControls/CKeditor:
/* CMS */
config.plugins += ',showborders';
config.extraPlugins += 'widget';
config.extraPlugins += ',dialog';
config.extraPlugins += ',image2';
/* CMS end */
Is there any other way to center image by WYSIWYG? I am using Kentico 8.2.38.
Simplest way is to add your image, then select/highlight the image and click the horizontal align icon in the editor. No need for an additional plugin.
Second way would be to add css around the images. You could have specific selectors in your css so people don't need to know any of the HTML, just add the classes within your template(s).
Related
I have a blog hosted by Blogger with a custom template: http://www.drugchannels.net/
Images uploaded to the blog are hosted at X.bp.blogspot.com (where X is a number). Examples:
https://1.bp.blogspot.com/-Jwy2VQYRIEA/WqmwvsA07WI/AAAAAAAATA4/jWVcEts1h1Y4IXM0hD0njUhSmQ2AZPnxQCLcBGAs/s1600/Specialty_vs_Retail-2014_vs_2017.png
https://4.bp.blogspot.com/-O4S9ps4u67k/Wk0yhTEuV-I/AAAAAAAASUE/5tPedr-p7_4kedNYU4RY711l6K3maokiQCLcBGAs/s1600/DCI-Copay_Accumulator-03Jan2018-CORRECTED.png
I want to have a white background when the image is clicked. (The images look fine on the site itself. This is not a problem with the blog's background, which is set to be solid white.)
Using the Inspect option in Chrome, I see the following information
The body formatting (background: #0e0e0e;) does NOT appear anywhere on my blog or in my template.
How can I fix?
Thank you!
P.S. I have 10 years of legacy posts with images, so I need a global solution that changes the background to white for all images posted to the blog.
Wrap the image in a div and set the background color of that div with css. That should work
.divclass:active {
background:#FFFFFF
}
If you are opening the images in a new tab or window then your only option is changing the background of the images yourself with a photo editor. If you're just trying to give the user a full size view of an image when they click it you could use javascript/jquery and have a full size div with a background and an image pop up in full screen without sending them to the linked image. Theres probably quite a few jquery plugins that will do this with minimal coding knowledge, just google it.
Thanks, Riley.
I can't go back and edit hundreds of images, so the photo editor option won't work.
But based on your suggestion, I used the following solution:
1) Enabled "Showcase Images with Lightbox" on blogger
2) Added CSS from this page (http://www.howbloggerz.com/2016/05/how-to-customize-blogger-lightbox.html) with no background image and background color set ot white (#ffffff).
Downside is that charts/images now pop up on same page rather than opening in a new tab.
Thank you!
I am creating html documentation using sphinx and the read-the-docs theme. When I add a scaled image, it can be clicked and pops-up full-size in a new tab. How can I disable this behavior.
For example, I am using the following scenario throughout my document
1) Create a png file, e.g., application-icon.png , to be exactly 10pt by 10pt.
2) Create a document containing:
.. |application_icon| image:: images/application-icon.png
:width: 10pt
:height: 10pt
Click the application icon |application_icon| to display …"
When the width and height scale information are included, the icon displays perfectly and properly sizes even when I view the document on my cellphone. However, the icon is clickable and opens a new tab showing the image.
If I omit the scale information, the icon is no longer clickable, however the image does not scale when the document is opened on my cellphone, instead the image occupies the entire width of the cellphone screen.
Try adding html_scaled_image_link = False to your Sphinx conf.py file. You can find details here.
Inline
.. image:: images/pic.png
:class: no-scaled-link
I kept clicking on them when I was switching between windows/ tabs!
I have just upgraded to CKEditor 4.4.5 from 3.5, and notice quite a few changes !! One of the changes is the new skin called Moono which looks great. However it did get me wondering whether it would be possible to change the black in the menu icons to a custom colour, for branding reasons for example. We do this in the rest of the web application using a combination of Server code and CSS.
Many thanks.
Toolbar icons in Moono are images, so if you want to change them, you'd need to create a new skin or use an alternative one from the CKEditor Addons Repository.
However, since Moono is a monochromatic skin, maybe for branding purposes it would be enough for you to use the so-called "chameleon feature" that lets you change the UI color with a simple configuration option?
If so, just use config.uiColor to provide a mataching RGB color value or an HTML color name, as in:
config.uiColor = '#AADC6E';
See a working example here: http://sdk.ckeditor.com/samples/uicolor.html
I have managed to remove the dialog boxes allowing an image to be resized (in ckeditor image2 plugin). Is there a way to prevent the user from resizing an image with the corner handle?
EDIT:
Reinmar is right. And to use in config.js do:
CKEDITOR.editorConfig = function( config ) {
...
config.disallowedContent = 'img[width,height]';
}
This will also remove the height and width options from the dialog box in a functional way.
If it's satisfactory for you to remove width and height attributes at all use:
CKEDITOR.replace( 'editor1', {
disallowedContent: 'img[width,height]'
} );
You can read more about disallowed content here and the Advanced Content Filter here.
If you want to hide only resizer but leave inputs in the image dialog and attrubtes in code, then I believe you need to hide it via CSS.
The ckeditor editor window for the site content areas has a blue background to match the website so that the client sees a true representation of the website while adding content.
When "show blocks" is selected the blocks border displayed is barely visible on the blue background.
Therefore, where can the colour of the show blocks border be changed to a darker colour?
Unfortunately, color of border displayed for blocks isn't customizable. CSS that styles them is generated by JS. You can find it here http://dev.ckeditor.com/browser/CKEditor/trunk/_source/plugins/showblocks/plugin.js#L28
I guess that you're using compiled version of CKEditor, so source is minified. You'll have to open ckeditor.js file and find this fragment and change it manually.
Or you can try to clone CKEditor 4 (new version that will be release next Tuesday), change this value here https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/showblocks/plugin.js#L48 and then compile your build of CKEditor (you can find instructions here https://github.com/ckeditor/ckeditor-dev). But to do this you'd need Mac or Linux, because build script is written in Bash.
CKEDITOR.replace( 'textarea_id', {
uiColor: '#14B8C4'
});
Update :-
Check the sample url:ckeditor