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']];
}
});
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 have a select field ('5f01264e722ae') with which I would like to change the color of a text print ('.sw_poster_text2'). With a little help from another member, I uploaded the script below. However, as soon as I undo the // from the .change function my website no longer displays the print, image on which to print, and then select options. Any idea how to fix this? Here is a link of the working page: https://www.horseglamour.com/product/pagony-concours-zadeldek/
Thank you for your help.
<script>
jQuery(document).ready(function() {
var fieldId = "5f0124e773aa8"; // Change this
var defaultText = "my name"; // Change this
if (!jQuery('input[data-field-id="' + fieldId + '"]').length)
return;
var $el = jQuery('<div class="sw_poster_text2">').html(defaultText);
$el.appendTo(jQuery('.woocommerce-product-gallery--with-images'));
jQuery(document).on('change keyup', 'input[data-field-id="' + fieldId + '"]', function() {
var v = jQuery(this).val() || defaultText;
jQuery('.sw_poster_text2').html(v);
}).trigger('change');
//$("select[data-field-id='5f01264e722ae']").change(function() {
//var color = $(this).find('option:selected').data('wapf-label')
//$(".sw_poster_text2").css("color", color);
//});
});
</script>
You can alter commented out part of your script to following:
jQuery("select[data-field-id='5f01264e722ae']").change(function() {
var color = jQuery(this).find('option:selected').data('wapf-label')
jQuery(".sw_poster_text2").css("color", color);
});
or if you perfer $ to access jQuery you can reference to it in callback https://api.jquery.com/jquery.noconflict/
jQuery(document).ready(function($) {
var fieldId = "5f0124e773aa8"; // Change this
var defaultText = "my name"; // Change this
if(!jQuery('input[data-field-id="'+fieldId+'"]').length)
return;
var $el = jQuery('<div class="sw_poster_text2">').html(defaultText);
$el.appendTo(jQuery('.woocommerce-product-gallery--with-images'));
jQuery(document).on('change keyup','input[data-field-id="'+fieldId+'"]',function(){
var v = jQuery(this).val() || defaultText;
jQuery('.sw_poster_text2').html(v);
}).trigger('change');
$("select[data-field-id='5f01264e722ae']").change(function() {
var color = $(this).find('option:selected').data('wapf-label')
$(".sw_poster_text2").css("color", color);
});
});
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) {
...
I just spent whole day trying to add additional input to a image upload form in CKEditor dialog. I need to send some value through post when image is uploaded.
I've tried to add input manualy but of course this doesn't work. Any ideas?
Here is my javascript
CKEDITOR.on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'image') {
dialogDefinition.onShow = function () {
var dialog = CKEDITOR.dialog.getCurrent();
var element = dialog.getElement();
var iframe = $(element).find('iframe.cke_dialog_ui_input_file');
var form = iframe.contents().find('form');
form.append('<input type="hidden" name="addInput" value="myvalue">');
};
}
});
when using the ckeditor link dialog, I have custom code for some extra options. I would also like to grab the selected text to use - so I have called:
selectedContents = CKEDITOR.instances['my_editor'].getSelection().getSelectedText();
I want this to happen when the dialog is loaded. So I wrote an "onShow()" handler function... but that messes up the customizations that I have made to the dialog. I'm guessing that my onShow is grabbing the normal process for that event - how can I continue with the normal processing at that point?
dialogDefinition.onShow = function(evt)
{
contents = CKEDITOR.instances['my_editor'].getSelection().getSelectedText();
// now here, continue as you were...
}
Ok, I still have some issues, but the answer to this question is to grab the existing "onShow" handler before overwriting it. Use a global, then it can be called within the new handler:
var dialogDefinition = ev.data.definition;
var oldOnShow = dialogDefinition.onShow;
dialogDefinition.onShow = function(evt) {
// do some stuff
// do some more stuff
// call old function
oldOnShow();
}
Depending on Andy Wallace code:
var oldOnShow = dialogDefinition.onShow;
var newOnShow = function () {
//your code
}
and then:
dialogDefinition.onShow = function(){
oldOnShow.call(this, arguments);
newOnShow.call(this, arguments);
}
It helps me!
Correct syntax is:
/* if new picture, then open the Upload tab */
CKEDITOR.on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
var dialog = dialogDefinition.dialog;
if (dialogName == 'image2') {
dialogDefinition.onShow = CKEDITOR.tools.override(dialogDefinition.onShow, function(original) {
return function() {
original.call(this);
CKEDITOR.tools.setTimeout( function() {
if (dialog.getContentElement('info', 'src').getValue() == '') {
dialog.selectPage('Upload');
}
}, 0);
}
});
}
});