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 ;)
