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?
Related
I'm trying to use percentages instead of a pixel for images when using CKEditor. I get the error "Width must be a number." when ever I try to add a % into either width or height.
Is there an easy way to disable the validation check or will I need to manually rewrite the validation code?
This is not doable without modifying plugin code.
The image2 plugin you are asking about uses only pixels:
https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/image2/dialogs/image2.js#L448
https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/image2/dialogs/image2.js#L75-L83
Sure you could use below code on your HTML page to disable validation:
var editor = CKEDITOR.replace( 'editor1', {
extraPlugins : 'image2'
image2_disableResizer : true
});
CKEDITOR.on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'image2') {
var infoTab = dialogDefinition.getContents( 'info' );
infoTab.get('width').validate = function() {
return true; //more advanced validation rule should be used here
}
infoTab.get('height').validate = function() {
return true; //more advanced validation rule should be used here
}
}
});
Please note however that image2 uses also the resizer which works in pixels and it could mess up your size in %. Even if you disable the resizer like in code snippet above, there is still a rule in plugin code which removes % :
https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/image2/plugin.js#L952-L953
https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/image2/plugin.js#L17
and even if you do all that, you will probably get into few other obstacles.
To summarize: without changing plugin code you won't be able to use %
I see in CKEitor 4.5 there is a new drag and drop system. I would like to drop external DIVs or SPANs into my CkEditor and have them turn into "placeholders" "fake objects" or "protected source" objects. I.e., the dropped object should turn into arbitrary HTML that's related to the content.
The available demos seem to be about uploading content, but this is different and I'd appreciate a demo ...
Yes, it is possible. CKEditor 4.5 is in the beta phase at the moment, what means there is no tutorials yet, but here is sample how to do it.
First, you need to mark your data on dragstart. You can simple set text:
dragstart( evt ) {
evt.dataTransfer.setData( 'text', 'foo' );
} );
But then you need to make your text unique, otherwise every time someone drop foo it will be recognize as your container.
I prefer to use CKEditor data transfer facade, which let you use custom data type on every browser (including IE 8+):
dragstart( evt ) {
var evt = { data: { $: $evt } }; // Create CKEditor event.
CKEDITOR.plugins.clipboard.initDragDataTransfer( evt );
evt.data.dataTransfer.setData( 'mydatatype', true );
// Some text need to be set, otherwise drop event will not be fired.
evt.data.dataTransfer.setData( 'text', 'x' );
} );
Then in the CKEDITOR you can recognize this data and set your html to be dropped. You can replace dropped content whit whatever you need. Simple set text/html data in the drop event:
editor.on( 'drop', function( evt ) {
var dataTransfer = evt.data.dataTransfer;
if ( dataTransfer.getData( 'mydatatype' ) ) {
dataTransfer.setData( 'text/html', '<div>Bar</div>' );
}
} );
You can find working sample here: http://jsfiddle.net/oqzy8dog/3/
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';
I have edited config.js to
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
config.language = 'ar';
config.contentsLangDirection = 'rtl';
contentsLanguage:'ar';
config.dialog_buttonsOrder = 'rtl';
};
But I still get the editor to be left-to-right in my Question2Answer platform. What should I do else to make my editor right-to-left?
Following HTML and Script worked for me, instead of using the global configuration file for application i used inline configuration as below -
HTML
<textarea id="editor" name="editor1"><p>Initial value.</p></textarea>
Script
<script type="text/javascript">
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 'image' dialog).
if (dialogName == 'image') {
// Get a reference to the 'Image Info' tab.
var infoTab = dialogDefinition.getContents('info');
// Remove unnecessary widgets/elements from the 'Image Info' tab.
infoTab.remove('browse');
infoTab.remove('txtHSpace');
infoTab.remove('txtVSpace');
infoTab.remove('txtBorder');
infoTab.remove('txtAlt');
infoTab.remove('txtWidth');
infoTab.remove('txtHeight');
infoTab.remove('htmlPreview');
infoTab.remove('cmbAlign');
infoTab.remove('ratioLock');
}
});
CKEDITOR.config.contentsLangDirection = 'rtl';
CKEDITOR.replace('editor');
</script>
I'm using CKEditor 3.5 to provide WYSYWYG editing in a website. When inserting an image you can provide width and height of the image, which results in HTML like follows:
<img alt="" src="/Images/Sample.png" style="width: 62px; height: 30px; " />
Since this does the resizing in the browser and in other places on the same website I use Nathanael Jones' Image Resizing Module, I'd like to get the following output instead:
<img alt="" src="Images/Sample.png?width=62&height=30" />
Is there an easy way to control the generated HTML or have I really to write my own dialog/plugin for CKEditor?
EDIT:
Adding the following lines to config.js was the solution that eventually worked for me:
CKEDITOR.on('dialogDefinition', function (ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
var dialog = dialogDefinition.dialog;
var editor = ev.editor;
if (dialogName == 'image') {
dialogDefinition.onOk = function (e) {
var imageSrcUrl = e.sender.originalElement.$.src;
var width = e.sender.originalElement.$.width;
var height = e.sender.originalElement.$.height;
var imgHtml = CKEDITOR.dom.element.createFromHtml('<img src=' + imageSrcUrl + '?width=' + width + '&height=' + height + ' alt="" />');
editor.insertElement(imgHtml);
};
}
});
The next problem is then, when editing an image, the width and height naturally are in the URL field and are missing in the dedicated fields for width and height. So I need to come up with a solution for the reverse... :-)
I kind of had the same problem, I needed to remove those attributes from the generated HTML for the image, so what I did was to override the onOK method of the uploader and insert the image element manually using the CKEditor's API, something like this:
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;
var editor = ev.editor;
if (dialogName == 'image') {
dialogDefinition.onOk = function(e) {
var imageSrcUrl = e.sender.originalElement.$.src;
var imgHtml = CKEDITOR.dom.element.createFromHtml("<img src=" + imageSrcUrl + " alt='' align='right'/>");
editor.insertElement(imgHtml);
};
}
}
This has worked for us so far.
Look at the "output html" sample, you can find there some code that changes the dimensions in images from styles to attributes, so you can adjust it to rewrite the URL.
I don't have enough points to comment on that previous answer. but in respect to your error: CKEDITOR.currentInstance returns undefined.
That is strange because CKEDITOR is global, but you shouldn't have to resort to that.
Within the OK function invocation, you have access to "editor", you shouldn't have to get the instance.
just a suggestion.
Best bet might be to "recreate" the src (and possibly the style) field's behavior. I've do something similar. (but not as complex)
Start with the original code (from plugins/dialog/image.js) and create setup and commit logic that produces (and parses) the markup you're looking for.
Then during dialog definition
Delete Originals
Add your "custom" fields
style field not sure, maybe just leave it in the dialog, but stub out it's commit logic.
I added my field to the dialog...
var infoTab = dialogDefinition.getContents( 'info' );
// Move the ID field from "advanced" to "info" tab.
infoTab.add( idField_config);
var idField_config = {
type : 'text',
label : 'Name',
id : 'linkId',
setup : function( type, element ) {
//if ( type == IMAGE )
this.setValue( element.getAttribute( 'id' ) );
},
commit : function( type, element ) {
//if ( type == IMAGE ) {
if ( this.getValue() || this.isChanged() )
element.setAttribute( 'id', this.getValue() );
//}
}
};
Issues I faced.
New fields get added to end of
dialog.
Pieces of the original code
( type == IMAGE ) isn't valid (Love to know why but felt comfortable it was safe to comment for my usage)
You might face problems with the markup rules undoing your hard work, but "output html" sample" suggestion should help you weed through that issue.