Simple JavaScript rich text format editor

Прост, базов RTF редактор за сайт
JS_WisWyg_Editor_by_Ned
Дълго съм се чудил кой е най-подходящия JavaScript Wysiwyg редактор с най-много възможности за напасване към сайт. Ползвал съм NicEdit, TinyMCE и други, които сам съм писал, неподдържащи rich text format (RTF). Обаче напасването на тези редактори към различни дизайни е развибащо от към бачкане и тестване в различните браузери. Реших да почопля няколко такива редактора и да разбера кое е толкова загадъчно и сложно, за да се напише подобен редактор. Истината е тривиална и се казва – iFrame. Този таг се ползва в почти всички подобни редактори, точно заради поддръжката му на RTF. При събмитване на формата, цялото съдържание на iform се подава на textarea, който си седи удобно скрит.

Това е моят редактор, без CSS-форматиране, като в примера добавям и опция за обработка на текста от базата данни, където присъства без тагове, с ексейпнати малко по-рискови символи.

<?php
$field = '<a href="aloooha">Test\'ed. kavicha</a> dyra, byra.<br />Още текст и още "кирилица".';
$clearpost = $field;
 
 
if(isset($_POST['button'])){
	echo $_POST['myTextArea'];
	$clearpost = $_POST['myTextArea'];
}
 
//$clearpost = preg_replace('@delete|select|insert|update|where@i',"", $clearpost); // Почистване на 
//$clearpost = preg_replace('/[\x7f-\xff]/', "", $clearpost); // Clear Dirty Data
$clearpost = preg_replace("/;/", "&#59;", $clearpost);
$clearpost = preg_replace("/\*/", "&#42;", $clearpost);
$clearpost = preg_replace("/\r\n/", "<br />", $clearpost);
$clearpost = preg_replace("/\r/", "<br />", $clearpost);
$clearpost = preg_replace("/\n/", "<br />", $clearpost);
$clearpost = preg_replace("/</", "&lt;", $clearpost);
$clearpost = preg_replace("/=/", "&#61;", $clearpost);
$clearpost = preg_replace("/>/", "&gt;", $clearpost);
$clearpost = preg_replace("/\'/", "&#39;", $clearpost);
$clearpost = preg_replace("/\`/", "&#96;", $clearpost);
$clearpost = preg_replace("/\"/", "&quot;", $clearpost);
 
if (!get_magic_quotes_gpc()) $clearpost = preg_replace('@\\\@', "&#92;", $clearpost);
else {
	$clearpost = stripslashes($clearpost);
	$clearpost = preg_replace('@\\\@', "&#92;", $clearpost);
}
 
 
$clearpost = preg_replace("/&#39;/", "\&#39;", $clearpost); // Ескейпване на единичната кавичка, за да може да се показва в iframe!!!
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" /> 
<script src="wiswyg_ned/nedEditor.js"></script>
<script type="text/javascript">
 
window.onload=function(){
	iFrameOn();
	if(isIE){
		var myFrame = document.getElementById('richTextField');
		var frameDoc = myFrame.contentDocument || myFrame.contentWindow;
 
		if (frameDoc.document){
		  frameDoc = frameDoc.document;
		}
		frameDoc.write ('<?php echo html_entity_decode($clearpost, ENT_QUOTES); ?>') ;
	} else {
		window.frames['richTextField'].document.body.innerHTML = '<?php echo html_entity_decode($clearpost, ENT_QUOTES); ?>' ;
	}
}
</script>
</head>
<!-- <body onLoad="iFrameOn();" > -->
<body>
<form action="" enctype="multipart/form-data" name="myForm" id="myform" method="post">
<div id="wysiwyg_cp" style="padding:8px; width:700px;">
	<input type="button" onClick="iBold()" value="B"> 
	<input type="button" onClick="iUnderline()" value="U">
	<input type="button" onClick="iItalic()" value="I">
	<input type="button" onClick="iFontSize()" value="Text Size">
	<input type="button" onClick="iForeColor()" value="Text Color">
	<input type="button" onClick="iHorizontalRule()" value="HR">
	<input type="button" onClick="iUnorderedList()" value="UL"><br />
	<input type="button" onClick="iOrderedList()" value="OL">
	<input type="button" onClick="iLink()" value="Link">
	<input type="button" onClick="iUnLink()" value="UnLink">
	<input type="button" onClick="iImage()" value="Image">
	<input type="button" onClick="iRemoveFormat()" value="Remove Format"> 
</div>
	<!-- Hide(but keep)your normal textarea and place in the iFrame replacement for it -->
	<textarea style="display:none;" name="myTextArea" id="myTextArea" cols="100" rows="14"></textarea>
 
	<iframe name="richTextField" id="richTextField" ></iframe>
	<br />
	<input type="submit" name="button" id="button" value="Make Changes" onClick="javascript:submit_form();"/>
</form>
</body>
</html>

Съдръжанието на JavaScript файла:

// Check Browser
var isOpera = !!(window.opera && window.opera.version);  // Opera 8.0+
var isFirefox = testCSS('MozBoxSizing');                 // FF 0.8+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
    // At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !isSafari && testCSS('WebkitTransform');  // Chrome 1+
var isIE = /*@cc_on!@*/false || testCSS('msTransform');  // At least IE6
 
function testCSS(prop) {
    return prop in document.documentElement.style;
}
//====================
 
 
function iFrameOn(){ 
    richTextField.document.designMode = 'On';
    //window.frames['richTextField'].document.body.innerHTML = '<a href="aloooha">Aloha</a> dyra, byra.<br />Още текст има тук.';	
}
function iRemoveFormat(){
    richTextField.document.execCommand('removeformat',false,null); 
}
function iBold(){
    richTextField.document.execCommand('bold',false,null); 
}
function iUnderline(){
    richTextField.document.execCommand('underline',false,null);
}
function iItalic(){
    richTextField.document.execCommand('italic',false,null); 
}
function iFontSize(){
    var size = prompt('Enter a size 1 - 7', '');
    richTextField.document.execCommand('FontSize',false,size);
}
function iForeColor(){
    var color = prompt('Define a basic color or apply a hexadecimal color code for advanced colors:', '');
    richTextField.document.execCommand('ForeColor',false,color);
}
function iHorizontalRule(){
    richTextField.document.execCommand('inserthorizontalrule',false,null);
}
function iUnorderedList(){
    richTextField.document.execCommand("InsertOrderedList", false,"newOL");
}
function iOrderedList(){
    richTextField.document.execCommand("InsertUnorderedList", false,"newUL");
}
function iLink(){
    var linkURL = prompt("Enter the URL for this link:", "http://"); 
    richTextField.document.execCommand("CreateLink", false, linkURL);
}
function iUnLink(){
    richTextField.document.execCommand("Unlink", false, null);
}
function iImage(){
    var imgSrc = prompt('Enter image location', '');
    if(imgSrc != null){
        richTextField.document.execCommand('insertimage', false, imgSrc); 
    }
}
function submit_form(){
    var theForm = document.getElementById("myform");
    theForm.elements["myTextArea"].value = window.frames['richTextField'].document.body.innerHTML;
    theForm.submit();
}

Сорс кода: wiswyg_by_ned.rar
Demo нa кода.

Share and Enjoy !

Shares

rtmpdump – дъмпване на онлайн телевизия – БНТ 1, БТВ и Нова ТВ

На тази тема има публикуван нов материал с включени видео-уроци. Можете да го прочетете тук:
rtmpdump tutorial – урок за начинаещи

Заиграх се малко с rtmpdump. Много готин инструмент, с който може да се прихваща защитено видео. За да си набавя параметрите за дъмпа, използвах Wireshark.
Дъмп за гледане на БНТ1 през VLC:
rtmpdump -r “rtmp://edge2.evolink.net:2020/fls” -a “fls” -f “WIN 11,5,502,149” -W “http://cdn.bg/flash/jwplayer510/player.swf” -p “http://cdn.bg/live/4eViE8vGzI” -T “B@1R1st1077” -y “bnt.stream” –quiet | vlc –

Update [14.03.2016] Променен е стрийма на БНТ1. По долу е работещ към днешна дата код. БНТ1 разпознава само БГ IP-та, затова от чужбина трябва да се ползва прокси.

rtmpdump -r "rtmp://edge2.cdn.bg:2020/fls" -a "fls/" -W "http://i.cdn.bg/eflash/jwplayer510/player.swf" -f "WIN 18,0,0,232" -p "http://cdn.bg/live/4eViE8vGzI" -y "bnt.stream?at=22c035726e941f171f6676751141b491" -T "B@1R1st1077" --quiet | vlc -

БНТ HD

rtmpdump -r "rtmp://edge2.cdn.bg:2020/fls" -a "fls/" -W "http://i.cdn.bg/eflash/jwplayer510/player.swf" -f "WIN 18,0,0,232" -p "http://i.cdn.bg/live/OQ70Ds9Lcp" -y "bntHDt.stream?at=22c035726e941f171f6676751141b491" -T "B@1R1st1077" --quiet | vlc -

Дъмп на БНТ2

rtmpdump -r "rtmp://edge11.cdn.bg:2020/fls" -a "fls/" -W "http://cdn.bg/eflash/jwplayer510/player.swf" -f "WIN 18,0,0,232" -p "http://cdn.bg/live/ZBPbdxDHm7" -y "bnt2.stream?at=22c035726e941f171f6676751141b491" -T "B@1R1st1077" --quiet | vlc -

Дъмп на БТВ
rtmpdump -r “rtmp://46.10.150.111:80/ios” -a “ios” -f “WIN 11,5,502,149” -W “http://images.btv.bg/fplayer/flowplayer.commercial-3.2.5.swf” -p “http://www.btv.bg/live/” -y “btvbglive” –quiet | vlc –

rtmpdump -r "rtmp://46.10.150.113:80/alpha" -a "alpha" -f "WIN 11,5,502,149" -W "http://www.btv.bg/static/bg/shared/app/flowplayer/flowplayer.rtmp-3.2.13.swf" -p "http://www.btv.bg/live/" -y "alpha" --quiet | vlc -

И двата стринга могат да се запазят като изпълними скриптове на десктопа и да се стартират с 2 клика.

Може да се дъмпва и директно до файл, като се посочи output -o. Пример за дъмпване на бТВ до файл:

rtmp://46.10.150.113:80/alpha" -a "alpha" -f "WIN 11,5,502,149" -W "http://www.btv.bg/static/bg/shared/app/flowplayer/flowplayer.rtmp-3.2.13.swf" -p "http://www.btv.bg/live/" -y "alpha" -o "BTV_01.flv"

Нова ТВ
– плей с VLC

rtmpdump -r "rtmp://edge1.evolink.net:2010/fls" -a "fls/_definst_" -y "ntv_2.stream" -p "http://i.cdn.bg/live/" -T "N0v4TV6#2" --quiet | vlc -

– кепчъринг с rtmpdump

rtmpdump -r "rtmp://edge1.evolink.net:2010/fls" -a "fls/_definst_" -y "ntv_2.stream" -p "http://i.cdn.bg/live/" -T "N0v4TV6#2" -o "NovaTV_01.flv"

За да записвам Нова ТВ се наложи да декомпилирам swf-файла в който беше набутана паролата за стринга (Secure Token – TEA). Тази парола се добавя с параметъра -T, в случая е -T “N0v4TV6#2”

Дъмп на Канал 3

rtmpdump -V -r "rtmp://edge4.cdn.bg:2017/fls" -a "fls/" -W "http://i.cdn.bg/flash/jwplayer510/player.swf" -f "WIN 18,0,0,232" -p "http://i.cdn.bg/live/FP08SWAJ4v" -y "kanal3.stream?at=22c035726e941f171f6676751141b491" --quiet | vlc -

Дъмп на ТВ Европа

rtmpdump -r "rtmp://lb.blb.cdn.bg:2018/fls" -a "fls/" -y "tvevropa.stream" --quiet | vlc -

Дъмп на SPortal
До файл:

rtmpdump -V -r "rtmp://pri.cdn.bg:2001/fls" -a "fls/" -y "sportal_tv_hd.stream" -p "http://www.novini.bg/tv/703-sportal-bg.html" -o "proba.flv"

До VLC palyer:

rtmpdump -V -r "rtmp://pri.cdn.bg:2001/fls" -a "fls/" -y "sportal_tv_hd.stream" -p "http://www.novini.bg/tv/703-sportal-bg.html" --quiet | vlc -

===========================================
Подробно описание, как прихващам стриймовете (писал съм го за един форум, но го поствам и тук).
Надушвам ги с Wireshark. Ето как:
1. Стартираш Wireshark и “надушваш” кое е IP-то което стриймва. Това може да стане и с друга програма, като SmartSniffer или подобна лека програмка. Там се вижда много ясно кое IP точи постоянен трафик. След това залагаш това IP като филтър в Wireshark:
01.8699
Може да си сложиш IP-то като филтър и автоматично, с 2 клика:
02.8583
2. След това кликам на някой от прихванатите филтрирани пакети и с десен бутон избирам [b]Follow TCP stream[/b].
03.6096
3. Показва се прозореца с данните от прихванатите пакети, като в него намирам всичката ми необходима информация, за да направя дъмп на видеото:
04.7009
pageUrl…http://www.btv.bg/live/
flashVer…WIN 11,5,502,149
app…ios
swfUrl..http://images.btv.bg/fplayer/flowplayer.commercial-3.2.5.swf
tcUrl…rtmp://46.10.150.111:80
play………….btvbglive

4. С тези данни мога да стриймвам директно, ако сървара ми позволи, или пък да дъмпна стрийма с rtmpdump, като просто си заместя инфото като аргументи за стартиране на програмата:

rtmpdump -r “rtmp://46.10.150.111:80/ios” -a “ios” -f “WIN 11,5,502,149” -W “http://images.btv.bg/fplayer/flowplayer.commercial-3.2.5.swf” -p “http://www.btv.bg/live/” -y “btvbglive” -o “BTV_01.flv”

UPDATE: Стрийма на БТВ е променен. Новият е:
rtmpdump -r "rtmp://46.10.150.113:80/alpha" -a "alpha" -f "WIN 11,5,502,149" -W "http://www.btv.bg/static/bg/shared/app/flowplayer/flowplayer.rtmp-3.2.13.swf" -p "http://www.btv.bg/live/" -y "alpha" -o "BTV_01.flv"

5. Пийваш малко биричка и междувременно можеш да си пуснеш дъмпвания файл в някой плеър, за да си го гледаш в реално време.
————–
Междувременно написах проста програма – TV Player, която използва по-горните команди за гледане на онлайн телевизия. Програмката се намира тук:
Simple BG TV Player – прост rtmpdump плеар за гледане на BG-телевизии
Изглежда така:
simple bg tv player - онлайн телевизии

Share and Enjoy !

Shares