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';
}
});
})();
Related
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 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']];
}
});
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 );
};
}
});
If I have two HTML elements that should always contain the same inner HTML text, what is the most elegant way to update them both at the same time?
For example:
<head>
<title id="pageTitle">My Application</title>
</head>
<body>
<h1 id="screenTitle">My Application</h1>
</body>
I would like the innerHTML of screenTitle and pageTitle to remain identical whenever a JavaScript function changes one of them.
I know I can iterate through the pageTitle and screenTitle elements, updating each of them whenever I change the string "My Application", but is there a more elegant way?
document.title.innerHTML is read-only in IE. This supposed to be a cross-browser method:
document.getElementById('screenTitle').innerHTML = document.title = 'My Application';
Instead of a literal value you can use a variable ofcourse.
If you really need something "elegant" (=== exotic), you can use a setter:
var page = {
set title(text) {
document.getElementById('screenTitle').innerHTML = document.title = text;
}
};
When ever you need to change the titles, just set it: page.title = newTitle;. Only you need to care of, is that you can refer page object from the current scope. Also this will only work in modern browsers.
Use a single function that encapsulates writes to both elements. So instead of directly using DOM methods, the rest of your code would use a function such as:
function setTitle(newTitle)
{
document.getElementById('pageTitle').innerHTML = newTitle;
document.getElementById('screenTitle').innerHTML = newTitle;
}
Of course this could be optimized/DRYed/refactored/overengineered ad nauseam...
function setTitle(newTitle)
{
if (setTitle.elements)
{
var id = document.getElementByIdl
setTitle.elements = [id('pageTitle'), id('screenTitle')];
}
setTitle.elements.forEach(function (elt)
{
elt.innerHTML = newTitle;
});
}
You should make a JS method that updates both simultaneously as long as you are in control of all the code that is going to modify the elements. Something like:
function updateElementGroup( newInnerHTML ) {
document.getElementById( 'pageTitle' ).innerHTML = newInnerHTML;
document.getElementById( 'screenTitle' ).innerHTML = newInnerHTM;
}
Which you can use like this:
updateElementGroup( 'New Text' );
If you are not in control of all the code you could set up some listeners to catch whenever one is changed and update the other one accordingly, something like this:
var isUpdating = false;
var elements = [
document.getElementById( 'pageTitle' ),
document.getElementById( 'screenTitle' ),
];
for ( i in elements ) {
elements[i].addEventListener( 'DOMCharacterDataModified', function( evt ) {
if ( isUpdating ) {
return;
}
isUpdating = true;
for ( i in elements ) {
elements[i].innerHTML = evt.newValue;
}
isUpdating = false;
} );
}
Using jQuery:
$('#pageTitle').bind('DOMSubtreeModified', function() {
if ($('#pageTitle').html() != $('#screenTitle').html())
$('#screenTitle').html($('#pageTitle').html());
});
$('#screenTitle').bind('DOMSubtreeModified', function() {
if ($('#pageTitle').html() != $('#screenTitle').html())
$('#pageTitle').html($('#screenTitle').html());
});
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);
}
});
}
});