I've been playing around with this for a couple of weeks now with no success...
In a CKEditor dialog, text input fields are renamed with a unique number - e.g. id: 'txtUrl' will become something like id='27_textinput'.
How do I reference this?
// I feel it should be something like:
var myfield = CKEDITOR.instances.myElement.document.$.body.getId('txtUrl');
// or maybe:
var myfield = CKEDITOR.dialog.getContentElement('info','txtUrl');
// and then:
myfield.value = 'myvalue';
But these don't work. Please help! Thanks in advance, R
This was the final solution:
var dialog = CKEDITOR.dialog.getCurrent();
dialog.setValueOf('info','txtUrl',"http://google.com");
return false;
within an onchange part of an element I now use
dialog = this.getDialog();
alert(dialog.getContentElement('info', 'grootte').getInputElement().$.id);
and it gives 'cke_117_select' as a result. (It's a selectbox)
alert(dialog.getContentElement('info', 'txtUrl').getInputElement().$.id);
gives 'cke_107_textInput'.
I think this is what you (or other visitors to this page) are looking for.
You have a page containing the CKEditor 3 and a dialog pop up. You open from this dialog, another pop up window, that is a JSP page. In order to set a value to a field in the dialog of CKEditor's parent window, you do the following:
window.opener.CKEDITOR.dialog.getCurrent().getContentElement('dialogTabId', 'dialogTabFieldId').setValue('yourValue');
This applies to CKEditor 3.
Look at the api dialog sample:
// Get a reference to the "Link Info" tab.
var infoTab = dialogDefinition.getContents( 'info' );
// Set the default value for the URL field.
var urlField = infoTab.get( 'url' );
urlField['default'] = 'www.example.com';
get
var ckValue = CKEDITOR.instances['txtUrl'].getData();
and set
CKEDITOR.instances['txtUrl'].setData(ckValue);
Related
I would like to calculate the visibility of a button based upon the content of a text area field (multi line edit box). it should contain at least some text.
I could use the onkeypress event (server) and perform a partial refresh on the button BUT I notice that the partial refresh spinner appears then when users are writing in the field. I would like to avoid this.
What options do I have?
You would be best off writing a client side script for that event. This script should show the button when there are more than 200 characters in the textarea. You will need to set the style visibility to hidden for the button initially. If the form can be edited multiple times, you will need to write this as a function and call it on page load as well as in the keypress event.
If you can use the keyup event instead of keypress, this may be better.
var textareaID = '#{id:textareaID}';
var buttonID = '#{id:buttonID}';
var textareaValue = document.getElementById(textareaID).value;
var visibility;
if (textareaValue.length > 200) {
visibility = 'visible';
}
else
{
visibility = 'hidden';
}
document.getElementById(buttonID).style.visibility=visibility;
I want to create a textarea where users can select a part of a text, and I will react according to their selection. So I need to
1) get the start and end positions of the selection text
2) get the position of the focus, if it is in the textarea and there is no selection
It seems that the functions to do so are different from an explorer to another. So could anyone tell me what is the approach to do that in Office Add-in?
I have tried the following 2 ways (ie, select a part of the text in myTextarea, click on button, and then debug the code), they don't seem to be the right functions.
(function() {
"use strict";
Office.initialize = function(reason) {
$(document).ready(function() {
app.initialize();
$('#button').click(showSelection);
});
};
function showSelection() {
// way 1
console.log(document.selection); // undefined
document.getElementById("myTextarea").focus();
var sel = document.selection.createRange(); // Uncaught TypeError: Cannot read property 'createRange' of undefined
selectedText = sel.text;
// way 2
console.log(document.getElementById("myTextarea").selectionstart); // undefined
console.log(document.getElementById("myTextarea").selectionend); // undefined
}
})();
Additionally, it would be great if one could also tell me how to realise the follows by code:
1) select a part of a text, from a start and end positions
2) set the focus at a certain position of the textarea
Edit 1:
I just tried window.getSelection() within my Excel add-in:
function showselection() {
var a = window.getSelection();
var b = window.getSelection().toString();
var c = window.getSelection().getRangeAt(0);
}
After selecting a text in the textarea, and clicking on button, I debugged step by step: the first line made a a = Selection {anchorNode: null, anchorOffset: 0, focusNode: null, focusOffset: 0, is ...; the second line returned "", the third line got an error Home.js:19 Uncaught IndexSizeError: Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index. It looks like the selection has not been successfully caught...
Here is JSBin without Excel add-in frame, which returns almost same results as above.
Use JQuery.
For instance, the following two lines get the caret position:
function showselection() {
console.log($('#myTextarea')[0].selectionStart);
console.log($('#myTextarea')[0].selectionEnd);
}
There are some plug-ins:
https://github.com/localhost/jquery-fieldselection
http://madapaja.github.io/jquery.selection/
The second one has several short samples with buttons (where we may lose selection). You could either use their API, or look into their code to see which JQuery functions they call.
If the desired selection is just the selected text in the HTML page (and not the user's selection in Excel/Word), then there are some good stackoverflow answers about accessing that selection.
One of the key features of the JavaScript APIs for Office is that they follow an asynchronous model (the code you've written above for showSelection() appears to be synchronous). I'd recommend reading the Excel and Word JS API overview pages to get a feel for how they work. As an example, here's how you'd get the text from a selection:
Word.run(function (context) {
var myRange = context.document.getSelection();
context.load(myRange, 'text');
return context.sync().then(function () {
log("Selection contents: " + myRange.text);
});
})
Then for the other specifics of your question please clarify as requested in my comment. Thanks!
-Michael (PM for Office add-ins)
I have two edit boxes in an XPage and one label.
Leave Start Date : EDIT BOX
Leave End Date : EDIT Box
Holidays Taken : label
I want to calulate the diffence in dates and get it computed in the label using the following code in onChange event of second(Leave End Date) edit box but on chaging the value of the edit box it clears the two field and nothing gets computed:
var leaveStartDate = document1.getValue("fld_Leave_Start_Date1");
var leaveEndDate = document1.getValue("fld_Leave_End_Date1");
var difference = null;
try{
var nDateStart = session.createDateTime( leaveStartDate );
var nDateEnd = session.createDateTime( leaveEndDate );
difference = nDateEnd.timeDifference(nDateStart);
difference = (Math.floor(difference/86400)) + 1;
}catch(e)
{
return e
}
document1.setValue("fld_NoOfDays",difference);
I tried getComponent("fld_Leave_Start_Date1").getSubmittedValue(), but didn't work either.
Can someone please help.
Thanks a lot in advance!
If the edit boxes are getting cleared, it sounds like you've set the event to do a full refresh instead of a partial refresh.
The other possible cause of clearing fields is if you're using Partial Execution Mode (execMode="Partial" in the source pane for the eventHandler) but have specified a execId that does not include the two edit boxes. (Partial Execution by default runs on the current component, so you should not lose the values of that Edit Box.) But I don't think that's the case.
I would like to move "click heading to sort" to "double click heading to sort". So currently i'm doing it with the following two lines:
table.unsubscribe("theadCellClickEvent", TAG.content.table.onEventSortColumn);
table.subscribe("theadCellDblclickEvent", TAG.content.table.onEventSortColumn);
However, when i do this, and i click on the heading, it will take me to folder/thead-id (since by default there is a "a" tag wrapped around the heading text.
Any idea how to do it properly?
Thanks a lot!
Jason
You have to stop the default click event. Create a new event handler for the click event that simply stops bubbling the event.
var stopEvent = function(oArgs) {
var evt = oArgs.event;
YAHOO.util.Event.stopEvent(evt);
};
table.unsubscribe("theadCellClickEvent", TAG.content.table.onEventSortColumn);
table.subscribe("theadCellClickEvent", stopEvent);
table.subscribe("theadCellDblclickEvent", TAG.content.table.onEventSortColumn);
I'm trying to set the assigned value to a YUI Menu Button in order to use values from previous operations.
Something like remembering previous choices.
For label I already know that I can change it with:
button.set("label", "my label")
unfortunatelly I cannot change the value using: button.set("value", "my value")
Any ideia on how can I do this?
Other way would be to force a selection, but I have no ideia on how to do that.
Thanks
just found out that you can use:
var menu = button.getMenu();
var item = menu.getItem(index);
button.set("selectedMenuItem", item);
all that is left for me now is finding the needed index