I'm using CKEditor. I want to remove image info tab from image upload dialog box and keep upload tab.
Try this for
Remove image info tab from CKEditor
if ( dialogName == 'image' )
{
// FCKConfig.ImageDlgHideAdvanced = true
dialogDefinition.removeContents( 'info' );
}
Related
i am using ckeditor inline , i want to customize ckeditor toolbar top and left position once toolbar is loaded at certain position. and also i want to update ckeditor.js and use in my website but when i edit ckeditor.js using beautifier , it gives error after i update and use in website.
i have tried to set custom top and left position for ckeditor toolbar but as it comes out from instanceReady event , it again reset position .
ck = CKEDITOR.inline(editableDivElement[0], {
removePlugins: 'resize, elementspath',
extraPlugins: 'ckeditor_wiris, smiley',
height: 60,
toolbar: toolbars,
toolbarLocation: 'top',
startupFocus: true,
});
ck.on("instanceReady", function (event) {
var ckeditorToolBar: any =
document.getElementsByClassName("cke");
if (ckeditorToolBar) {
ckeditorToolBar[0].style.top ="100px";
ckeditorToolBar[0].style.left="100px";
});
if there is way i can edit ckeditor.js and use in my website and also if i can set custom ckeditor toolbar position using top and left.
There is one problem when I work with ckeditor. I press on icon for adding images, then modal window appears and I put direct image link in the special field, in this moment width and height detected automatically and it writes to style for ex:
<img src='#some images direct link' style='width:SOME WIDTH;height:SOME HEIGHT'>
Can I disable this automatic function? Or I have to delete this style by myself every time?
You could write a rule for your config that would remove the style tag on elements.
var editorRulesObject = {
elements: {
img: function( el ) {
if(el.attributes.style) {
el.attributes.style = '';
}
}
}
};
CKEDITOR.on('instanceReady', function( e ) {
// Ensures that any non-styled text, or text input without any tags will be correctly styled.
CKEDITOR.instances[e.editor.name].dataProcessor.dataFilter.addRules( editorRulesObject );
CKEDITOR.instances[e.editor.name].dataProcessor.htmlFilter.addRules( editorRulesObject );
});
In 2020, since version 4.5.0, it is much easier to switch off the annoying automatic filling in of height and readiness.
New there is the config option "image_prefillDimensions".
config.image_prefillDimensions = false;
Documentation: http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-image_prefillDimensions
The user still has the possibility to fill in the height and width automatically by clicking on the button [Reset size (circle arrow)].
Is there some way to replace the default toolbar images (e.g. Bold, Italic, etc.) with Font Awesome icons?
I know this is an old issue, but on a plugin by plugin basis I've been able to add font-awesome icons to ckeditor buttons with the following code inside the plugin's init function. In my case my plugin was called trim:
//Set the button name and fontawesome icon
var button_name = 'trim';
var icon = 'fa-scissors';
//When a ckeditor with this plugin in it is created, find the button
//in the current instance and add the fontawesome icon
CKEDITOR.on("instanceReady", function(event) {
var this_instance = document.getElementById(event.editor.id + '_toolbox');
var this_button = this_instance.querySelector('.cke_button__' + button_name + '_icon');
if(typeof this_button != 'undefined') {
this_button.innerHTML = '<i class="fa ' + icon + '" style="font: normal normal normal 14px/1 FontAwesome !important;"></i>';
}
});
It hinges on knowing the class of the span inside the button, so it might not be the most convenient but it works.
The best thing is you can use Bootstrap theme on CKEditor or you can use Froala editor,It has inbuilt image uploader
my ckeditor version : 4.3.5
it's very difficult customizing.
i want to cutumize [image info] just like (1) style.
URL input include Upload file select.
remove send to server button.
or.. (2) style :: just remove tab[image info] and [send server button]
but i can't search these info. T^T plz help me.
i want to import image for my question describe. but i need 10 repution;
my question images link.
[image] : https://lh5.googleusercontent.com/-fDpngTmZ9uw/U3mmOZiNA3I/AAAAAAAAABE/_Zoom5BOCJk/w958-h671-no/qna.png
soled
CKEDITOR.on( 'dialogDefinition', function( ev ) {
var dialogName = ev.data.name;
var def = ev.data.definition;
if ( dialogName == 'image2' ) {
def.removeContents('info'); // info tab remove
def.getContents('upload').remove('uploadSubmit');
}
});
CKEDITOR.replace( 'editor1' ,
{
toolbar: 'Full',
filebrowserImageUploadUrl: '/editor/imgsave.do' // import img to server (java)
}
);
Use dialogDefinition event. See these answers (first, second) and the official how-to to know more.
Use this code instead
config.removeDialogTabs = 'image:info;image:Link;image:advanced';
How do i change the default width of the tables in CKEditor, without doing it manualy in the dialog?
For example, the default is 500, and i want it to be 400.
Regards,Elkas
I Found the answer.
In the plugins folder, look for the table folder and table.js.
Do a litle search by the number "500" (it will be near a id:txtWidth) and change it to the value you want.
Pay attention because on the top of the file there is a minWidth.
Thanks for you're answer guys.
Regards,Elkas
For CKEditor 4, you can define a default width in your config (this info from the CKEditor forums). Open config.js and paste this at the end of it, replacing '100%' with your desired default width:
// http://ckeditor.com/comment/129258#comment-129258
CKEDITOR.on( 'dialogDefinition', function( ev ) {
// Take the dialog name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition is from the dialog we're
// interested in (the "Table" dialog).
if ( dialogName == 'table' ) {
// Get a reference to the "Table Info" tab.
var infoTab = dialogDefinition.getContents( 'info' );
txtWidth = infoTab.get( 'txtWidth' );
txtWidth['default'] = '100%';
}
});
Not sure what you mean by 'the dialog'.
Using javascript code...
config.width = 850;
config.width = '75%';
I found this in the docs.
http://docs.cksource.com/CKEditor_3.x/Howto/Editor_Size
Is this any help?