文本高亮问题
我正在修复编辑器,但有突出显示文本的问题。
我得到了这个代码来检查用户突出显示的内容(代码下方有更多详细信息):
function getSelectionHTML()
{
var iframe = document.getElementById(theEditorID);
var win, doc = iframe.contentDocument;
if(doc)
win = doc.defaultView;
else
{
win = iframe.contentWindow;
doc = win.document;
}
var userSelection;
if(win.getSelection)
{
userSelection = win.getSelection();
if(userSelection.getRangeAt)
var range = userSelection.getRangeAt(0);
else
{
var range = document.createRange();
range.setStart(userSelection.anchorNode, userSelection.anchorOffset);
range.setEnd(userSelection.focusNode, userSelection.focusOffset);
}
var clonedSelection = range.cloneContents();
var div = document.createElement('div');
div.appendChild(clonedSelection);
callIcons(div.innerHTML);
}
else if(doc.selection)
{
userSelection = document.selection.createRange();
callIcons(userSelection.htmlText);
}
};
当用户突出显示一些粗体文本和其他一些斜体文本时,我得到了这个输出:
<b>some text</b><i>some other text</i>
但是当用户仅突出显示粗体文本时,我得到了这个输出(有没有“粗体”标签):
some text
您可以在此处实时查看 - http://brownfolder.com/06/< /a> 突出显示某些文本后,您会看到一条警报。
您知道如何解决这个问题吗?
提前致谢。
I am fixing an editor and I have highlighting text problem.
I got this code for checking what have the user highlighted (more details below the code):
function getSelectionHTML()
{
var iframe = document.getElementById(theEditorID);
var win, doc = iframe.contentDocument;
if(doc)
win = doc.defaultView;
else
{
win = iframe.contentWindow;
doc = win.document;
}
var userSelection;
if(win.getSelection)
{
userSelection = win.getSelection();
if(userSelection.getRangeAt)
var range = userSelection.getRangeAt(0);
else
{
var range = document.createRange();
range.setStart(userSelection.anchorNode, userSelection.anchorOffset);
range.setEnd(userSelection.focusNode, userSelection.focusOffset);
}
var clonedSelection = range.cloneContents();
var div = document.createElement('div');
div.appendChild(clonedSelection);
callIcons(div.innerHTML);
}
else if(doc.selection)
{
userSelection = document.selection.createRange();
callIcons(userSelection.htmlText);
}
};
When the user highlight some bold text and some other italic text i got this output:
<b>some text</b><i>some other text</i>
But when the user highlight only bold text i got this output (there is no 'bold' tag):
some text
You can check that, live, here - http://brownfolder.com/06/
You'll see an alert after highlighting some text.
Do you have any idea how can I fix this?
Thanks in advance.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
浏览器根据是否在选择中包含周围标签而有所不同。如果选择完全包含在标签内,则它们通常不包括周围的标签。可以从选择的开始处遍历 DOM 并检查每个元素是否是 。标签。但是,如果您正在使用的 iframe 使用 contenteditable,则不能保证它会以 粗体显示。标签。还有其他方式可以将文本加粗:IE 通常会添加 。标签加粗,Firefox 和 WebKit 可能使用
使用 queryCommandState('bold') 在 iframe 文档上。
Browsers vary over whether they include the surrounding tags in the selection. They usually don't include the surrounding tags if the selection is entirely contained within the tags. It's possible to walk up the DOM from the start of the selection and check if each element is a <b> tag. But if the iframe you're working with uses contenteditable, there's no guarantee it will bold with <b> tags. There are other ways the text might be bolded: IE usually adds <STRONG> tags to bold, and Firefox and WebKit may use <span style="font-weight:bold>.
It's probably better to use queryCommandState('bold') on the iframe document instead.