Форумы портала PHP.SU :: TEXTAREA редактор

CODE (javascript):
скопировать код в буфер обмена
 
var ValualitEditor = [];
 
var ValualitEditorConfigStandart = {
                wysiwyg: false, width:500, height: 300,
                Bottoms:[
                        {text:"B",tag_start:"<b>",tag_stop:"</b>",css_class:"ve_b_b"},
                        {text:"I",tag_start:"<i>",tag_stop:"</i>",css_class:"ve_b_i"},
                        {text:"S",tag_start:"<s>",tag_stop:"</s>",css_class:"ve_b_s"},
                        {text:"U",tag_start:"<u>",tag_stop:"</u>",css_class:"ve_b_u"},
                        {text:"UL",tag_start:"<ul>",tag_stop:"</ul>",css_class:""},
                        {text:"OL",tag_start:"<ol>",tag_stop:"</ol>",css_class:""},
                        {text:"LI",tag_start:"<li>",tag_stop:"</li>",css_class:"ve_b_li"},
                        {text:"Шаблон",tag_start:"<font style='color:#298A08;'><H2>ValualitEditor</H2></font>{vj[n]}<a target='_blank' href='http://valualit.info/ve.png'><img alt='ValualitEditor' src='http://valualit.info/ve.png' style='float: left; margin-right: 10px; width:300px' /></a>{vj[n]}<u>ValualitEditor</u>: <b>ValualitEditor</b>{vj[n]}<u>ValualitEditor</u>: <b>ValualitEditor</b>{vj[n]}<u>ValualitEditor</u>: <b>ValualitEditor</b>{vj[n]}{vj[n]}<div style='clear: both;'></div>{vj[n]}ValualitEditor - бесплатный текстовый редактор для Вашего сайта.{vj[n]}Это простой редактор с возможностью быстро создать нужные кнопки (шаблоны).",tag_stop:"",css_class:""},
                        {text:"hr",tag_start:"<hr />",tag_stop:"",css_class:""},
                        {text:"« »",tag_start:"«",tag_stop:"»",css_class:""},
                        {text:"Картинка",tag_start:"<img alt='' src='",tag_stop:"' />",css_class:""},
                        {text:"Ссылка",tag_start:"<a href='#'>",tag_stop:"</a>",css_class:""},
                        {text:"Читать дальше",tag_start:"<!--more-->",tag_stop:"",css_class:""}
                        ],
                Selects:[
                        {text:"Цвет",tag_start:"<font style=\"color:{value};\">",tag_stop:"</font>",css_class:"",items:[
                                {value:"#000000",name:"Черный",style:"color:#000000;"},
                                {value:"#08088A",name:"#08088A",style:"color:#08088A;"},
                                {value:"#298A08",name:"#298A08",style:"color:#298A08;"},
                                {value:"#8A0808",name:"#8A0808",style:"color:#8A0808;"},
                                {value:"#B45F04",name:"#B45F04",style:"color:#B45F04;"},
                                {value:"#FAFAFA",name:"#FAFAFA",style:"color:#FAFAFA; background-color: #000;"}
                                ]},
                        {text:"Заголовки",tag_start:"<{value}>",tag_stop:"</{value}>",css_class:"",items:[
                                {value:"H1",name:"H1",style:""},
                                {value:"H2",name:"H2",style:""},
                                {value:"H3",name:"H3",style:""},
                                {value:"H4",name:"H4",style:""},
                                {value:"H5",name:"H5",style:""},
                                {value:"H6",name:"H6",style:""}
                                ]}
                        ],
                Smails:[
                        "<ve class=\"ve_smile_l1_h1\"></ve>",
                        "<ve class=\"ve_smile_l1_h2\"></ve>",
                        "<ve class=\"ve_smile_l1_h3\"></ve>",
                        "<ve class=\"ve_smile_l1_h4\"></ve>",
                        "<ve class=\"ve_smile_l1_h5\"></ve>",
                        "<ve class=\"ve_smile_l1_h6\"></ve>",
                        "<ve class=\"ve_smile_l1_h7\"></ve>",
                        "<ve class=\"ve_smile_l2_h1\"></ve>",
                        "<ve class=\"ve_smile_l2_h2\"></ve>",
                        "<ve class=\"ve_smile_l2_h3\"></ve>",
                        "<ve class=\"ve_smile_l2_h4\"></ve>",
                        "<ve class=\"ve_smile_l2_h5\"></ve>",
                        "<ve class=\"ve_smile_l2_h6\"></ve>",
                        "<ve class=\"ve_smile_l2_h7\"></ve>",
                        "<ve class=\"ve_smile_l3_h1\"></ve>",
                        "<ve class=\"ve_smile_l3_h2\"></ve>",
                        "<ve class=\"ve_smile_l3_h3\"></ve>",
                        "<ve class=\"ve_smile_l3_h4\"></ve>",
                        "<ve class=\"ve_smile_l3_h5\"></ve>",
                        "<ve class=\"ve_smile_l3_h6\"></ve>",
                        "<ve class=\"ve_smile_l3_h7\"></ve>",
                        "<ve class=\"ve_smile_l4_h1\"></ve>",
                        "<ve class=\"ve_smile_l4_h2\"></ve>",
                        "<ve class=\"ve_smile_l4_h3\"></ve>",
                        "<ve class=\"ve_smile_l4_h4\"></ve>",
                        "<ve class=\"ve_smile_l4_h5\"></ve>",
                        "<ve class=\"ve_smile_l4_h6\"></ve>",
                        "<ve class=\"ve_smile_l4_h7\"></ve>",
                        "<ve class=\"ve_smile_l5_h1\"></ve>",
                        "<ve class=\"ve_smile_l5_h2\"></ve>",
                        "<ve class=\"ve_smile_l5_h3\"></ve>",
                        "<ve class=\"ve_smile_l5_h4\"></ve>",
                        "<ve class=\"ve_smile_l5_h5\"></ve>",
                        "<ve class=\"ve_smile_l5_h6\"></ve>",
                        "<ve class=\"ve_smile_l5_h7\"></ve>",
                        "<ve class=\"ve_smile_l6_h1\"></ve>",
                        "<ve class=\"ve_smile_l6_h2\"></ve>",
                        "<ve class=\"ve_smile_l6_h3\"></ve>",
                        "<ve class=\"ve_smile_l6_h4\"></ve>",
                        "<ve class=\"ve_smile_l6_h5\"></ve>",
                        "<ve class=\"ve_smile_l6_h6\"></ve>",
                        "<ve class=\"ve_smile_l6_h7\"></ve>",
                        "<ve class=\"ve_smile_l7_h1\"></ve>",
                        "<ve class=\"ve_smile_l7_h2\"></ve>",
                        "<ve class=\"ve_smile_l7_h3\"></ve>",
                        "<ve class=\"ve_smile_l7_h4\"></ve>",
                        "<ve class=\"ve_smile_l7_h5\"></ve>",
                        "<ve class=\"ve_smile_l7_h6\"></ve>",
                        "<ve class=\"ve_smile_l7_h7\"></ve>",
                        "<ve class=\"ve_smile_l8_h1\"></ve>",
                        "<ve class=\"ve_smile_l8_h2\"></ve>",
                        "<ve class=\"ve_smile_l8_h3\"></ve>",
                        "<ve class=\"ve_smile_l8_h4\"></ve>",
                        "<ve class=\"ve_smile_l8_h5\"></ve>",
                        "<ve class=\"ve_smile_l8_h6\"></ve>",
                        "<ve class=\"ve_smile_l8_h7\"></ve>",
                        "<ve class=\"ve_smile_l9_h1\"></ve>",
                        "<ve class=\"ve_smile_l9_h2\"></ve>",
                        "<ve class=\"ve_smile_l9_h3\"></ve>",
                        "<ve class=\"ve_smile_l9_h4\"></ve>",
                        "<ve class=\"ve_smile_l9_h5\"></ve>",
                        "<ve class=\"ve_smile_l9_h6\"></ve>",
                        "<ve class=\"ve_smile_l9_h7\"></ve>",
                        "<ve class=\"ve_smile_l10_h1\"></ve>",
                        "<ve class=\"ve_smile_l10_h2\"></ve>",
                        "<ve class=\"ve_smile_l10_h3\"></ve>",
                        "<ve class=\"ve_smile_l10_h4\"></ve>",
                        "<ve class=\"ve_smile_l10_h5\"></ve>",
                        "<ve class=\"ve_smile_l10_h6\"></ve>",
                        "<ve class=\"ve_smile_l10_h7\"></ve>",
                        "<ve class=\"ve_smile_l11_h1\"></ve>",
                        "<ve class=\"ve_smile_l11_h2\"></ve>",
                        "<ve class=\"ve_smile_l11_h3\"></ve>",
                        "<ve class=\"ve_smile_l11_h4\"></ve>",
                        "<ve class=\"ve_smile_l11_h5\"></ve>",
                        "<ve class=\"ve_smile_l11_h6\"></ve>",
                        "<ve class=\"ve_smile_l11_h7\"></ve>",
                        "<ve class=\"ve_smile_l12_h1\"></ve>",
                        "<ve class=\"ve_smile_l12_h2\"></ve>",
                        "<ve class=\"ve_smile_l12_h3\"></ve>",
                        "<ve class=\"ve_smile_l12_h4\"></ve>",
                        "<ve class=\"ve_smile_l12_h5\"></ve>",
                        "<ve class=\"ve_smile_l12_h6\"></ve>",
                        "<ve class=\"ve_smile_l12_h7\"></ve>",
                        "<ve class=\"ve_smile_l13_h1\"></ve>",
                        "<ve class=\"ve_smile_l13_h2\"></ve>",
                        "<ve class=\"ve_smile_l13_h3\"></ve>",
                        "<ve class=\"ve_smile_l13_h4\"></ve>",
                        "<ve class=\"ve_smile_l13_h5\"></ve>",
                        "<ve class=\"ve_smile_l13_h6\"></ve>",
                        "<ve class=\"ve_smile_l13_h7\"></ve>",
                        "<ve class=\"ve_smile_l14_h1\"></ve>",
                        "<ve class=\"ve_smile_l14_h2\"></ve>",
                        "<ve class=\"ve_smile_l14_h3\"></ve>",
                        "<ve class=\"ve_smile_l14_h4\"></ve>",
                        "<ve class=\"ve_smile_l14_h5\"></ve>",
                        "<ve class=\"ve_smile_l14_h6\"></ve>",
                        "<ve class=\"ve_smile_l14_h7\"></ve>"
                        ]
                };
                
var ValualitEditorConfigOptimal = {
                wysiwyg: false, width:500, height: 300,
                Bottoms:[
                        {text:"B",tag_start:"<b>",tag_stop:"</b>",css_class:"ve_b_b"},
                        {text:"I",tag_start:"<i>",tag_stop:"</i>",css_class:"ve_b_i"},
                        {text:"S",tag_start:"<s>",tag_stop:"</s>",css_class:"ve_b_s"},
                        {text:"U",tag_start:"<u>",tag_stop:"</u>",css_class:""},
                        {text:"« »",tag_start:"«",tag_stop:"»",css_class:""},
                        {text:"IMG",tag_start:"<img alt='' src='",tag_stop:"' />",css_class:""},
                        {text:"Link",tag_start:"<a href='#'>",tag_stop:"</a>",css_class:""}
                        ],
                Selects:[
                        {text:"Цвет",tag_start:"<font style=\"color:{value};\">",tag_stop:"</font>",css_class:"",items:[
                                {value:"#000000",name:"Черный",style:"color:#000000;"},
                                {value:"#08088A",name:"#08088A",style:"color:#08088A;"},
                                {value:"#298A08",name:"#298A08",style:"color:#298A08;"},
                                {value:"#8A0808",name:"#8A0808",style:"color:#8A0808;"},
                                {value:"#B45F04",name:"#B45F04",style:"color:#B45F04;"},
                                {value:"#FAFAFA",name:"#FAFAFA",style:"color:#FAFAFA; background-color: #000;"}
                                ]}
                        ]               
                };
                
var ValualitEditorConfigSmails = {
                wysiwyg: false, width:500, height: 100,
                Bottoms:[
                        {text:"« »",tag_start:"«",tag_stop:"»",css_class:""}
                        ],
                Smails: ValualitEditorConfigStandart['Smails']
                };
 
function OnLoadValualitEditor(){
        for(var key in ValualitEditor){ 
                if (document.getElementById(key) != undefined){
                        load_wysiwyg(ValualitEditor[key]['wysiwyg'],key,ValualitEditor[key]['width'],ValualitEditor[key]['height']);
                        if (ValualitEditor.hasOwnProperty(key)) {
                                AddValualitEditor(key,ValualitEditor[key]);
                        }
                        document.getElementById(key+"Bottom").innerHTML += "<a href=\"javascript://\" onClick=\"reload_mode_wysiwyg('"+key+"'); return false;\">Посмотреть</a>";
                        document.getElementById(key).onblur = reload_content_ve_wysiwyg(key);
                }
        } 
}
 
function AddValualitEditor(elem, param){
        document.getElementById(elem).style.width = param["width"]+"px";
        document.getElementById(elem).style.height = param["height"]+"px";
        
        // Добавление кнопок
        for(var key in param["Bottoms"]){ 
                if (param["Bottoms"].hasOwnProperty(key)) {
                        document.getElementById(elem+"Bottom").innerHTML += ValualitBottoms(elem,param["Bottoms"][key]['text'],param["Bottoms"][key]['tag_start'],param["Bottoms"][key]['tag_stop'],param["Bottoms"][key]['css_class']) + " ";
                }
        }
        
        for(var key in param["Selects"]){ 
                if (param["Selects"].hasOwnProperty(key)) {
                        document.getElementById(elem+"Bottom").innerHTML += ValualitSelects(elem,key) + " ";
                }
        }
        
        var list_smails = "";
        for(var key in param["Smails"]){ 
                if (param["Smails"].hasOwnProperty(key)) {
                        list_smails += "<font onClick=\"ValualitBottomsFunction('"+elem+"',this.innerHTML,''); return false;\">"+ValualitEditor[elem]["Smails"][key]+"</font>";
                }
        }
        document.getElementById(elem+"Bottom").innerHTML += '<a href="javascript://" class="ve_b_smails">Смайлы <div class="smails_list">' +list_smails+'</div> </a>';
        smails_list='';
}
 
function ValualitBottoms(elem,text,tag_start,tag_stop,css_class){
        return "<a href=\"JavaScript://\" class=\""+css_class+"\" onClick=\"ValualitBottomsFunction('"+elem+"','"+ValualitAddSlashes(tag_start)+"','"+ValualitAddSlashes(tag_stop)+"'); return false;\">"+text+"</a>";
}
 
function ValualitSelects(elem,keys){
        var param, onCLick;
        param = ValualitEditor[elem]["Selects"][keys];
        onCLick = "ValualitSelectsFunction('"+elem+"','"+keys+"',this.value); this.options[0].selected = true; return false;";
        var sel = "<select name=\""+elem+"\" onchange=\""+onCLick+"\">";
        sel += "<option disabled selected>"+param['text']+"</option>";
        for(var key in param["items"]){ 
                if (param["items"].hasOwnProperty(key)) {
                        sel += "<option style=\""+param["items"][key]['style']+"\" value=\""+param["items"][key]['value']+"\">"+param["items"][key]['name']+"</option>";
                }
        }
        sel += "</select>";
        return sel;
}
 
function ValualitBottomsFunction(elem,tag_start,tag_stop) {
        var obj = document.getElementById(elem);
        var str = obj.value;
        var Caret = ValualitCaretGet(elem);
        if(Caret["start"] >=0 && Caret["stop"] != Caret["start"]){
                obj.value = str.substr(0,Caret["start"]) +""+ tag_start +""+ str.substr(Caret["start"],(Caret["stop"]-Caret["start"])) +""+ tag_stop +""+ str.substr(Caret["stop"]);
                ValualitPutCaret(elem,(Caret["stop"]+tag_start.length));
        } else {
                obj.value = str.substr(0,Caret["start"]) +""+ tag_start +""+ tag_stop +""+ str.substr(Caret["start"]);
                ValualitPutCaret(elem,(Caret["start"]+tag_start.length));
        } 
        obj.value = obj.value.replace(/\{vj\[n\]\}/g, '\n');
}
 
function ValualitSelectsFunction(elem,keys,value) {
        var param, tag_start, tag_stop;
        param = ValualitEditor[elem]["Selects"][keys];
        tag_start=param['tag_start'].replace(new RegExp("{value}",'g'),value);
        tag_stop=param['tag_stop'].replace(new RegExp("{value}",'g'),value);
        ValualitBottomsFunction(elem,tag_start,tag_stop);
}
 
function ValualitCaretGet(elem){
        var el = document.getElementById(elem);
        el.focus();
        if(document.selection) {
                var range = document.selection.createRange();
                var range_length = range.text.length;
                var clone = range.duplicate();
                range.collapse(true);
                clone.moveToElementText(el);
                clone.setEndPoint('EndToEnd', range);
                return {
                        start: clone.text.length,
                        stop: (clone.text.length + range_length)
                };
        } else if(el.selectionStart!==false){
                return {
                        start: el.selectionStart,
                        stop: el.selectionEnd
                };
        } else {
                return {
                        start: 1, stop: 1
                };
        }
}
 
function ValualitPutCaret(elem,n){
        var o = document.getElementById(elem);
        if(!document.all) 
        {
                var end = o.value.length;  
                o.setSelectionRange(n,n);  
                o.focus();  
        } else {      
                var r = o.createTextRange();      
                r.collapse(true);
        r.moveStart("character", n);
        r.moveEnd("character", 0);
        r.select();
        }
}
 
function ValualitAddSlashes(str) 
{
    return str.replace(new RegExp("([\"\']{1})",'g'),"\\$1");
}
 
function load_wysiwyg(display,textarea_id,width,height){
        var Textarea = document.getElementById(textarea_id); 
        var Container = document.createElement("DIV");
        Container.style.clear = "both";
        Textarea.parentNode.insertBefore(Container, Textarea); 
        Container.appendChild(Textarea);
        var iframe = "<div onblur=\"reload_content_ve_textarea('"+textarea_id+"')\" contentEditable=\"false\" class='valualiteditoriframe' id='iframe"+textarea_id+"'></div>";
        Container.innerHTML =  iframe + Container.innerHTML;
        var Frame = Container.childNodes[0];
        var FrameDoc = document.getElementById("iframe"+textarea_id);
        FrameDoc.innerHTML = Textarea.value;
        if(display==true){
                document.getElementById(textarea_id).style.display = "none";
        } else {
                document.getElementById("iframe"+textarea_id).style.display = "none";
        }
}
 
function reload_mode_wysiwyg(textarea_id){
        var FrameDoc = document.getElementById("iframe"+textarea_id);
        if(document.getElementById(textarea_id).style.display == "none"){
                document.getElementById(textarea_id).style.display = "inline";
                document.getElementById("iframe"+textarea_id).style.display = "none";
                document.getElementById(textarea_id).value = FrameDoc.innerHTML.replace(new RegExp("<br>",'g'),"\n");
        } else {
                document.getElementById(textarea_id).style.display = "none";
                document.getElementById("iframe"+textarea_id).style.display = "block";
                FrameDoc.innerHTML = document.getElementById(textarea_id).value.replace(new RegExp("\n",'g'),"<br>");
        }
}
 
function reload_content_ve_textarea(textarea_id){
        document.getElementById(textarea_id).value = document.getElementById("iframe"+textarea_id).innerHTML.replace(new RegExp("<br>",'g'),"\n");
}
 
function reload_content_ve_wysiwyg(textarea_id){
        document.getElementById("iframe"+textarea_id).innerHTML = document.getElementById(textarea_id).value.replace(new RegExp("\n",'g'),"<br>");
}
 
window.onload=function(){ OnLoadValualitEditor(); }
 
(Отредактировано автором: 15 Апреля, 2013 - 12:51:54)