选中文字，点按钮
<p><button onclick="setStyle('fontsize',false,'10')" unselectable="on">setFont</button></p>
问题:
在做编辑器的时候,如何获得选中的element(如img\div\文字),然后设置其style?使用document.activeElement始终得到是body请高手指教了!
</body>
<script>
function setStyle(c,b,v) {
document.execCommand(c,b,v);
}
</script>
<p><button onclick="setStyle('fontsize',false,'10')" unselectable="on">setFont</button></p>
问题:
在做编辑器的时候,如何获得选中的element(如img\div\文字),然后设置其style?使用document.activeElement始终得到是body请高手指教了!
</body>
<script>
function setStyle(c,b,v) {
document.execCommand(c,b,v);
}
</script>
而execCommand的能力有限,比如我想给被选中的图片加个style='float:left'怎么办?
而且是能兼容ie和firefox的方法
<p><button onclick="setStyle('fontsize',false,'10')" unselectable="on">setFont</button></p>
问题:
在做编辑器的时候,如何获得选中的element(如img\div\文字),然后设置其style?使用document.activeElement始终得到是body请高手指教了!
</body>
<script>
function setStyle(c,b,v) {
var rng = document.selection.createRange();
rng.pasteHTML("<span style='color:red'>" + rng.text + "</span>");
}
</script>
根本不兼容啊,firefox不支持而且,我的问题是给element修改style,不是给文字
firefox用window.selection现在的编辑器应该都不是找到元素来添加style的，都是通过range来插入html的做法。也许可以通过类似这样的方法来加吧，你看看这样是不是合乎题意了。 <script>
function getHTML() {
var rng = document.selection.createRange();
alert(rng.htmlText);
}
function set(v) {
var rng = document.selection.createRange();
var txt = rng.htmlText;
alert(txt);
txt = txt.replace(/<([^<>]*? )style *?= *?([\'\"])([^<>]*?)\2>/i,'<$1style="color:'+v+'">');
alert(txt);
rng.pasteHTML(txt)
}
</script>
<p><button onclick="set('blue')" unselectable="on">get</button><button onclick="getHTML()">get selection html</button></p>
问题:
<span style="color:red">在做编辑器的时候,如何获得选中的element(如img\div\文字),然后设置其style?使用document.activeElement始终得到是body请高手指教了!</span>
</body>
用这个：
<body>
document.body.onclick=function(){
alert(event.srcElement.tagName);
}</body>
firefox好象不支持window.selection通过range来插入html的做法我也会,但只能在ie 下实现,
现在的问题是需要firefox也能实现
这才是兼容的方法:
document.body.onclick = function(event)
{
var evt = event || window.event;
var target = evt.srcElement || evt.target;
};
但是document处于编辑状态时,var evt = event || window.event;始终获得的是null
试试下面的代码吧，不要用firefox，用IE
<body contenteditable=true>
<div style="position:absolute;left:400px;top:100px;width:100px;height:100px;border:solid 1px #000;overflow:scroll" >div</div>
<span style="position:absolute;left:200px;top:100px;width:100px;height:100px;border:solid 1px #000;overflow:scroll" >span</span><img style="position:absolute;left:300px;top:100px;width:100px;height:100px;border:solid 1px #000" alt="img">
<script>
for (var i=0;i<document.all.length;i++)
document.all[i].oncontrolselect=function(){
document.body.insertAdjacentHTML("BEFOREEND","你选择的对象标签为:"+ event.srcElement.tagName+"<br>");
}</script>
</body>
在IE里可以用type属性来得到控件的tagName，如：
<p><button onclick="get()" unselectable="on">get</button></p>
<iframe id="editor" height="500" width="500"></iframe>
<script>
var edt = document.getElementById("editor");
var doc = edt.contentWindow.document;
doc.open();
doc.write("<html><head></head><div style='color:blue;font-weight:bold;position:absolute;left:200;top:300'>never-online</div><textarea style='width:200px;heigh:100px;'></textarea><body contenteditable='true'></body></html>");
doc.close();
//doc.designMode="on";
function get() {
// if In IE
alert(doc.selection.type);
var rng=doc.selection.createRange();
alert(rng(0).tagName);
}
</script>
<p><button onclick="get()" unselectable="on">get</button></p>
<iframe id="editor" height="500" width="500"></iframe>
<script>
var edt = document.getElementById("editor");
var wnd = edt.contentWindow;
var doc = edt.contentWindow.document;
doc.open();
doc.write("<html><head></head><div style='color:blue;font-weight:bold;position:absolute;left:200;top:300'>never-online</div><textarea style='width:200px;heigh:100px;'></textarea><body contenteditable='true'></body></html>");
doc.close();
doc.designMode="on";
var get = function () {
alert(gettp());
alert(gete().tagName);
}var gettp = function () {
_tp='Text'; var slct = wnd.getSelection();
if(slct &&slct.rangeCount==1) {
var rng=slct.getRangeAt(0);
if(rng.startContainer==rng.endContainer
&&(rng.endOffset-rng.startOffset)==1
&&rng.startContainer.nodeType!=Node.TEXT_NODE)
_tp='Control';
}; return _tp;
};
var gete = function () {
if(gettp()=='Control') {
var slct=wnd.getSelection();
return slct.anchorNode.childNodes[slct.anchorOffset];
}
};
</script>
</body>