I'm adding a Jodit editor to a webpage. I'd like to be able to paste formatted text from, say, MS Word, into the editor. I can paste text that does not call the little pop-up for pasting html text, but not text with formatting. The console logs a warning that addRange(): The given range isn't in document. Indeed, logging window.getSelection().rangeCount returns 0 (instead of 1 in other cases). I have no idea what is wrong as pasting from various programs, of course, works on the website. Am I missing an event?
The problem was that the editor was in an ag-grid cell. The different selections in the dialog box when pasting from MS Word into the editor lay outside of the ag-grid cell, and therefore clicking in the dialog ended the ag-grid session mid-edit!
As the behavior I was looking for is to keep the formatting, I simply turned off the dialog box (askBeforePasteFromWord: false, askBeforePasteHTML: false). To still handle the pasting from MS Word (because MS Word), added in Jodit's author's code to auto-handle (https://github.com/xdan/jodit/issues/197):
jodit_editor = new Jodit(text_area_element, {
hotkeys: {
redo: 'ctrl+z',
undo: 'ctrl+y,ctrl+shift+z',
indent: 'ctrl+]',
outdent: 'ctrl+[',
bold: 'ctrl+b',
italic: 'ctrl+i',
removeFormat: 'ctrl+shift+m',
insertOrderedList: 'ctrl+shift+7',
insertUnorderedList: 'ctrl+shift+8',
openSearchDialog: 'ctrl+f',
openReplaceDialog: 'ctrl+r',
},
events: {
processPaste: function(event, html){
jodit_editor.selection.insertHTML(html);
jodit_editor.tempContent = jodit_editor.getEditorValue();
},
afterPaste: function(event){
let el = $('<div></div>');
el.html(jodit_editor.tempContent ? jodit_editor.tempContent : jodit_editor.getEditorValue());
jodit_editor.setEditorValue(el.html());
jodit_editor.tempContent = null;
},
},
askBeforePasteFromWord: false,
askBeforePasteHTML: false
});
Related
In Tabulator - when using the history module and - the function undo(): It seems that the cell flag isEdited() doesn't get cleared when the undo undoes a cell edit.
I want to mark all edited cells in a table through CSS, but after I did an undo() on the table I noticed that the edit markings were not removed - even though the cells got "undone" as they should.
To mark edited cells, I use a function that look like this:
const setEditedCellsVisibility = () => {
document.querySelectorAll(".tabulator-cell").forEach( element => {
element.classList.remove('edited');
})
//(The "Table" is set up elsewhere, but is a normal tabulator table)
Table.getEditedCells().forEach( cell => {
cell.getElement().classList.add('edited')
})
}
Do I need to "manually" clear the flag for cell.isEdited() after each Table.undo() call?
I'm developing an application that needs to launch Excel, but the client wants Excel to be hidden. So far nothing very complicated, but when I launch Excel a 2nd "detached" menu bar is displayed (see the photo below), even when I hide Excel, this bar is visible.
Is there a way to not show it at all? Even if I want to show Excel for debugging?
Here is the bar:
enter image description here
I specify that when I open Excel normally, I do not have this additional menu bar.
I also specify that I launch a macro in Excel (it launches me solvers This is why I use Excel).
Code for open application:
private bool InitExcel(bool Visible)
{
try
{
//Démarre Excel et récupère l'application
_ApplicationXL = new Microsoft.Office.Interop.Excel.Application();
_LesWorkBooks = _ApplicationXL.Workbooks;
_ApplicationXL.Visible = Visible;
return true;
}
catch (Exception e)
{
MessageBox.Show(e.Message);
return false;
}
}
Thanks
I just use :
_ApplicationXL.Visible = Visible;
This hides excel well, but the bar remains displayed. Is a cause of using the macro to start Solvers, macro in VBA?
I have a Tabulator (4.9.3) with values that use an editor of type text. As I tab through the table, I want each value to be selected so I can overwrite it without having to clear it first. I have tried putting the usual range selection code into the cellEditing callback and the Tabulator source code where the input gets created. Here is one variation of the code (I can't show them all because the node differs based on context):
try {
if (document.selection) {
// IE
var range = document.body.createTextRange();
range.moveToElementText(input);
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(input);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
}
} catch (e) {console.log(e);}
If I double-click on the cell, the value selects as desired. How can I get this to work with keyboard navigation as well?
Since the editor is not assigned an id, finding a selector that could find it reliably was problematic without editing the source code. Since I was going to have to edit the source, I ended up adding the following line to the onRendered function of the input element under Edit.prototype.editors.
input.select();
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)
My question is exactly opposite of this question. So what I'm trying is I'm trying to find a way to lose focus on a cell after user selects an item from the autocomplete combobox in that cell.
$input.autocomplete({
delay: 0,
minLength: 0,
source: args.column.options,
select: function (event, ui) {
$input.val(ui.item.label);
grid.getEditController().commitCurrentEdit();
return false;
}
});
I used this code to lose focus indirectly after finishing with editing. It works fine, however, the cell stays selected somehow.
grid.getEditController().commitCurrentEdit();
I also tried the code below to lose focus but it throws error everytime when I run the code.
grid.setActiveCell();
grid.setSelectedRows(-1);
After selecting an item from the autocomplete combobox, I want the grid to lose focus and select nothing on the viewport of the grid.
Thanks for your answers in advance.
Try calling grid.resetActiveCell().
There was a commit made to the master branch last week that might address your issue: Fix keyboard focus getting trapped when cell has tabbable elements.
You can achieve it as follows,
if (grid.getActiveCell()) {
var row = grid.getActiveCell().row;
var cell = grid.getActiveCell().cell;
grid.gotoCell(row, cell, false);
}