Manipulatie van geselecteerde tekst in htmlstructuur

Status
Niet open voor verdere reacties.

kenikavanbis

Terugkerende gebruiker
Lid geworden
22 mei 2007
Berichten
2.191
Ik wil tekst selecteren manipuleren en manipulaties overschrijven (voor editor)
mijn editor bedraagt ongeveer 150 lijnen js ik hoop dit dan ook beperken te houden.

wat ik wil doen is geselecteerde tekst en in een variable hebben de (begin positie en of eindpositie) of een mogelijkheid om de geselecteerde tekst te verwijderen en het resultaat in de plaats te zetten.

Ik heb nog een probleem met firefox dat hij bij bold lange code gebruikt met (style:...) die ik als <b></b> wil zien

wat is er dan aanwezig .
Code:
	function replacevalue(id,value){
			  document.getElementById(id).value=value;
	}
	function setclass(id,value){
			  document.getElementById(id).className=value;
	}
	var oldpanel;
	var selection ="";
	if (isbrowserok()){
		setclass("editERROR",'ERROR hidden');
	}else {
		setclass("editor",'');
	}
Code:
  var editorpanelname = document.getElementById("Editorpanel");//(-- W3C correction OK! --)
  function doWYSIWYG(command, condition, arg){
    //editorpanelname.focus();
    if(!condition) condition=false;
    document.execCommand(command, condition, arg);
  }
  function todoifupload(){
 	//move to textarea
	 tosource();
	//senddata();
  }
  function tosource(){
  	document.getElementById("Source").value = document.getElementById("Editorpanel").innerHTML;
  	//switch to other vieuw
    setclass("Editorpanel",'hidden Editorpanel');
  	setclass("Sourcepanel",'Editorpanel');
  }
  function totexteditor(){
  	document.getElementById("Editorpanel").innerHTML = document.getElementById("Source").value;
 	//switch to other vieuw
	setclass("Editorpanel",'Editorpanel');
  	setclass("Sourcepanel",'hidden Editorpanel');
  }
  function senddata(Field){
	//document.form.submit();
	//document.forms[0].submit();
	tosource();
		} 
  		function replaceastring(param){
 		alert( "under construction" );
  }
  function doselect(){
  		if(window.getSelection) {
			s.removeAllRanges();
			s.addRange(rng);
		} else {
			rng.select();
		}
  }
  function doresize(){
    var Y = document.getElementById('height').value;
    var X = document.getElementById('width').value;
    if(issize(X,Y)) { 
		alert("One or more of the dimensions entered cannot be supported. Setting defaults.");
		X="98%"; Y="350";
	}
	replacevalue("width",X);
	replacevalue("height",Y);
	editorpanelname.width=X;
	editorpanelname.height=Y;
  }
  //todo delete _moz_dirty if mozila
  function isbrowserok(){
  	
  		if (navigator.userAgent.indexOf("Firefox")!=-1){
  			return true;
  		}else if(window.navigator.appName == "Microsoft Internet Explorer"){//you must use a better browser
			var IEversion = window.navigator.appVersion;
			alert(window.navigator.appName + "you must use a better browser for this function");
			return (IEversion.substring(IEversion.indexOf("MSIE") + 5, IEversion.indexOf("MSIE") + 8) >= 5.5)
		}else if(window.navigator.appName == "Netscape"){//&&(parseInt(appVersion)==4
		  	return true;	
		}else{//geen ondersteunde browser
			return false;
		}
   }
ik heb al eens zitten knoeien met de do select maar helaas heeft het nog nie veel opgebracht
 
Laatst bewerkt:
Hoi kenikavanbis,
Ik heb niet zo 1-2-3 een pasklaar antwoord, maar misschien wel wat bruikbare elementen.
Laatst een supersimpel editortje in elkaar gezet, waarin o.a. tekst vet of cursief gemaakt kan worden. Het ding werkt niet in IE, wel in Firefox.
In de html staat dit:
HTML:
<button class="button-vet" title="Maak selectie vet" 
   onclick="document.getElementById('tekstinput_berichtInhoud').focus();
   addPTag(document.getElementById('tekstinput_berichtInhoud'), 'strong')">
   <img src="../systemimages/button-vet.gif" alt="">
</button>
<button class="button-cursief" title="Maak selectie cursief"
   onclick="document.getElementById('tekstinput_berichtInhoud').focus();
   addPTag(document.getElementById('tekstinput_berichtInhoud'), 'em')">
   <img src="../systemimages/button-cursief.gif" alt="">
</button>
Het script voor de functie addPTag() en bijbehorende subfuncties heb ik na enige omzwervingen afgetapt uit het Wayback Web-archive.
Het script zit in de broncode van de pagina zelf.
Misschien zit er nog iets in dat je kunt gebruiken.

Met vriendelijke groet,
CSShunter

PS-1:
Voor de toegankelijkheid gebruik ik nooit <b> en <i>, maar <strong> en <em>. Bv. tekst-voorleesbrowsers kunnen een <b>...</b> woord niet vet voorlezen, maar een <strong>...</strong> woord wel met nadruk uitspreken. En schermbrowsers maken van <strong> ook vet. - In html5 wordt het gebruik van <b> en <i> dan ook sterk afgeraden (alleen als laatste redmiddel te gebruiken):
The following would be incorrect usage:
<p><b>WARNING!</b> Do not frob the barbinator!</p>
In the previous example, the correct element to use would have been strong, not b.​
Zie http://dev.w3.org/html5/spec/Overview.html#the-b-element en http://dev.w3.org/html5/spec/Overview.html#the-i-element.

PS-2:
Algemene werking van de "nieuws-constructor".
Elk nieuwsbericht is een apart bestandje, dat met php in de nieuwspagina geplakt wordt.
Met php worden in de constructor (onzichtbaar op scherm) eerst alle oude nieuwsberichten van de nieuwspagina opgehaald. Daarmee kan het volgnummer van het nieuwe bericht bepaald worden.
Na intikken van de gewenste teksten komt de html-code in een alert-venstertje. Deze code kan gekopieerd worden, en via Notepad++ ingeplakt worden in een nieuw html-bestandje. Dit wordt met FTP op de server gezet. De eigenlijke nieuwspagina sprokkelt automatisch alle volgnummers van de berichten af, dus het nieuwe bericht staat er op deze manier meteen bij.
- Dit is een tijdelijke voorziening (in afwachting van een CMS aangedreven site-opzet), waarmee redacteuren berichten kunnen plaatsen zonder dat de al bestaande pagina in de war geschopt kan worden. ;)
Het makkelijke is ook, dat een bepaald bericht er ook zo weer af is (bv. als niet langer actueel): alleen de bestandsnaam even veranderen met een x'je erachter, en het bericht wordt automatisch niet meer in de serie opgenomen.
 
al zeker bedankt voor de info maar ik wil de lat toch nog hoger leggen ik wil namelijk een form kunnen maken met veel subtags en dat zal dan iets moeilijker liggen denk ik.
Namelijk als ik de dowysiwyg('b') doe en ik druk er nog eens op verdwijnt hij weer zodat je ook tags kan weghalen.
Dus selectie zal zeker nodig zijn maar zou jij weten of er zo iets is als getselectedtext.of een lijst van alle mogelijke commandos


ik vondt deze mooie site dus ik ga effen alles moeten uitzoeken .
http://www.quirksmode.org/js/contents.html


en hier komt dan alles in terecht moet je wel svn tool bezitten om deze te kunnen uitchecken.(eclipse heeft deze).
http://code.google.com/p/autosite/
 
dit was dan de de oplossing
Code:
  function getselectedtext(){
    var txt = '';
    if (window.getSelection){
        txt = window.getSelection();
    }else if (document.getSelection){
        txt = document.getSelection();
    }else if (document.selection){
        txt = document.selection.createRange().text;
    }else
	  return;
    return txt;
  }
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan