webForumDet fria alternativet

Ta bort htmlformat?

9 svar · 411 visningar · startad av Jesper T

Jesper TMedlem sedan nov. 20017 144 inlägg
#1

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?

JojoxxMedlem sedan juni 20004 308 inlägg
#2

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.

Jesper TMedlem sedan nov. 20017 144 inlägg
#3

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>
JojoxxMedlem sedan juni 20004 308 inlägg
#4

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;
}
Jesper TMedlem sedan nov. 20017 144 inlägg
#5

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.

JojoxxMedlem sedan juni 20004 308 inlägg
#6

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>
Jesper TMedlem sedan nov. 20017 144 inlägg
#7

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...

JojoxxMedlem sedan juni 20004 308 inlägg
#8

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>
Jesper TMedlem sedan nov. 20017 144 inlägg
#9

...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".

JojoxxMedlem sedan juni 20004 308 inlägg
#10

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 :)

132 ms totalt · 3 externa anrop · v20260731065814-full.3ab8d573
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
129 ms — hämta tråd, inlägg och bilagor (db)