Lose selection after inserting in word using office.js - javascript

Im builing an office app that will run inside Microsoft Word. I'm using office.js create it.
So far I have been able to insert text into the document using the API, but the text it inserts, appears selected, making the app UX suffer since the user has to make one extra click to lose focus to insert another text without replacing the inserted one.
Here is how the code looks like:
function insertEquation()
{
Office.context.document.setSelectedDataAsync("`x = (-b +-sqrt(b^2-4ac))/(2a)`", { coercionType: 'text' });
}
I just want the text not to appear selected.
Thanks in advance.

To insert some text in the document I would insert a Paragraph like so:
function insertText(text) {
Word.run(function (context) {
context.document.body.insertParagraph(text, Word.InsertLocation.start);
});
}

Related

Creating a tooltip on word(s) in a text editor (Google Docs) using JavaScript/CSS

Intro:
I'm working with Google Docs and have been trying (and struggling) to create a tooltip that pops up on selected (highlighted with cursor) words after the click of a button, for the purpose of creating notes for studying.
For example, if I have the words "Dynamic Programming" and I want to add the definition of it to the instances of "Dynamic Programming" so that when I hover/click on it, the definition will appear and I won't have to constantly scroll around or CTRL+F for it.
My question is if there is any advice on how to attach a tooltip to the selected text. I'm thinking of maybe creating a class="tooltip" and altering the inner HTML to include this class using xpath selection, but I'm struggling to put this idea into place. Are there any suggestions for how to approach this issue?
I've tried altering the selected text using the Document.ExecCommand(), like bolding it but there are no results. I see that this command is deprecated but I'm not sure what else I can use in its place. I wanted to use it's insertHTML().
My code so far:
I'm currently able to get the user's text selection (to attach the tooltip to), although it doesn't work entirely as planned. Even if you select only one word, it returns the entire line.
function createPopup(text) {
var text = [];
var selection = DocumentApp.getActiveDocument().getSelection().getSelectedElements();
if (selection) {
for (var i = 0; i < selection.length; i++) {
text.push(selection[i].getElement().asText().getText());
}
DocumentApp.getUi().alert(text);
}
}
Answer:
Unfortunately, this is not possible.
More Information:
The tool-tip-like pop-ups that show for hyperlinks such as this one are not customisable and not a feature that is currently in Google Sheets.
Workaround:
You can use comments on cells which act similarly to these tooltips: hovering over the cell will reveal the comment like so:
Feature Request:
Alternatively, if you would like something more customaible than cell comments, I would suggest filing a feature request to Google with the details.
You can do this from the Google Sheets UI, by following the Help > Help Sheets improve menu item.
There is also a feature request here which details being able to add and manipulate comments directly from Google Apps Script, so add a star to the issue to help its visibility.

Issues with tinyMCE and 'mceAddEditor'

So I have a page that uses JavaScript to dynamicaly add <textarea>s. I need these text areas to use tinyMCE. I am using tinyMCE v4.
I have an init function for tinyMCE
function TinyMceEditConfig() {
tinymce.init({
selector: '.editor'
});
}
then i call the function
TinyMceEditConfig();
then i create dynamic text areas. Basically, someone selects they want to enter text from a drop down list. once they select it the text area is generated. when a user clicks the dropdown it calls a function that contains this code (my brackets may be messed up here...dont pay attention to that, lol, they are fine in my code, just look at the meat)
return $('<div>', {
'css': {'display': 'none'},
'html': [
$('<textarea>', {
'value': this.text_value,
'placeholder': this.placeholder_text,
'class': "editor"] });
};
so at this point, i can click the dropdown to generate the text area (plain text). if i refresh the page tinyMCE kicks in and everything is fine. looking around online the following code is supposed to fix my problem so that tinyMCE will show as soon as the field is added. this is in my code immidiatly after i call the last code snipit.
tinymce.EditorManager.execCommand('mceAddEditor', false, ".editor");
however, it does not.....any advice?
You can't call init() on a textarea until it exists on the page. If I understand your comments above you are first invoking your TinyMCE init() function and then later adding textarea elements to the page. This won't work as the init() will only handle things that already exist on the page.
When you dynamically add the new textarea to the page you then need to call tinymce.init() after the textarea is part of the DOM in order to have TinyMCE appear in place of the textarea.
It might help to create a TinyMCE Fiddle (or CodePen etc) to show what you are actually doing as that might help people see where things are failing.

How to insert text dynamically in CKEDITOR

I use plugin CKEDITOR for word editor in my web. Inside the editor I have a table which have two columns . I want to achieve that in the first column if the user input number it will add to (50) and the result automatically appear in the second column. That is very easy using Jquery but it does not work. Tried codes:
function insertIntoCkeditor(str){
CKEDITOR.instances['editor1'].insertText(str);
}
but this code insert automatically above the text area of the editor.
Use
setData()
It will remove the existing data in the ckeditor and and it will replace it with 'str' variable content.
function insertIntoCkeditor(str){
CKEDITOR.instances['editor1'].setData(str);
}
I am using insertHtml : It will put the text at cursor position and no removal of existing text. Its like updating the content of ckeditor. this separates it from setdata()
function InsertHTML(HTML)
{
CKEDITOR.instances['editor1'].insertHtml(HTML);
}
and it works fine. ;)
CKEDITOR.instance['editor1'].insertElement(str);
It will be insert text in cursor position

How to make browser page search (Ctrl-F) start in specific div

We have a simple html layout with a nav div and content div. In some instances, the nav panel can have a lot of content.
When you use the default browser page search, Ctrl-F, the search begins in the nav div and may require several "next" clicks before the content panel is accessed (depending on the search term).
Is there any method of forcing the browser page search to start in a specific div?
There is a way to create a selection with javascript...
Now, if you select some text and then search something with the find browser tool...
The search result must start from that point.
(even if the results show all matches in the page, the first result starts where the user has the text selection)
So, if we join this two.. we can have an approach of what you need...
something like:
$(window).on('keydown', function (event) {
if ((event.ctrlKey || event.metaKey) && (String.fromCharCode(event.which).toLowerCase() == 'f')) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById('search_from_here'));
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById('search_from_here'));
window.getSelection().addRange(range);
}
}
});
Check this jsFiddle for an example http://jsfiddle.net/gmolop/tdo7p1o5/
Important!: The focus must be on the "result iframe" for this example to work (in jsfiddle)
It is not possible to select a specific part of the page for the browser to search through when using CTRL+F.
The browsers search through the entire document it has loaded.
You could of course use JavaScript to to detect to press of both the CTRL key and the F key, and on that remove all data from the document, and only leave what you want them to search through. But that would neither be a good or a pretty solution considering that you would remove the most of your entire website, and the user would think something is broken.
Create a custom search field on your website instead.

jQuery not updating SOME spans

I am building a web-based tool for the role-playing game GURPS. Data is maintained in several XML files that are loaded into arrays. Based on changes the user makes, data is re-populated into various spans, inputs and dropdowns from the arrays. No problem so far.
To give the user more feedback, I have a added an anchor that does a hover pop-up that shows the details of the current weapon. For the initial coding, these values were hard-coded while I worked out the rendering issues. Still no problems yet.
Now I am trying to actually populate the hover pop-up with real data. I can not get it to load the real data into the span! I have debugged the function and am certain that I have extracted the data I want. I have used similar lines of code to populate other parts of the web page.
Specifics: I want to replace the "aa" in the span below:
<span id="weaponName1" name="weaponName1" class="weaponName">aa</span><img src="Images/Firearms/Makarov_Suppressed.jpg">
The code I am using to try to re-populate the span is:
function loadWeaponStats(person, weaponID) {
// Load stats of the current weapon into the "Details" anchor fly-out
for (xx1=0; xx1<WeaponsArray.length; xx1++) {
if (weaponID == WeaponsArray[xx1][0]) {
weaponName = WeaponsArray[xx1][1];
alert("weaponName: "+weaponName+"\nperson: "+person);
$("#weaponName"+person).val(weaponName);
xx1 = WeaponsArray.length; // Kill the loop
}
}
}
The alert() is simply to confirm that I have the correct data. The following line should re-populate the span, but it does not.
All HTML, CSS & JavaScript can be found at GURPS Combat Calculator
Pulling out what little hair I have left.
Thanks
You can also do as below:
$("#weaponName"+person).text(weaponName);
you can't use Val() method here.

Categories