So I am writing a plugin for ckeditor (#mentions).
When you type some characters (example "#John") a drop down will appear of a list of Johns that the user can select . When the users selects the drop down they want, it needs to remove the the "#John" text and insert an element that was retrieved from the dropdown. The problem occurs when trying to insert text, remove some text and setting the currsor position.
The Code
var html = '<span>InsertedElement</span> ';
// Create the Element to insert
var newElement = CKEDITOR.dom.element.createFromHtml(html, mentions.editor.document);
//Insert the element
mentions.editor.insertElement(newElement);
//Get a new bookmark
var tempBookMark = mentions.editor.getSelection().createBookmarks(true);
// get the data
var edata = mentions.editor.getData();
// set it with the exact same info so not changes (just for the test)
mentions.editor.setData(edata);
//set the bookmark
mentions.editor.getSelection().selectBookmarks(tempBookMark);
//focas on that position
mentions.editor.focus();
The issue
This works just fine on chrome however on IE11 after the text has been removed, when I try to access the mentions.editor.getSelection() I get "permission denied" error. I cannot set the bookmark and the focus is moved to the start of the ckeditor.
[Update]
A further test I performed narrowed down the issue. Commenting out the mentions.editor.setData(edata); line it stops erroring. If I use the setData function on the editor instance and then try to to run the GetSelection() on the Editor instance it errors (permission denied) in IE11 but works in Chrome. Its seems the setData function locks the editor in some way in IE11? I have simplified the code to allow it to be more easily replicated.
the Editor#setData is an asynchronous function. You cannot use selection right after setting data - you have to wait until everything is ready. Therefore setData accepts callback.
mentions.editor.setData( edata, function() {
//set the bookmark
mentions.editor.getSelection().selectBookmarks(tempBookMark);
//focas on that position
mentions.editor.focus();
} );
Related
I have a text field with the ID chat_msg_box which is for a chat room which has a private message feature.
It's easy to mix up the command (the internal command to send a private chat message) so this script looks for the input /msg Username>> and turns the background text field color to a light grey.
That part worked out fine but I realized I needed to change it back to #ffffff for when the user sends the text or if they change their mind and delete it. Once I put in the else statement, it all screws up.
That's why the code below includes a second if statement instead because I've been trying different ways to accomplish the task. No matter what, when I load the page I try to type and nothing enters; it freezes. If I switch to another screen and back it returns and everything I tried to type enters into the box. It then works as intended.
Without an else, else if or second if statement this works (but not what I fully need).
regex = /\/msg\s[a-zA-Z\s_-]+>>/ // All characters allowed for username.
var textInputElement = document.getElementById('chat_msg_box');
textInputElement.addEventListener('keyup', function(){
var text = textInputElement.value;
if (regex.test(text)) {
document.getElementById('chat_msg_box').style.background = "#d2d2d2";
}
if (!regex.test(text)){
document.getElementById('chat_msg_box').style.background = "#ffffff";
}
});
The issue seems to be affecting Firefox browser.
Here's what happens:
page starts with empty input
one character is pressed
keyup handler is called which changes style.background = "#ffffff"
for some reason Firefox applies the styling incorrectly and text becomes covered with white background (invisible)
clicking outside the input element reveals the text that was entered.
This is an issue with setting background and in how Firefox applies it. I'll see if I can reproduce and report a bug to Mozilla.
I was able to get it working cross-browser by changing style.background to style.backgroundColor.
regex = /\/msg\s[a-zA-Z\s_-]+>>/ // All characters allowed for username.
var textInputElement = document.getElementById('chat_msg_box');
textInputElement.addEventListener('keyup', function(){
var text = textInputElement.value;
if (regex.test(text)) {
document.getElementById('chat_msg_box').style.backgroundColor = "#d2d2d2";
}
if (!regex.test(text)){
document.getElementById('chat_msg_box').style.backgroundColor = "#ffffff";
}
});
<input id="chat_msg_box">
I'm trying to be able to get the details of the last selected cell - value, address, etc.
So far, I couldn't achieve this - the closest I got to is getting the currently selected cell, which apparently doesn't serve my needs.
Thanks!
If you are trying to get a reference to the previously selected cell, the following works. Create a global variable called lastRangeAddress. Then assign a handler to the Workbook.onSelectionChanged event. The following is a handler that turns the current cell yellow and last (that is, previously selected) cell selected blue. The easiest way to see this work is to install Script Lab in Excel. Open it in Excel and open the Selection Changed snippet. Add the global variable just below the button handler assignment statements near the top: let lastRangeAddress: string;. Then replace the onSelectionChange method with the one below. Open the Run pane in Script Lab, press the Add event handler button, and then start clicking cells.
To read properties of the lastRange, you would need to load them and sync.
async function onSelectionChanged() {
tryCatch(() => Excel.run(async (context) => {
if (lastRangeAddress) {
const lastRange = context.workbook.worksheets.getActiveWorksheet().getRange(lastRangeAddress);
lastRange.format.fill.color = "blue";
}
const range = context.workbook.getSelectedRange();
range.format.fill.color = "yellow";
range.load("address");
await context.sync();
lastRangeAddress = range.address;
}));
}
I'm developing a simple plugin for Etherpad to edit formulae using MathQuill. When the toolbar is opened, I'd like the cursor to get into the edit field. The field is mathquillified like this:
var MQ = MathQuill.getInterface(2);
var mathQuillEditor = MQ.MathField(mathQuillField, {
spaceBehavesLikeTab: true,
handlers: {
edit: function() {
latexEditor.value = mathQuillEditor.latex(); // update LaTeX field
jQuery(latexEditor).change(); // fire updating of CodeCogs
}
}
});
To get cursor in the edit field, I've tried:
mathQuillEditor.moveToRightEnd();
which visually puts the cursor there, but the blue margin (that points that the editor is active) does not appear and typing doesn't make any effect; and
mathQuillEditor.el().focus();
which doesn't make any visual difference. I've also tried to combine those, but still no success. Any ideas how to do this?
Ok, this wasn't documented, the answer is simply
mathQuillEditor.focus();
After I've rised an issue, this was explained and docs now contain this method.
i am using jquery autocomplete plugin.i defined autocomplete on a text input element.i defined many methods also on autocomplete.i can't share whole code.but giving brief idea about my scenario.here is small code snippet
j$(".quick-text-search").autocomplete({
source: function(request,response){},
search: function(){console.log('coming to search');},
});
i defined source and search method.when i type in .quick-text-search element everything is working fine and its showing list items also. but when any other element is generating search event then no list is showing.for example from element checkbox when checkbox value is changed .here is code snippet of that
$('input:checkbox').change(function(){
// j$(this).parent().addClass('active');
var catList = getSelectedValues('category-selected');
console.log("catlist");
console.log(catList);
j$(".quick-text-search").autocomplete("search", "");
});
i think it should call search method .so there should something in browser console.but there is no 'coming to search' in browser console. can anyone guideline why and how to generate search event in jquery for autocomplete??
No search will happen if the text length is less than the min options
If you go to the jQuery UI sample page: http://jqueryui.com/resources/demos/autocomplete/default.html
and you run the following into the console, nothing happens since the min length is 1.
$("#tags")
.autocomplete("search", "");
If you change it to search for "a", it will show the results
$("#tags")
.autocomplete("search", "a");
Now if we change the min length to zero and run the same code again the options open up
$("#tags")
.autocomplete("option","minLength", 0)
.autocomplete("search", "");
I am using EpicEditor in one my project. So as per the doc, I have added textarea property to my textarea id, so when page load first time all content from textarea is showing in the EpicEditor. Works great!!!
PROBLEM:
I am getting real-time updates from server for that particular record and then I am updating the form fields value accordingly. So I am not able to set the new value in the EpicEditor. I have updated the reference textarea value but it will not sync to EpicEditor.
SOLUTION
I want to set the new value in the EpicEditor whenever some updates occurred on the reference textarea.
var self = this;
var opts = {
container: 'epiceditor',
textarea: 'myTextArea',
basePath: 'epiceditor',
...
}
var editor = new EpicEditor(opts);
self.editor.load();
// Now, import some content into the editor
// Since I don't know the filename I'm using `null` which will default to the current filename
editor.importFile(null, 'This is to be displayed in the epic editor');
This should automatically update the textarea. If it does not update the textarea that's a bug and please send a ticket with your code and a reproducible case:https://github.com/OscarGodson/EpicEditor/issues/new
You can do something like this:
after you create an instance of epic editor with your options (opt) and load it. Put the text that you want to place in the epic editor as textarea value like this - $("#myTextArea").val('your value')) and call me.editor._setupTextareaSync();
var me = this;
var opts = {
container: 'epiceditor',
textarea: 'myTextArea',
basePath: 'epiceditor',
-------
-------
}
var editor = new EpicEditor(opts);
me.editor.load();
$("#myTextArea").val('This is to be displayed in the epic editor');
me.editor._setupTextareaSync();
Cheers!