Autor Zpráva
Tomtomas
Profil
... – Jak na prostou uživatelskou funkci

Jelikož dvakrát neholduji JavaScriptu (spíše vůbec), už nějaký den bezvýsledně vymýšlím způsob, jak "vyrobit" JS funkci do on-line VYSIWIG editoru FCKEditor, jež do TEXTAREA vloží prostou HTML sekvenci – dejme tomu:
<div><img src="" /></div>

Nic víc, jen tato f-ce (v podobě tlačítka) vloží pevně definovaný text (HTML kód).
Např. tlačítko pro "Horizontal Rule" bez ptaní vloží "<hr />". Myslel jsem, že to odkoukám třeba od fce pro toto HR, ale vypadá to jako pro mě přílišné sousto.

Díky mockrát za nějaký nápad nebo zkušenost.
Uroboros
Profil *
vypadá to že chceš něco takovýho :
<script language="JavaScript">

<!--
function icon(theicon) {
document.form.vzkaz.value += theicon;
document.form.vzkaz.focus();
}
//-->
</script>

<a href="javascript:icon('TO CE CHCEŠ VLOŽIT DO TEXTAREI')">ZDE MŮŽE BÝT COKOLI</a>

<textarea name="vzkaz" cols="40" rows="7" scrolling="auto"></textarea>
Uroboros
Profil *
jo, ještě jsem zapoměl, textarea musí byt ve formu s name="form" , nebo si změň script....
peta
Profil *
Uroboros
Tomtomas
http://www.jakpsatweb.cz/priklady/index.html
Wysiwyg editor na šest řádků
Tomtomas
Profil
Díky za reakce.

>>Uroboros
Podobně jsem ve chvíli psaní příspěvku začal uvažovat a tato reakce mě jen utvrdila v možném správném směru. Pův. jsem si říkal, jestli někdo nezná rovnou postup přimo ve FCKEditoru. Ale nakonec jdu tímto směrem. Jen mě vadilo, že nelze vkládat tam, kde postavím v objektu <textarea> kurzor, ale až na konec již vloženého textu, což je pro mě zásadním způsobem limitující. Po pátrání jsem došel k tomuto řešení:

Na zdejší diskusi Vložení textu do textarey na pozici kurzoru se toto řešilo. Je zde zmíněno řešení Alexe Kinga Inserting at the cursor using JavaScript, resp. šířeji na stránce JS Quicktags (demontrativní příklad). Z toho mě po určité redukci vyšlo toto řešení:
<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>JS Quicktags Example</title>
<script type="text/javascript" src="js-quicktags.js"></script>
</head>

<body>
<h1>JS Quicktags Example</h1>

<form>
<fieldset>
<legend>Example</legend>
<input type="button" id="ed_img" class="ed_button" onclick="edInsertImage(edCanvas);" value="IMG" />
<textarea id="canvas" rows="20" cols="50"></textarea>
<script type="text/javascript">var edCanvas = document.getElementById('canvas');</script>
</fieldset>
</form>

</body>
</html>

a samotný JS soubor
// autor: Alex King, alexking.org

function edAddTag(button) {
if (edButtons[button].tagEnd != '') {
edOpenTags[edOpenTags.length] = button;
document.getElementById(edButtons[button].id).value = '/' + document.getElementById(edButtons[button].id).value;
}
}

// insertion code

function edInsertTag(myField, i) {
//IE support
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
if (sel.text.length > 0) {
sel.text = edButtons[i].tagStart + sel.text + edButtons[i].tagEnd;
}
else {
if (!edCheckOpenTags(i) || edButtons[i].tagEnd == '') {
sel.text = edButtons[i].tagStart;
edAddTag(i);
}
else {
sel.text = edButtons[i].tagEnd;
edRemoveTag(i);
}
}
myField.focus();
}
//MOZILLA/NETSCAPE support
else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
var cursorPos = endPos;
var scrollTop = myField.scrollTop;
if (startPos != endPos) {
myField.value = myField.value.substring(0, startPos)
+ edButtons[i].tagStart
+ myField.value.substring(startPos, endPos)
+ edButtons[i].tagEnd
+ myField.value.substring(endPos, myField.value.length);
cursorPos += edButtons[i].tagStart.length + edButtons[i].tagEnd.length;
}
else {
if (!edCheckOpenTags(i) || edButtons[i].tagEnd == '') {
myField.value = myField.value.substring(0, startPos)
+ edButtons[i].tagStart
+ myField.value.substring(endPos, myField.value.length);
edAddTag(i);
cursorPos = startPos + edButtons[i].tagStart.length;
}
else {
myField.value = myField.value.substring(0, startPos)
+ edButtons[i].tagEnd
+ myField.value.substring(endPos, myField.value.length);
edRemoveTag(i);
cursorPos = startPos + edButtons[i].tagEnd.length;
}
}
myField.focus();
myField.selectionStart = cursorPos;
myField.selectionEnd = cursorPos;
myField.scrollTop = scrollTop;
}
else {
if (!edCheckOpenTags(i) || edButtons[i].tagEnd == '') {
myField.value += edButtons[i].tagStart;
edAddTag(i);
}
else {
myField.value += edButtons[i].tagEnd;
edRemoveTag(i);
}
myField.focus();
}
}

function edInsertContent(myField, myValue) {
//IE support
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
myField.focus();
}
//MOZILLA/NETSCAPE support
else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
var scrollTop = myField.scrollTop;
myField.value = myField.value.substring(0, startPos)
+ myValue
+ myField.value.substring(endPos, myField.value.length);
myField.focus();
myField.selectionStart = startPos + myValue.length;
myField.selectionEnd = startPos + myValue.length;
myField.scrollTop = scrollTop;
} else {
myField.value += myValue;
myField.focus();
}
}

function edInsertImage(myField) {
var myValue = prompt('Enter the URL of the image', 'http://');
if (myValue) {
myValue = '<img src="'
+ myValue
+ '" alt="' + prompt('Enter a description of the image', '')
+ '" />';
edInsertContent(myField, myValue);
}
}

function edInsertFootnote(myField) {
var note = prompt('Enter the footnote:', '');
if (!note || note == '') {
return false;
}
var now = new Date;
var fnId = 'fn' + now.getTime();
var fnStart = edCanvas.value.indexOf('<ol class="footnotes">');
if (fnStart != -1) {
var fnStr1 = edCanvas.value.substring(0, fnStart)
var fnStr2 = edCanvas.value.substring(fnStart, edCanvas.value.length)
var count = countInstances(fnStr2, '<li id="') + 1;
}
else {
var count = 1;
}
var count = '<sup><a href="#' + fnId + 'n" id="' + fnId + '" class="footnote">' + count + '</a></sup>';
edInsertContent(edCanvas, count);
if (fnStart != -1) {
fnStr1 = edCanvas.value.substring(0, fnStart + count.length)
fnStr2 = edCanvas.value.substring(fnStart + count.length, edCanvas.value.length)
}
else {
var fnStr1 = edCanvas.value;
var fnStr2 = "\n\n" + '<ol class="footnotes">' + "\n"
+ '</ol>' + "\n";
}
var footnote = ' <li id="' + fnId + 'n">' + note + ' [<a href="#' + fnId + '">back</a>]</li>' + "\n"
+ '</ol>';
edCanvas.value = fnStr1 + fnStr2.replace('</ol>', footnote);
}

function countInstances(string, substr) {
var count = string.split(substr);
return count.length - 1;
}

S tím, že u f-ce function edInsertImage se definuje konkrétní vkládaná sekvence kódu. Řešení v této podobě je sice plně funkční, ale rozsahem JS kódu trochu opulentní = nejsem s tím úplně spokojený / nerozumím významu některých částí kódu. Proto zkusím ještě vyjít z pův. kódu na http://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-java script/.
Pro vsazení do FCKEditoru bych pak použil vložení f-ce jako pluginu. Snad to bude fachčit ;)
Toto téma je uzamčeno. Odpověď nelze zaslat.