In every other browser on both Mac and Windows, the following scenario works. I select a editable piece of content (more on that below), I'm presented in a sidebar with some li tags that have an onclick event, and when I click one of the li tags, wherever my cursor was in the editable content it inserts a predefined block of text.
However, on Mac, using Safari, when I click on the onclick object, I lose my selection, nothing is inserted, and am unable to reference like I'm able to in the other browsers. The window.getSelection() returns all 0's and nulls, with no defined range.
So, I have a bunch of li tags that look like so:
<li style="color: #ffffff;" id="instaglong"
onclick="EditorFields.insertField('cf_13', 'text');">Company »</li>
And then the insertField method calls a block of code that uses this:
function insertTextAtCursor(text) {
var sel, range, html;
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
range.insertNode( document.createTextNode(text) );
var lastNode = range.endContainer;
// Preserve the selection
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
}
}
where the "text" parameter is something like "%%First_Name%%".
The clickable li tag is only available after you've placed your cursor into a p tag that is within a contenteditable td tag. The below is an example:
<td style="text-align: left; font-family: arial, helvetica, sans-serif; font-size: 14px; color: rgb(143, 143, 143); line-height: 22px; position: relative;" class="aligncenter mce-content-body editing_text mce-edit-focus" mgedit="text" spellcheck="false" id="mce_9" width="100%" valign="middle" contenteditable="true">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</td>
How do I fix this so that it works the same in Safari (desktop) as it does in Chrome, Firefox, Edge, etc. I've found numerous people who asked a similar question, but they were trying to copy text that had been selected prior to their onclick event, and solved the issue with a hack.