In CKEditor, I added my custom image button, which directly trigger a file input. However, images can only be rendered when the Image plugin is in use.
I don't want to have 2 image buttons on the toolbar, is there a way to hide the Image button, but still use it (like display: none but in a more structural way?)
Thanks in advance.
Since 'CKEditor 4.1' you have something which is called Advanced content filtering.
This allows you set enable or disable certain tags.
The easiest way to allow the images to be displayed is to add
config.allowedContent = true;
in your config.js file. But this will allow everything.
To just add the enablement of the 'img' tag you can add it in the 'extraAllowedContent' element when you create the CKEditor
var myEditor = CKEDITOR.replace(editorId, {
extraAllowedContent : 'img(*){*}[*]'
});
There is removeButton option for CKEditor config, will it work for you ?
config.removeButtons = 'Image';
Related
I'm using CKEditor and I want to allow people to place images by using a URL, but not upload. I can't figure out how to accomplish that. My toolbar is:
toolbar: {
items: [
'heading','|','bold','italic','link','bulletedList','numberedList','|','indent','outdent','alignment','|','HorizontalLine','ImageInsert','BlockQuote','InsertTable','MediaEmbed','Undo','Redo','|','FontColor','FontSize','Strikethrough','Subscript','Superscript'
]
},
Originally it had 'ImageUpload', so I removed that thinking it would work yet the image icon for ImageInsert, when clicked directly, opens the browser file dialog for an upload. You have to hit the down arrow to get the URL. What should I change it to such that clicking the icon opens the URL dialog directly?
Thanks!
PS, I inherited this, I didn't make it initially and as such I have no idea what version of CK it is nor how to determine that, sorry.
Try This :
CKEDITOR.editorConfig = function( config ) {
....
config.removePlugins = 'easyimage, cloudservices';
....
};
Then click on image tab on Editor and insert your Image Url In Url Field
I am trying to save a link in DotNetNuke (DNN) using the CKEditor for the HTML module.
When I save, the editor will automatically adjust the link.
I am trying to save it as
data-src="#bronze"
The reason for the hashtag is for displaying a fancybox pop-up with hidden content. https://fancyapps.com/fancybox/3/docs/#inline
But the editor adds /portals/2/ in front of this URL.
I have looked at this article below.
CKEditor - Change image source
I assume the CKEditor is saving the SRC and Href links in protected mode for browsers. Is there a way that I can turn this off in the settings?
I did try to change to RAW mode, but it still does the same thing.
I face the same problem on data-fancybox-href, the only solution I can think of is using jQuery / javascript to change back to correct value:
var src = $(".more_info_btn")
$.each(src, function(){
var href = src.attr("data-src")
var hrefArr = href.split("#")
href = "#" + hrefArr[hrefArr.length-1]
$(this).attr("data-src", href)
})
I would like the ability to add a class to images which are added to the body field in Drupal.
I want to keep things as simple as possible for our users, whereby they don't have to add classes etc. Ideally they would just click on the image button in the toolbar, paste the URL or upload an image and set align either left or right:
Image properties for adding images in CKeditor
I've tried several options, including: CKEditor adding class to img tag but I cannot get anything to work.
The path to CKEditor is to the CDN //cdn.ckeditor.com/4.5.4/full-all
I'd like to us my own SCSS to make the images float left or right at desktop, and be centered for the small breakpoint.
The text format is 'filtered HTML'.
Is there any way I can get this to work?
Many Thanks
Update
Because I'm using the CKEditor CDN, I've added the following to my local 'ckeditor.config.js' file
config.extraPlugins = 'image, dialog, dialogui';
// Enable local "imagetoolbar" plugin from /myplugins/imagetoolbar/ folder.
CKEDITOR.plugins.addExternal( 'image', '/plugins/image/' 'plugin.js' );
CKEDITOR.plugins.addExternal( 'dialog', '/plugins/dialog/' 'plugin.js' );
CKEDITOR.plugins.addExternal( 'dialogui', '/plugins/dialog/' 'plugin.js' );
// extraPlugins needs to be set too.
CKEDITOR.replace( 'news', {
extraPlugins: 'image, dialog, dialogui'
} );
The example I copied this from has 'news' as the CKEDITOR.replace, which I'm sure is wrong, what should this be? https://www.pluginsforckeditor.com/Tutorials/149/How-to-add-a-plugin-to-CKEditor/en/n149.aspx
You can modify the image plugin in order to have the class of the image already entered. So users just have to paste URL or upload an image.
Fill the default field with what you want.
I hope to help you.
I have used CKEDITOR.appendTo( "my_div" , null , my_string ) to create an instance of ckeditor ... no problem.
however, the LINK button opens a non-interactive LINK dialog box.
So, is there some config setting that it supposed to be manually set to true, perhaps?
EDIT 1 ... I will explain what I meant by non-interactive LINK dialog box ...
When I click the ckeditor's LINK button (the one that looks like a chain-link), it opens a LINK dialog box which has a input field for me to enter a URL, plus a pulldown to choose protocol, plus a couple of other form elements.
However, none of these are use-able ... if I try to type in the url input field, nothing happens (the field will not accept focus); likewise the pulldowns do not open if I click them.
EDIT 2 ... added screenshot
When the modal option is set to true for the dialog, the dialog blocks any interaction with elements outside of it. (https://github.com/jquery/jquery-ui/blob/master/ui/dialog.js#L818)
You can override this to allow interaction with elements inside ckeditor.
Just include this somewhere after jquery ui and it should work:
orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function(event) {
if ($(event.target).closest('.cke_dialog').length) {
return true;
}
return orig_allowInteraction.apply(this, arguments);
};
If you want to allow interaction with any element outside of the dialog, include this instead:
$.ui.dialog.prototype._allowInteraction = function(event) {
return true;
};
Add this:
$(document).on('focusin', function(e) {e.stopImmediatePropagation();});
I was using:
jquery-1.8.2
jquery-ui-1.10.3
ckeditor 4.3.1
then I replaced: jquery-ui-1.10.3 with: jquery-ui-1.9.0 and it seems to work as expected.
If reverting back to jquery-ui 1.9 is not good for you, also look at:
jquery-ui forum ... "can't edit fields of CKEditor in jQuery UI modal dialog"
jquery-ui bugs ... "Dialog: CKEditor in Modal Dialog is not editable"
I am trying to edit an entire html using fck editor. So that should contain tags like html, body ,DOCTYPE etc. But my problem is when I submit the data, fckeditor forcefully remove the above tags from the content. I want to avoid this. Is there any configuration issue there.
-Arun
look at this config option. CKEDITOR.config.fullPage. I believe it will permit you to edit the full page (and will preserve the contents) (i haven't used it.)
'ckEditor' (as it's now known) shouldn't allow html/script tags directly within the content. However if you have the latest version there is a 'source' view which allows all the source to be edited directly and may give you what you want.
Arun User this one .This is best solution for you.
var CKcontent = false ;
$(document).ready(function(){
// setup ckeditor and its configurtion
CKEDITOR.replace( 'content1',
{
//fullPage : true,
customConfig : 'config.js' ,
toolbar : 'BasicToolbar' ,
height : "300"
});
});
Set only fullpage : false if not show HTML content otherwise set true
Note: it implemented by me in our development