在Mac和Windows上的每个其他浏览器中,以下方案都有效。我选择了一个可编辑的内容(下面有更多内容),我在侧边栏中显示了一些带有onclick事件的li标签,当我点击其中一个li标签时,无论我的光标位于可编辑状态的哪个位置内容它插入预定义的文本块。
然而,在Mac上,使用Safari,当我点击onclick对象时,我丢失了我的选择,没有插入任何内容,并且我无法像在其他浏览器中那样引用。 window.getSelection()返回所有0和空值,没有定义的范围。
所以,我有一堆看起来像这样的li标签:
<li style="color: #ffffff;" id="instaglong"
onclick="EditorFields.insertField('cf_13', 'text');">Company »</li>
然后insertField方法调用一个使用它的代码块:
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);
}
}
}
}
&#34; text&#34;参数类似于&#34; %% First_Name %%&#34;。
只有在您将光标放入可信任的td标记内的p标记后,才能使用可点击的li标记。以下是一个例子:
<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>
我如何解决这个问题,以便它在Safari(桌面)中的工作方式与在Chrome,Firefox,Edge等中的工作方式相同。我发现很多人提出类似问题,但他们试图复制在他们的onclick事件之前被选中的文本,并用黑客解决了这个问题。