Rozszerzenie Xinha o obsługę Lightbox



Przy okazji pisania kodu CMSa dla jednej z tworzonych właśnie stron internetowych, wpadłem na pomysł, dlaczego edytora Xinha nie można by zintegrować ze skryptem lightbox. Całkiem to fajne: użytkownik edytuje podstronę, wstawia sobie tabelkę, w komórce zdjęcia i odnośnik do większej wersji fotki - zaznacza opcję Otwórz w Lightbox i ma całkiem przyjemną galerię. W tej sposób możemy powiększać praktycznie każdy obrazek na stronie. Opcja naprawdę bardzo przydatna przy niektórych CMSach opartych na Xinha (a propos - chyba najlepszy edytor WYSIWYG na strony www, z jakim się spotkałem. Uboga nieco dokumentacja, ale możliwości naprawdę olbrzymie), a wszystko bez konieczności ingerencji w kod i dopisywania artybutów rel=”lightbox” itd.

Więc po kolei:

Przygotowujemy Xinha - wyłączamy wszystkie dodatkowe wtyczki zarządzające linkami, pozostawiamy włączony moduł CreateLink (katalog modules).

Wchodzimy w katalog modułu i do pliku link.html dopisujemy kilka informacji. Poniżej podaję źródło mojego pliku:

<html>

<head>

<title>Insert/Modify Link</title>

<script type=”text/javascript” src=”…/…/popups/popup.js”></script>

<link rel=”stylesheet” type=”text/css” href=”…/…/popups/popup.css” />

<script type=”text/javascript”>

window.resizeTo(400, 200);

Xinha = window.opener.Xinha;

function i18n(str) {

return (Xinha._lc(str, ‘Xinha’));

}

function onTargetChanged() {

var f = document.getElementById(”f_other_target”);

if (this.value == “_other”) {

f.style.visibility = “visible”;

f.select();

f.focus();

} else f.style.visibility = “hidden”;

}

function Init() {

__dlg_translate(’Xinha’);

__dlg_init();

// Make sure the translated string appears in the drop down. (for gecko)

document.getElementById(”f_target”).selectedIndex = 1;

document.getElementById(”f_target”).selectedIndex = 0;

var param = window.dialogArguments;

var target_select = document.getElementById(”f_target”);

var use_target = true;

if (param) {

if ( typeof param["f_usetarget"] != “undefined” ) {

use_target = param["f_usetarget"];

}

if ( typeof param["f_href"] != “undefined” ) {

document.getElementById(”f_href”).value = param["f_href"];

document.getElementById(”f_rel”).checked = param["f_rel"];

document.getElementById(”f_title”).value = param["f_title"];

comboSelectValue(target_select, param["f_target"]);

if (target_select.value != param.f_target) {

var opt = document.createElement(”option”);

opt.value = param.f_target;

opt.innerHTML = opt.value;

target_select.appendChild(opt);

opt.selected = true;

}

}

}

if (! use_target) {

document.getElementById(”f_target_label”).style.visibility = “hidden”;

document.getElementById(”f_target”).style.visibility = “hidden”;

document.getElementById(”f_other_target”).style.visibility = “hidden”;

}

var opt = document.createElement(”option”);

opt.value = “_other”;

opt.innerHTML = i18n(”Other”);

target_select.appendChild(opt);

target_select.onchange = onTargetChanged;

document.getElementById(”f_href”).focus();

document.getElementById(”f_href”).select();

}

function onOK() {

var required = {

// f_href shouldn’t be required or otherwise removing the link by entering an empty

// url isn’t possible anymore.

// “f_href”: i18n(”You must enter the URL where this link points to”)

};

for (var i in required) {

var el = document.getElementById(i);

if (!el.value) {

alert(required[i]);

el.focus();

return false;

}

}

// pass data back to the calling window

var fields = ["f_href", "f_title", "f_target", "f_rel"];

var param = new Object();

for (var i in fields) {

var id = fields[i];

var el = document.getElementById(id);

param[id] = el.value;

}

if (param.f_target == “_other”)

param.f_target = document.getElementById(”f_other_target”).value;

__dlg_close(param);

return false;

}

function onCancel() {

__dlg_close(null);

return false;

}

</script>

</head>

<body class=”dialog” onload=”Init()”>

<div class=”title”>Insert/Modify Link</div>

<form>

<table border=”0″ style=”width: 100%;”>

<tr>

<td class=”label”>URL:</td>

<td><input type=”text” id=”f_href” style=”width: 100%” /></td>

</tr>

<tr>

<td class=”label”>Otwórz w lightbox:</td>

<td><input type=”checkbox” id=”f_rel” name=”rel” value=”lightbox” /></td>

</tr>

<tr>

<td class=”label”>Title:</td>

<td><input type=”text” id=”f_title” style=”width: 100%” /></td>

</tr>

<tr>

<td class=”label”><span id=”f_target_label”>Target:</span></td>

<td><select id=”f_target”>

<option value=”">None (use implicit)</option>

<option value=”_blank”>New window (_blank)</option>

<option value=”_self”>Same frame (_self)</option>

<option value=”_top”>Top frame (_top)</option>

</select>

<input type=”text” name=”f_other_target” id=”f_other_target” size=”10″ style=”visibility: hidden” />

</td>

</tr>

</table>

<div id=”buttons”>

<button type=”submit” name=”ok” onclick=”return onOK();”>OK</button>

<button type=”button” name=”cancel” onclick=”return onCancel();”>Cancel</button>

</div>

</form>

</body>

</html>

Edytujemy również plik link.js – tutaj też wklejam źrodło:


/* This compressed file is part of Xinha. For uncompressed sources, forum, and bug reports, go to xinha.org */
/* This file is part of version 0.95 released Mon, 12 May 2008 17:33:15 +0200 */
/* The URL of the most recent version of this file is http://svn.xinha.webfactional.com/trunk/modules/CreateLink/link.js */
CreateLink._pluginInfo={name:"CreateLink",origin:"Xinha Core",version:"$LastChangedRevision:990 $".replace(/^[^:]*:\s*(.*)\s*\$$/,”$1″),developer:”The Xinha Core Developer Team”,developer_url:”$HeadURL:http://svn.xinha.webfactional.com/trunk/modules/CreateLink/link.js $”.replace(/^[^:]*:\s*(.*)\s*\$$/,”$1″),sponsor:”",sponsor_url:”",license:”htmlArea”};
function CreateLink(_1){
}
Xinha.prototype._createLink=function(_2){
var _3=this;
var _4=null;
if(typeof _2==”undefined”){
_2=this.getParentElement();
if(_2){
while(_2&&!/^a$/i.test(_2.tagName)){
_2=_2.parentNode;
}
}
}
if(!_2){
var _5=_3.getSelection();
var _6=_3.createRange(_5);
var _7=0;
if(Xinha.is_ie){
if(_5.type==”Control”){
_7=_6.length;
}else{
_7=_6.compareEndPoints(”StartToEnd”,_6);
}
}else{
_7=_6.compareBoundaryPoints(_6.START_TO_END,_6);
}
if(_7===0){
alert(Xinha._lc(”You need to select some text before creating a link”));
return;
}
_4={f_href:”",f_title:”",f_target:”",f_rel:”",f_usetarget:_3.config.makeLinkShowsTarget};
}else{
_4={f_href:Xinha.is_ie?_3.stripBaseURL(_2.href):_2.getAttribute(”href”),f_title:_2.title,f_target:_2.target,f_rel:_2.rel,f_usetarget:_3.config.makeLinkShowsTarget};
}
Dialog(_3.config.URIs.link,function(_8){
if(!_8){
return false;
}
var a=_2;
if(!a){
try{
var _a=Xinha.uniq(”http://www.example.com/Link”);
_3._doc.execCommand(”createlink”,false,_a);
var _b=_3._doc.getElementsByTagName(”a”);
for(var i=0;i<_b.length;i++){
var _d=_b[i];
if(_d.href==_a){
if(!a){
a=_d;
}
_d.href=_8.f_href;

if(_8.f_target){
_d.target=_8.f_target;
}
if(_8.f_rel){
_d.rel=_8.f_rel;
}
if(_8.f_title){
_d.title=_8.f_title;
}
}
}
}
catch(ex){
}
}else{
var _e=_8.f_href.trim();
_3.selectNodeContents(a);
if(_e===”"){
_3._doc.execCommand(”unlink”,false,null);
_3.updateToolbar();
return false;
}else{
a.href=_e;
}
}
if(!(a&&a.tagName.toLowerCase()==”a”)){
return false;
}
a.target=_8.f_target.trim();
a.rel=_8.f_rel.trim();
a.title=_8.f_title.trim();
_3.selectNodeContents(a);
_3.updateToolbar();
},_4);
};

Uruchamiamy ponownie stronkę z edytorem Xinha i po robocie – wszystko działa super.

A jako pracę domową polecam dopisanie do mojego rozwiązania dodatkowej funkcji pozwalającej na zgrupowanie lightboxów (czyli do odpowiednich linków artybut rel=”lightbox[pierwszy]” itd. - pracy nie dużo, ale na razie nie widzę potrzeby, żeby się tym zajmować:)))

Komentarzy: 2

  1. Szukam jakiejś instrukcji instalacji i obsługi edytora Xinha.

    Pomóżcie ludzie proszę.

    Agnieszka

    2010.01.15
    00:02

  2. Niestety nie ma jako takiej instrukcji obsługi tego edytorka. Ale warto w Google wpisać “xinha” i odwiedzić stronę wydawcy - po kodzie źródłowym przykładów można rozwiązać wszystkie praktycznie problemy.

    admin

    2010.01.18
    23:28