Låt säga att jag har en div-tag som jag har en text i.
<div id="ett">Text</div>
Nu skulle jag villja ha en knapp för att ta bort "diven" och enast låta "Text" stå kvar(oformaterad).
Hur gör Göran det?
9 svar · 411 visningar · startad av Jesper T
Låt säga att jag har en div-tag som jag har en text i.
<div id="ett">Text</div>
Nu skulle jag villja ha en knapp för att ta bort "diven" och enast låta "Text" stå kvar(oformaterad).
Hur gör Göran det?
Vem är Göran? Illern Göran? :)
Om det går bra att använda ms-egenskapen outerHTML kan du enkelt göra så här;
<style type="text/css">
#ett { color: blue; }
#tva { color: green; }
</style>
<div id="tva">
<div id="ett">Blått eller...?</div>
</div>
<br/>
<a href="#" onClick="document.getElementById('ett').outerHTML=document.getElementById('ett').innerHTML; return false;">Ändra</a>
Skillnaden mellan outer- och innerHTML är att den första även innefattar elementet som du pekar på. Mozilla har ex. inte (ännu i alla fall) stöd för outerHTML, och vill du därför inte använda det blir det betydligt klurigare, åtminstone om det skall vara någotsånär vattentätt. Då får du kolla obj.parentNode och sedan leta reda på ditt element med ett regexp, därefter försöka leta reda på sluttaggen och beroende på om elementet i fråga har fler children kan det vara lite småklurigt.
Men jag skulle vilja att det skall funka på den markerade textsnutten. ex.
<script>
function bliff(){
var sel = document.selection.createRange().text;
sel.outerHTML=sel.innerHTML;
return false;
}
</script>
Ok, men då går du över ån för att hämta vatten :) document.selection.createRange().text hanterar bara oformaterad text, och lägger du html där så blir det text. Alltså;
function bliff(){
document.selection.createRange().text = document.selection.createRange().text;
}
Ok, men det är ju meningen att på det stycket där jag markerat upp, ex. som i mitt "huvudinlägg", markerar jag upp "Text" och klickar på knappen, så skall divtaggen försvinna och Text skall stå kvar utan lager. Puhh.
Jasså du menar så... :D
<script type="text/javascript">
function bliff(){
document.selection.createRange().text=document.selection.createRange().text.replace(/<(.*?)>/g,"");
}
</script>
<form>
<input type="button" value="unHTML" onClick="bliff(this.form);"><br/>
<textarea cols="40" rows="5" name="foo">Markera denna <div id="ett">Text</div> och klicka "unHTML".</textarea>
</form>
Usch, jag känner mig krånglig. :x
Jag har ett redigerbart lager (contentEditable) som jag markerar upp aktuell text i, då verkar det inte funka eftersom att "selection.createRange" verkar inte funka med outerHTML.
Struligt värre. Applikationen skall endast funka med IE6 så det skulle annars funka med outerHTML.
Nått i denna stil:
var newText = obj.document.selection.createRange().text;
obj.document.selection.createRange().htmlText= newText
men men...
Nej outerHTML fungerar inte. Men är detta ok?
<form>
<input type="button" value="unHTML" onclick="document.selection.createRange().text=document.selection.createRange().text;">
<input type="button" value="show HTML" onclick="alert(document.getElementById('foo').innerHTML);">
</form>
<style type="text/css">
#ett { color:red; }
#foo { width:600px;height:400px;border:solid black 1px; }
</style>
<div contenteditable id="foo">Markera denna <div id="ett">Text</div> och klicka "unHTML".</div>
...jo det skulle gått alderles utomordentligt bra, om... ;) det räckte med att markera upp "Text". Nu måste man även markera tomrummen mellan "denna", "Text" och "och" för att få det hela att funka. " Text "
Mysko...
Måste säga att det varit smart om det hade funkat med outerHTML. Då hade man bara kunnat markera upp och ersätta htmlkoden med "createRange().text".
Så mysko är det faktiskt inte. Markerar du "text" i "<div...>text</div>" så blir inte "<div...>" med. Men jag förstår att det är frustrerande :) Hade du fått med det vid markeringen hade det inte varit något problem. En approach att få bort en visuell egenskap, om ex. div "ett" hade varit röd, vore att kolla på execCommand(), men då tappar du kontrollen på html-koden, och det antar jag att du inte vill heller. När jag micklade med en editor förrut så gjorde jag så man hade tillgång till både wysiwyg-läge (contenteditable) och html-läge (i en textarea). Annars är det en rätt klurig manöver.
Men men... det skall inte vara lätt :)