如何解决如何在ajax html编辑器中摆脱复制粘贴文本样式的问题
|| 我将ajax html编辑器用于新闻描述页面。当我从Word或Internet复制粘贴内容时，它会复制该文本，段落等的样式，从而克服了html编辑器文本框的默认类样式，我想要的是摆脱如下所示的内联样式，而不是html我是否想保留该段<span id=\"ContentPlaceHolder1_newsDetaildesc\" class=\"newsDetails\"><span style=\"font-family: arial,helvetica,sans; font-size: 11px; line-height: 14px; color: #000000; \"><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.<BR /> It has survived not only five centuries,but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span></span></p>
#left_column .newsDetails span[style]
{
font-family: Arial !important;
font-size: small !important;
font-weight: normal !important;
color: #808080 !important;
}解决方法
首先，请注意，从Word（或任何其他HTML源）粘贴而来的HTML会因源而异。甚至不同版本的Word也会给您根本不同的输入。如果您设计的某些代码完全适合您所拥有的MS Word版本中的内容，则对于其他版本的MS Word可能根本不起作用。
另外，某些来源会粘贴看起来像HTML的内容，但实际上是垃圾。当您将HTML内容粘贴到浏览器中的RTF区域时，您的浏览器与HTML的生成方式无关。不要以您的想象力期望它是有效的。另外，当将HTML插入到RTF区域的DOM中时，您的浏览器将对其进行进一步调整。
由于潜在的输入变化很大，并且由于难以定义可接受的输出，因此很难为这种情况设计合适的滤波器。此外，您无法控制MS Word的未来版本将如何处理其HTML内容，因此您的代码将很难过时。
但是，振作起来！如果世界上所有的问题都是容易解决的，那将是一个非常无聊的地方。有一些潜在的解决方案。可以保留HTML的好部分而丢弃坏的部分。
看起来您基于HTML的RTE就像大多数HTML编辑器一样工作。具体来说，它具有一个iframe，并且在iframe中的文档上，已将
designMode
paste
var iframe = your.rich.text.editor.getIframe(),// or whatever
win = iframe.contentWindow,doc = win.document,body = doc.body;
// Use your favorite library to attach events. Don\'t actually do this
// yourself. But if you did do it yourself,this is how it would be done.
if (win.addEventListener) {
body.addEventListener(\'paste\',handlePaste,false);
} else {
body.attachEvent(\"onpaste\",handlePaste);
}
handlePaste
function handlePaste() {
window.setTimeout(filterHTML,50);
}
meta
link
style
o:p
shapetype
shape
<!-- comment -->
font
MsoNormal
// Your favorite JavaScript library probably has these utility functions.
// Feel free to use them. I\'m including them here so this example will
// be library-agnostic.
function collectionToArray(col) {
var x,output = [];
for (x = 0; x < col.length; x += 1) {
output[x] = col[x];
}
return output;
}
// Another utility function probably covered by your favorite library.
function trimString(s) {
return s.replace(/^\\s\\s*/,\'\').replace(/\\s\\s*$/,\'\');
}
function filterHTML() {
var iframe = your.rich.text.editor.getIframe(),win = iframe.contentWindow,invalidClass = /(?:^| )msonormal(?:$| )/gi,cursor,nodes = [];
// This is a depth-first,pre-order search of the document\'s body.
// While searching,we want to remove invalid elements and comments.
// We also want to remove invalid classNames.
// We also want to remove font elements,but preserve their contents.
nodes = collectionToArray(doc.body.childNodes);
while (nodes.length) {
cursor = nodes.shift();
switch (cursor.nodeName.toLowerCase()) {
// Remove these invalid elements.
case \'meta\':
case \'link\':
case \'style\':
case \'o:p\':
case \'shapetype\':
case \'shape\':
case \'#comment\':
cursor.parentNode.removeChild(cursor);
break;
// Remove font elements but preserve their contents.
case \'font\':
// Make sure we scan these child nodes too!
nodes.unshift.apply(
nodes,collectionToArray(cursor.childNodes)
);
while (cursor.lastChild) {
if (cursor.nextSibling) {
cursor.parentNode.insertBefore(
cursor.lastChild,cursor.nextSibling
);
} else {
cursor.parentNode.appendChild(cursor.lastChild);
}
}
break;
default:
if (cursor.nodeType === 1) {
// Remove all inline styles
cursor.removeAttribute(\'style\');
// OR: remove a specific inline style
cursor.style.fontFamily = \'\';
// Remove invalid class names.
invalidClass.lastIndex = 0;
if (
cursor.className &&
invalidClass.test(cursor.className)
) {
cursor.className = trimString(
cursor.className.replace(invalidClass,\'\')
);
if (cursor.className === \'\') {
cursor.removeAttribute(\'class\');
}
}
// Also scan child nodes of this node.
nodes.unshift.apply(
nodes,collectionToArray(cursor.childNodes)
);
}
}
}
}
cursor.removeAttribute(\'style\');
cursor.style.fontFamily = \'\';
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。