My ckeditor version is 4.4.7
I want to change the default target to every link of the text that I add to ckeditor and I found this code
CKEDITOR.on('dialogDefinition', function(ev) {
try {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'link') {
var informationTab = dialogDefinition.getContents('target');
var targetField = informationTab.get('linkTargetType');
targetField['default'] = '_blank';
}
} catch (exception) {
alert('Error ' + ev.message);
}
});
CKEDITOR.on('instanceReady', function(ev) {
var editor = ev.editor,
dataProcessor = editor.dataProcessor,
htmlFilter = dataProcessor && dataProcessor.htmlFilter;
htmlFilter.addRules({
a: function(element) {
element.attributes['target'] = "_blank";
}
});
});
I added this code to link.js file of ckeditor folder and it's working
but not correctly
I mean if I copy the text that have a link from word to editor,it doesn't add target_blank to a href automatically
but I have to click 'edit link' on it and see the default target already on _blank
then I click ok and save then it works.
but I want it to auto set target="_blank" on every link that I copy from word.
anyone can help?
thanks.
Where did you put your code?
I changed
type : 'select',
id : 'linkTargetType',
label : commonLang.target,
'default' : 'notSet',
in _source\plugins\link\dialogs\link.js to
type : 'select',
id : 'linkTargetType',
label : commonLang.target,
'default' : '_blank',
and this works fine.
Editing inside plugin files is not an ideal solution.
The best solution would be to add this to your js file
CKEDITOR.on( 'dialogDefinition', function( ev ) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName == 'link' ) {
var targetTab = dialogDefinition.getContents( 'target' );
var targetField = targetTab.get( 'linkTargetType' );
targetField[ 'default' ] = '_blank';
}
});
I added this code to link.js file of ckeditor folder and it's working but not correctly
You use this code directly on HTML page were you initialize the editor and not in link.js file:
var editor = CKEDITOR.replace( 'editor1', { });
CKEDITOR.on('dialogDefinition', function(ev) {
...
Related
I have no idea where to look to figure this out. I'm trying to change a select elements label that's automatically generated with ckeditor. I've looked through the documentation, but I cannot find a solution to modifying the label. Instead of saying align, I need it to say something like, "FOO Align" I'm at a loss here. I've got the parent divs id. I've tried doing the following
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
document.getElementById('cke_79_label').innerHTML = 'FOO Alignment';
});
As Well as,
function alignmentLabelReplace() {
document.getElementById('cke_79_label').innerHTML
= 'FOO Alignment';
}
So to kind of condense the overall goal is to change the label of a ckeditor select box. The ckeditor select box is within the table element, that pops up in a modal. How do I manipulate this?
EDIT: I'm trying to take this stackoverflow article to fix to my purposes.
I've wrote this up, but. Still no luck.
CKEDITOR.dialog.add( 'dialogDefinition', function ( ev ) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName == 'table' || dialogName == 'tableProperties'){
return {
contents: [
{
id: "cmbAlign",
type: "select",
label: 'Table Alignment',
}]
};
}
});
So. I got ahold of a senior dev with the company I work for and we found a solution. I've tested it on my environment, it works for me. I've tried to write up some explanatory text as well for future individuals. Please forgive me if my words or syntax is incorrect.
This bit of documentation may help as well.
(function () {
CKEDITOR.on( 'dialogDefinition', function( ev ) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName == 'table' || dialogName == 'tableProperties'){
//Get info tab
console.log(dialogDefinition);
// So through this we get the contents of the table ui.
var infoTab = dialogDefinition.getContents( 'info' );
console.log(infoTab);
//no that we've got the table dialed down a bit more
// we're able to see the various elements.
//now, I've made a variable selectLabel, where I take infoTab apply .get
// with the id 'cmbAlign'
var selectLabel = infoTab.get('cmbAlign');
//then as we can see here, i take the variable selectLabel
//target the array element in square brackets, ['label']
// set the new varaiable, and it works!
selectLabel['label'] = 'Table Alignment';
}
});
})();
I'm trying to modify the contents of a dialog field based on another field. I've tried the replace method, but I'm throw this error: The editor instance "edit-body-und-0-value" is already attached to the provided element.
The basic goal is to add a class to the table. Using the table dialog I figured if I could fill in the advCSSClassess default value, then replace the editor, I'd now have a dialog in with the class attached.
Here's my plugin code:
CKEDITOR.on('dialogDefinition', function( ev ) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName === 'table' ) {
var tableProperties = dialogDefinition.getContents( 'info' );
var advancedTab = dialogDefinition.getContents( 'advanced' );
var classField = advancedTab.get( 'advCSSClasses' );
classField['default'] = 'stackable';
tableProperties.add({
type: 'checkbox',
id: 'stackTable',
label: 'Make table responsive',
'default': false,
onClick: function( button ) {
classField[ 'default' ] = 'stackable';
var thisEditor = CKEDITOR.instances;
CKEDITOR.replace('edit-body-und-0-value', thisEditor);
}
});
}
});
I've been able to hack it in like this in the click handler, but that doesn't seem sustainable.:
var classInput = $("label:contains('Stylesheet Classes')").attr('for');
$('#' + classInput).val('stackable');
I've used this and this for reference.
Since this question got a new request, here's the code that I ended up with. This is old enough that I can't remember the details, but I hope this helps.
CKEDITOR.on('dialogDefinition', function( ev ) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName === 'table' ) {
var tableProperties = dialogDefinition.getContents( 'info' );
tableProperties.add({
type: 'checkbox',
id: 'stackTable',
label: 'Make table stackable on mobile. Does not work with header row.',
'default': false,
onClick: function( button ) {
var classInput = CKEDITOR.dialog.getCurrent().getContentElement('advanced', 'advCSSClasses').getElement().$;
$('#' + classInput.id).find('input').val('sy-stacktable');
}
});
}
});
I want to remove two options from the linkType select element on the 'Link' tab in CKEditor.
How do I do this? It says in the docs to use the remove function but I don't understand how to point it at the right element.
http://docs.ckeditor.com/#!/api/CKEDITOR.ui.dialog.select
We are using this to remove linkType and other extra stuff from dialog:
CKEDITOR.on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'link') {
//REMOVE NOT REQUIRED TABS
dialogDefinition.removeContents('upload');
dialogDefinition.removeContents('advanced');
var infoTab = dialogDefinition.getContents('info');
//REMOVE COMBO
infoTab.remove('linkType');
}
});
EDIT:- As described in this page and this answer, you can get element and specify options for it.
var infoTab = dialogDefinition.getContents('info');
//REMOVE COMBO
var lt=infoTab.get('linkType');
lt['items']=[['URL','Link to URL']];
I just found the answer here: http://ckeditor.com/forums/Support/Remove-options-link-drop-down
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 on (the "Link" dialog).
if (dialogName == 'link') {
// Get a reference to the "Link Info" tab.
var infoTab = dialogDefinition.getContents('info');
// Get a reference to the link type
var linkOptions = infoTab.get('linkType');
// set the array to your preference
linkOptions['items'] = [['URL', 'url'], ['Link to anchor in the text', 'anchor']];
}
});
Like the topic says: How to add default classname on the images i upload with CKEditor?
Cant relly find any information regarding this
CKEDITOR.on( 'instanceReady', function( ev )
{
var editor = ev.editor;
var dataProcessor = editor.dataProcessor,
htmlFilter = dataProcessor && dataProcessor.htmlFilter;
htmlFilter.addRules(
{
elements:
{
$: function (element) {
if (element.name == 'img') {
if (!element.attributes['class']){
element.attributes['class'] = "helloworld";
}
}
return element;
}
}
});
});
http://jsfiddle.net/z6y8q6rm/2/
I want to do some stuff with the image that is added using Image toolbar button in CKEditor.
I actually want to get the url and modify if required.
How can I do it?
I am able to do that stuff using dataFilter but only when image is directly pasted into the
editor. But dataFilter rule doesn't execute when image is added using default Image button in editor.
CKEDITOR.replace( 'idContent' );
CKEDITOR.on( 'instanceReady', function( e ) {
CKEDITOR.instances.idContent.dataProcessor.dataFilter.addRules( {
elements: {
"img": function (element) {
var imageSrcUrl = element.attributes.src;
// Do some stuffs here.
}
}
} );
} );
I achieved my purpose using following code
CKEDITOR.on( 'dialogDefinition', function( ev ) {
// Take the dialog name and its definition from the event data
var dialogName = ev.data.name,
dialogDefinition = ev.data.definition;
if ( dialogName == 'image' ) {
var onOk = dialogDefinition.onOk;
dialogDefinition.onOk = function( e ) {
var input = this.getContentElement( 'info', 'txtUrl' ),
imageSrcUrl = input.getValue();
//! Manipulate imageSrcUrl and set it
input.setValue( imageSrcUrl );
onOk && onOk.apply( this, e );
};
}
});