How to get CKEditor insertHTML() working on Safari - javascript

I am working on a project, where at some point it is needed to insert a HTML from ajax call at caret position (not start, not end, somewhere among the contents, that are already there).
Firefox, Chrome, Edge works fine on Windows and Mac, but in Safari on Mac, the HTML is inserted at the beginning of content, no matter where the caret is.
Safari 15.6.1
macOS Catalina, v10.15.7
CKEditor 4.9.2
var editor = CKEDITOR.inline('myEditor_1', {
toolbar: 'basic',
floatSpaceDockedOffsetY: 32,
});
let data = '<p>There is some HTML from AJAX to be inserted at caret position</p>';
CKEDITOR.instances.myEditor_1.insertHtml(data);
I tried to get current range by getSelection().getRangeAt(0) or getSelection().getRanges()[0] and pass it to the editor.insertHtml() third parameter, but I get either undefined or Range object, that has always both offsets equal to 0, so its useless.

Related

Cursor goes to end of input when changing data in safari broswer

The cursor goes to the end of input when changing data in the safari browser. all other browsers working fine, but safari browser this problem happened. this code write it angular 7.
user.component.ts
<panel-input-box
[width]="'100%'"
[inputType]="inputTypes.text"
[labelWebtext]="'ButtonText'"
[labelFallback]="'Button text'"
[placeholderWebtext]="'EnterButtonName'"
[placeholderFallback]="'Enter button name'"
[showCheckbox]="true"
[(value)]="snoopstarButton.name"
[isChecked]="snoopstarButton.hasButtonText"
[showRedBorder] = "requiredFields.nameRequired"
(checkboxClicked)="toggleCheckBox(targetButtonKeys.hasButtonText);"
(onBlur)="updateStoreAndAutosave(targetButtonKeys.name, $event);confirmationForCreateButton()"
[checkboxTestId]="'has-btn-text'"
[inputTestId]="'btn-name'"
</panel-input-box>

what should I use instead of 'appcontent' on firefox?

I have to fix our legacy firefox extension codes into WebExtensions, and I found those code on that.
var appcontent = document.getElementById("appcontent");
if (appcontent) {
appcontent.addEventListener("DOMContentLoaded", myfunction,
true);
}
Debbuging on this, appcontent always be null and There is no 'appcontent' Element on our solution.
I googled about 'appcontent' , then I found those description.
Extensions that attempt to overlay onto the "appcontent" box try to float chrome over document content will no longer display that material. You should update your extension to use the new panel XUL element. If you wish to keep the panel from automatically disappearing after a delay, you can set the noautohide attribute to true.
So I replaced 'appcontent' into 'panel' but it doesn't work, then what should I use instead of 'appcontent' ?

How to restore scroll position after ajax image loading in IE11?

I have a small piece of JavaScript which is delivered with an dynamic image.
The image is re-rendered by the server and refreshed via ajax on each click. I want to restore the scollposition after each reload of the image.
The JavaScript I use is a modification of the accepted answer of this thread:
$img.load(function() {
var scrollElement = document.getElementById(SCROLL_ID);
if(scrollElement) {
scrollElement.scrollTop = jQuery.data(scrollElement, "yPos");
scrollElement.scrollLeft = jQuery.data(scrollElement, "xPos");
};
});
It works fine with IE 8 and FF 37. Now I have to Support IE 11, which causes some problems. Though the function is evaluated after each reload, it seems is is evaluated before the Image is rendered by the browser, so the scroller is not yet visible.
Any help is appreciated.
Edit: The page is running in document mode 8.
Check with scrollElement.scrollTo(0,0)

Getting scrollTop to work in IE Quirks Mode from an iframe within an iframe

I'm having a rather frustrating time trying to force my page to scroll back to the top after submitting a form.
The code I'm trialling this with is simple:
$('body').prepend('Click here');
$('body').on("click", "#testing", function() {
window.top.$('body, html').animate({ scrollTop: 0 }, 0);
});
This works, as intended, on FireFox - but not Internet Explorer.
It's worth noting that I'm using the UWA widget format and my code is essentially embedded within two iframes. There is an iframe for the HTML template and iframe containing this widget. I have control over neither of these frames, nor can I give you the full code because it is literally thousands of lines of horribly-written, misaligned HTML and JavaScript.
Here are some facts that I've put together to see if anyone can spot the problem because I'm don't really know where to begin looking:
In FireFox, this code works fine - clicking the link instantly scrolls the whole page to the top
If I open the IE console the Page Default Standard is "Quirks Mode". Changing this to "IE9 Standards" fixes the problem, i.e. clicking the link scrolls the whole page back to the top
Changing window.top to window.parent works in neither browser
Changing window.top to window.parent.parent also works in FF but doesn't work in IE
Changing animate({ scrollTop: 0 }, 0); to scrollTop(0) works in FF but doesn't work in IE
If I run the following alerts in IE, bizarrely (to me), here is the output:
alert(typeof window.parent); // object
alert(typeof window.top); // object
alert(typeof window.parent.parent); // object
alert(typeof window.parent.$('html')); // object
alert(typeof window.parent.$('body')); // object
alert(window.parent.offset().top); // alert doesn't trigger, no further alerts run until this line is commented
alert(window.parent.parent.offset().top); // alert doesn't trigger, no further alerts run until this line is commented
alert(window.parent.$('html').offset().top); // 0
alert(window.parent.$('body').offset().top); // 0
alert(window.top.$('html').offset().top); // 0
alert(window.top.$('body').offset().top); // 0
In short, it looks like window.top is accessible and so is the $('html') element from there... so why can't I get my page to scroll unless I force standards mode in my browser?

TinyMCE and IE 9 Issue

I have TinyMCE 4.0 in the page and when I select the text and try to paste it via CTRL+V, I get an error message saying that "Clipboard access not possible." This happens in IE8/9. However the same works fine in Chrome. Is there any workaround for this to get this working in IE?
Bounty:
I've tried resetting all IE settings (via Internet Options->Advanced->Reset All...) on two different computers, both running IE9, and one has the problem while the other does not.
Ultimately, I need to be able to paste formatted text (often with bullets or numeric lists and such) into TinyMCE and have it format them correctly. For this, I'm using the paste plugin, which seems to be throwing the error.
It seems to me that you're using an older TinyMCE 4 version, so in my opinion you should first do an upgrade to the latest version (4.0.3).
I've checked the source code of such version and I've found no trace of the Clipboard access not possible error message, which seems instead to be present in an earlier version of the tinymce/plugins/paste/plugin.min.js file, and only for Internet Explorer:
e.ie ? o.on("init", function () {
var e = o.dom;
o.dom.bind(o.getBody(), "paste", function (n) {
var r;
if (n.preventDefault(), a() && e.doc.dataTransfer)
return c(e.doc.dataTransfer.getData("Text")), t;
var i = u();
e.bind(i, "paste", function (e) {
e.stopPropagation(), r = !0
});
var s = o.selection.getRng(),
f = e.doc.body.createTextRange();
if (f.moveToElementText(i.firstChild), f.execCommand("Paste"), d(), !r)
return o.windowManager.alert("Clipboard access not possible."), t;
var p = i.firstChild.innerHTML;
o.selection.setRng(s), l(p)
})
}
Not being able to find an unminified version of this script, I can't say why such code fails, nor can I explain why it works only on one of your's computers.
In Internet Explorer's Tools menu, choose Internet Options.
Click the Security tab.
Click Trusted Sites.
Click the Sites... button.
Type your domain name (for example, widgetdesigns.com) in the first field, then click Add.
Unselect the checkbox that says Require server verification (https:) for all sites in this zone.
Click OK to apply your change.
Back on the Security tab, confirm that Trusted Sites is still selected, then click the Custom Level button.
Scroll down the Security section (near the bottom) and check the Disable box below Allow Programmatic clipboard access. (Checking this box will disable the access alert only for sites in your Trusted Sites list.)
Click OK then OK again to apply your changes.
What about this? Does this work?

Categories