můj wysiwyg :-)

by Petr Haluza

HTML

<body onLoad="onload();">
  <section id="HAPeditor">
  <input type="button" value="bold" onClick="formatTextu ('b');" /> 
  <input type="button" value="underline" onClick="formatTextu ('u');" />
  <input type="button" value="italic" onClick="formatTextu ('i');" />
  <br><br>
  <input type="text" placeholder="https://www...." name="zadejUrl" id="zadejUrl" /> -> 
  <input type="button" value="vloz URL" onClick="dejUrl();" /> (označ text a stiskni)
  <br><br>
  <textarea name="moje_textarea" id="moje_textarea" placeholder="Něco napiš a označ kousek, vlož adresu do pole výše a klini na `vloz URL`"></textarea><br><br>
  <div id="nahled"></div><br>
  <button id="btn" onClick="nahled();">generuj náhled</button>
  </section>
</body>

CSS

#HAPeditor { font:12px arial black;}
#moje_textarea{	width:90%;	height:100px;	border:thin solid #000;	padding:10px;}
#zadejUrl { }

JavaScript

function formatTextu(tag) {
   var myTextArea = document.getElementById('moje_textarea');
   var myTextAreaValue = myTextArea.value;
   var selected_txt = myTextAreaValue.substring(myTextArea.selectionStart, myTextArea.selectionEnd);
   var before_txt = myTextAreaValue.substring(0, myTextArea.selectionStart);
   var after_txt = myTextAreaValue.substring(myTextArea.selectionEnd, myTextAreaValue.length);
   myTextArea.value = before_txt + '<' + tag + '>' + selected_txt + '</' + tag + '>' + after_txt;
}

function dejUrl() {
   var myTextArea = document.getElementById('moje_textarea');
   var myTextAreaValue = myTextArea.value;
   var selected_txt = myTextAreaValue.substring(myTextArea.selectionStart, myTextArea.selectionEnd);
   var before_txt = myTextAreaValue.substring(0, myTextArea.selectionStart);
   var after_txt = myTextAreaValue.substring(myTextArea.selectionEnd, myTextAreaValue.length);
   myTextArea.value = before_txt + '<a href="' + zadejUrl.value + '"">' + selected_txt + '</a>' + after_txt;
}

function nahled() {
	var textbox , view ;
  textbox = document.getElementById('moje_textarea');
	view = document.getElementById("nahled");
	view.innerHTML = textbox.value
}

// vkádač odřádkování
function onload(){
	var textarea = document.getElementById("moje_textarea");
	textarea.onkeypress = function(e){
		if( e.which === 13)
		{
			this.value += "<br>";
		}
	}
}