Bevor Sie Ihre Frage stellen:

Suche

 

Danke

Edle Spender*innen

Links

Blogger.de Startseite

Blogger.de: Aktuelle Informationen

Antville Layouts: geeignet für blogger.de

Werbung


Mittwoch, 11. Januar 2006
Anfängerfrage
Oje... hab mich so gefreut, dass ich hier bloggen darf und stell mich gleich mal doof an. Ähm... Kann man beim Beitragschreiben Links und Textformatierungen nur in HTML eingeben oder gibt es irgendwo eine hilfreiche Symbolleiste zur Vereinfachung, die ich nicht sehe? Oder gibt es einen Trick? *grübel* Oder wollt Ihr es den Weicheiern wie mir nicht zu einfach machen??? :-) Danke jedenfalls sehr für Aufklärung...
schluesselkind, 11. Jan 06, 22:47 | Link | 13 Kommentare | kommentieren

Eine Symbolleiste gibt es standardmäßig nicht.
Links baut man z.B. ganz einfach mit folgendem code ein:

Dies ist ein Text mit einem <a href="http://www.irgendeineseite.de">Link</a>

Sie sehen, der Text "Link" ist umgeben von zwei tags in spitzen Klammern, im ersten steht die Adresse.
leteil, 11. Jan 2006, 23:37  | link
 
Danke schön für die schnelle Antwort! Dann mache ich das so... wollte nur nicht in ca. einem halben Jahr entdecken, dass es auch anders geht... :-)
schluesselkind, 12. Jan 2006, 00:10  | link
 
Wenn Sie sich ein bisschen mit Javascript auskennen und sich in das Layout-Schema von blogger.de eingearbeitet haben, dann können Sie sich solche Symbolleisten für Ihr Blog auch selber bauen, zum Beispiel mit Hilfe von widgEditor.
ichichich, 12. Jan 2006, 11:01  | link
 
Toller Tipp! Danke, Herr (?) ichichich. Im Moment bin ich damit noch nicht so firm, aber das Werkeln am Layout macht ja auch tatsächlich Spaß. Wenn ich mich mal durch die Basics durchgearbeitet habe, kommt so etwas dran. Link ist schon gespeichert.
schluesselkind, 12. Jan 2006, 11:23  | link
 
Oder die Skin "Story editor form" durch folgenden Code ersetzen:


<!-- begin editor enhancement javascript -->
<script type="text/javascript">

function addEvent(el, evname, func) {
if (el.attachEvent) {
el.attachEvent("on" + evname, func);
} else {
el.addEventListener(evname, func, true);
}
}

function stopEvent(evt) {
if (evt.preventDefault) {
evt.preventDefault();
evt.stopPropagation();
} else {
evt.cancelBubble = true;
evt.returnValue = false;
}
}

// returns the current selection object
function getSelection(ele) {
if (document.all) {
return ele.selection;
} else {
return window.getSelection();
}
}

function getSelectedText(ele) {
if (!ele) return "";

var result = "";
if (document.all) {
var selection = document.selection;
if (!selection) return "";
if (selection.type.toLowerCase() != "text") return;
ele.focus();
var range = selection.createRange();
if (range.parentElement() != ele) return;

return range.text;

} else {
var selectionStart = ele.selectionStart;
var selectionEnd = ele.selectionEnd;
if (selectionStart >= ele.length) return;

ele.setSelectionRange(selectionStart, selectionEnd);
ele.focus();

return ele.value.slice(selectionStart, selectionEnd);

}

return;
}

var bookMark01;

function pasteText(ele, before, text, after) {
if (!ele) return false;
before = before ? before : "";
text = text ? text : "";
after = after ? after : "";

if (document.all) {
var selection = document.selection;
if (!selection) return false;

if (selection.type.toLowerCase() != "text" && selection.type.toLowerCase() != "none") return;
ele.focus();
var range = selection.createRange();
if (range.parentElement() != ele) return false;

range.text = before + text + after;
bookMark01 = range.getBookmark();
range.moveStart("character", -after.length);
range.collapse(true);
range.select();
ele.focus();

} else {
var selectionStart = ele.selectionStart;
var selectionEnd = ele.selectionEnd;
if (selectionStart >= ele.length) return false;

ele.value.slice(selectionStart, selectionEnd);
ele.value = ele.value.slice(0, selectionStart) + before + text + after + ele.value.slice(selectionEnd);
var cursorPos = selectionStart + before.length + text.length;
ele.setSelectionRange(cursorPos, cursorPos);
ele.focus();

}

return true;
}

var formatOptions = [
{ "identifier": 'bold',
"before": '<b>',
"after": '</b>',
"shortcut": 'b' },
{ "identifier": 'italic',
"before": '<i>',
"after": '</i>',
"shortcut": 'i' },
{ "identifier": 'underline',
"before": '<u>',
"after": '</u>',
"shortcut": 'u' },
{ "identifier": 'strike',
"before": '<strike>',
"after": '</strike>'},
{ "identifier": 'cite',
"before": '<cite>',
"after": '</cite>',
"shortcut": '"' },
{ "identifier": 'ul',
"before": '<ul>\n <li>',
"after": '</li>\n</ul>',
"shortcut": '*' },
{ "identifier": 'ol',
"before": '<ol>\n <li>',
"after": '</li>\n</ol>',
"shortcut": '.' },
{ "identifier": 'macro',
"dialog": 'insertMacro',
"shortcut": '%' },
{ "identifier": 'file',
"before": '<\% file name="',
"after": '" %>',
"shortcut": 'f' },
{ "identifier": 'image',
"before": '<img src="http://',
"after": '" alt="">',
"shortcut": 'm' },
{ "identifier": 'link',
"command": 'insertLink',
"shortcut": 'k' },

{ "identifier": 'undo',
"shortcut": 'z',
"command": 'undo' },
{ "identifier": 'redo',
"shortcut": 'z',
"shiftKey": true,
"command": 'redo' },
{ "identifier": 'redo',
"shortcut": 'y',
"command": 'redo' }
]

var dialog;
var openedDialog = null;
function doFormat(format, id) {
var editableArea = document.getElementById(id);

for (var i in formatOptions) {
if (formatOptions[i].identifier == format) {
if (formatOptions[i].dialog) {
if (dialog) dialog.close();
dialog = window.open(formatOptions[i].dialog,'dialog','width=550,height=550,resizable');
openedDialog = new Object();
openedDialog.id = id;

} else if (formatOptions[i].command) {
doCommand(editableArea, formatOptions[i].command);

} else {
pasteText(editableArea, formatOptions[i].before, getSelectedText(editableArea), formatOptions[i].after);

}

}
}
}

function doCommand(ele, cmd) {
if (is_ie) {
var selection = document.selection;
if (!selection) return "";
ele.focus();
var range = selection.createRange();
if (range.parentElement() != ele) return;

if (cmd == "undo") {
document.execCommand("undo");

} else if (cmd == "redo") {
document.execCommand("redo");

} else if (cmd == "insertLink") {
var linkURL = window.prompt("Gib hier eine vollständige URL ein:", "http://" + ele);
pasteText(ele, '<a href="' + linkURL + '">', getSelectedText(ele), '</a>');

}

} else {
if (cmd == "insertLink") {
var linkURL = window.prompt("Gib hier eine vollständige URL ein:", "http://");
pasteText(ele, '<a href="' + linkURL + '">', getSelectedText(ele), '</a>');
}

}

}

var KEY_TAB = 9;
var KEY_REFRESH= 116; //F5 abfangen
var KEY_ENTER= 13;
var TAB_INDENT = 2;
var KEY_SPACE = 32;

var autoCompletion = [
{ "identifier": '<a',
"pattern": '<a href="http://"></a>',
"moveBy": -6 },
{ "identifier": '<img',
"pattern": '<img src="http://" alt="">',
"moveBy": -9 },
{ "identifier": '<table',
"pattern": '<table><tbody>\n<tr><td></td></tr>\n</tbody></table>',
"moveBy": -27 },
{ "identifier": '<ol',
"pattern": '<ol>\n <li></li>\n</ol>\n',
"moveBy": -12 },
{ "identifier": '\n*',
"pattern": '\n<ul>\n <li></li>\n</ul>\n',
"key": KEY_TAB,
"moveBy": -12 },
{ "identifier": '\n1.',
"pattern": '\n<ol>\n <li></li>\n</ol>\n',
"key": KEY_TAB,
"moveBy": -12 },
{ "identifier": '</li>',
"pattern": '</li>\n <li></li>',
"moveBy": -5 },
{ "identifier": '<ul',
"pattern": '<ul>\n <li></li>\n</ul>\n',
"moveBy": -12 },
{ "identifier": 'via',
"pattern": '[via <a href="http://"></a>]',
"moveBy": -7 },
{ "identifier": '<cite',
"pattern": '<cite>\n\n</cite>\n',
"moveBy": -9 },
{ "identifier": '\n"',
"pattern": '\n<cite>\n\n</cite>\n',
"moveBy": -9 },
{ "identifier": '<cite>',
"pattern": '<cite>\n\n</cite>\n',
"moveBy": -9 },
{ "identifier": '<\% image',
"pattern": '<\% image name="" %>',
"moveBy": -4 },
{ "identifier": '<\% file',
"pattern": '<\% file name="" %>',
"moveBy": -4 }
]


function editorKeyListener(evt) {
evt = evt ? evt : window.event;
var ele = evt.target ? evt.target : evt.srcElement;
var editableArea = ele;

var keyCode = (is_ie) ? evt.keyCode : evt.charCode

if (evt.ctrlKey && !evt.altKey)
{
for (var i in formatOptions) {
if (formatOptions[i].shortcut == String.fromCharCode(keyCode).toLowerCase() && evt.shiftKey == (formatOptions[i].shiftKey == true)) {
if (formatOptions[i].dialog) {
if (dialog) dialog.close();
dialog = window.open(formatOptions[i].dialog,'dialog','width=550,height=550,resizable');

} else if (formatOptions[i].command) {
doCommand(editableArea, formatOptions[i].command);

} else {
pasteText(editableArea, formatOptions[i].before, getSelectedText(editableArea), formatOptions[i].after);

}
stopEvent(evt);
return;
}
}
}

if (is_ie) {
if (evt.keyCode == KEY_SPACE || evt.keyCode == KEY_TAB || evt.keyCode == KEY_ENTER) {
var testRange = document.selection.createRange();
testRange.moveStart("character", -20);
var preText = testRange.text;

for (var i in autoCompletion) {
if (preText.substring(preText.length - autoCompletion[i].identifier.length, preText.length) == autoCompletion[i].identifier) {
if (autoCompletion[i].key != null && autoCompletion[i].key != evt.keyCode) {
continue;
}

var range = document.selection.createRange();
range.moveStart("character", -autoCompletion[i].identifier.length);
range.select();

range.text = autoCompletion[i].pattern;

range.move("character", autoCompletion[i].moveBy);
range.select();

stopEvent(evt);
return;
}
}
}

} else {
if (evt.charCode == KEY_SPACE || evt.keyCode == KEY_TAB || evt.keyCode == KEY_ENTER) {

var selectionStart = ele.selectionStart;
var selectionEnd = ele.selectionEnd;

var preText = ele.value.substring(Math.max(0, selectionStart - 20), selectionEnd);

for (var i in autoCompletion) {
if (preText.substring(preText.length - autoCompletion[i].identifier.length, preText.length) == autoCompletion[i].identifier) {
if (autoCompletion[i].key != null && autoCompletion[i].key != evt.keyCode) {
continue;
}

var insertAt = selectionStart - autoCompletion[i].identifier.length;
ele.value = ele.value.substring(0, insertAt) + autoCompletion[i].pattern + ele.value.substring(selectionStart);

var newPos = insertAt + autoCompletion[i].pattern.length + autoCompletion[i].moveBy;
ele.setSelectionRange(newPos, newPos);


stopEvent(evt);
return;
}
}

}

}
}

var userAgent = navigator.userAgent.toLowerCase();
var is_ie = ((userAgent.indexOf("msie") != -1) && (userAgent.indexOf("opera") == -1));
var is_opera = (userAgent.indexOf("opera") != -1);
var is_mac = (userAgent.indexOf("mac") != -1);
var is_mac_ie = (is_ie && is_mac);
var is_win_ie = (is_ie && !is_mac);
var is_gecko = (navigator.product == "Gecko");
var is_editable = (is_win_ie || is_gecko);

function initEditor() {
var textareas = document.getElementsByTagName("textarea");
for (var i = 0; i < textareas.length; i++) {
if (textareas[i].getAttribute("editor") == "editorJS" && is_editable) {
document.getElementById(textareas[i].id + "_toolbar").style.display = "block";
addEvent(textareas[i], (is_win_ie) ? "keydown" : "keypress", editorKeyListener);
}
}
}

onload = initEditor;
</script>
<style>
.editorToolbar {
display: none;
position: relative;
width: 100%;
border: 1px solid #000000;
background-color: #0a2d6c;
height: 24px;
}

.editorToolbar a {
width: 24px;
height: 24px;
display: block;
float: left;
}

.editorToolbar a.right {
float: right;
}

.editorToolbar a.first {
}

.editorToolbar a:hover {
background-color: #999999;
}

.editorToolbar img {
width: 24px;
height: 24px;
}
</style>
<!-- end editor enhancement javascript -->

<form method="post" action="<% response.action %>">
<table border="0" cellspacing="0" cellpadding="3">
<tr>
<td nowrap="nowrap"><span class="small">Title:</span><br />
<% story.content part="title" as="editor" size="24" class="formTitle" %></td>
</tr>
<tr>
<td nowrap="nowrap"><span class="small">Text:</span><br />

<!-- begin toolbar enhanced editor -->
<div id="content_text_toolbar" class="editorToolbar">
<a class="first" href="javascript: doFormat('bold', 'content_text')"><img width="24" height="24" title="Fett (Strg+b)" border="0" src="http://www.antville.org/img/kratzbuerste/editor_icon_bold.gif" alt="[B]" /></a>
<a href="javascript: doFormat('italic', 'content_text')"><img width="24" height="24" title="Kursiv (Strg+i)" border="0" src="http://www.antville.org/img/kratzbuerste/editor_icon_italic.gif" alt="[I]" /></a>
<a href="javascript: doFormat('strike', 'content_text')"><img width="24" height="24" title="Durchgestrichen" border="0" src="http://www.antville.org/img/kratzbuerste/editor_icon_strike.gif" alt="[S]" /></a>
<a href="javascript: doFormat('cite', 'content_text')"><img width="24" height="24" title="Zitat" border="0" src="http://www.antville.org/img/kratzbuerste/editor_icon_cite.gif" alt="&quot;..&quot;" /></a>
<a href="javascript: doFormat('link', 'content_text')"><img width="24" height="24" title="Link einfügen (Strk+k)" border="0" src="http://www.antville.org/img/kratzbuerste/editor_icon_link.gif" alt="link" /></a>
<a href="javascript: doFormat('image', 'content_text')"><img width="24" height="24" title="Bild einfügen" border="0" src="http://www.antville.org/img/kratzbuerste/editor_icon_image.gif" alt="img" /></a>
<a href="javascript: doFormat('file', 'content_text')"><img width="24" height="24" title="Datei einfügen" border="0" src="http://www.antville.org/img/kratzbuerste/editor_icon_file.gif" alt="file" /></a>
<a href="javascript: doFormat('ol', 'content_text')"><img width="24" height="24" title="Ungeordnete Liste" border="0" src="http://www.antville.org/img/kratzbuerste/editor_icon_ol.gif" alt="1." /></a>
<a href="javascript: doFormat('ul', 'content_text')"><img width="24" height="24" title="Geordnete Liste" border="0" src="http://www.antville.org/img/kratzbuerste/editor_icon_ul.gif" alt=" * " /></a>

</div>
<% story.content part="text" as="editor" cols="30" rows="25" class="formText" id="content_text" editor="editorJS" %></td>
<!-- end toolbar enhanced editor -->


</tr>
<tr>
<td><fieldset><legend class="small">Options</legend>
<p><% story.addtofront as="editor" checked="checked" %>&nbsp;Show this story on the front page</p>

Add this story to a topic<br />
<table style="margin-left:15px;">
<tr>
<td width="48%" class="small">Choose a topic...<br />
<% story.topicchooser firstOption="--- choose topic ---" %></td>
<td valign="top" width="4%">&nbsp;</td>
<td valign="top" width="48%" class="small">...or enter a new one<br />
<input type="text" name="topic" value="<% request.topic %>" /></td>
</tr>
</table>

<p>This story is editable by<br />
<span class="small"><% story.editableby as="editor" %></span></p>
<% story.discussions as="editor" checked="checked" prefix="<p>" suffix="&nbsp;Allow comments" %>&nbsp;&nbsp;</p></fieldset></td>
</tr>
<tr>
<td class="small"><% story.creator as="link" prefix="Created by " %><% story.modifier as="link" prefix=", last modified&nbsp;by&nbsp;" %><% story.modifytime format="short" prefix="&nbsp;on&nbsp;" %></td>
</tr>

<tr>
<td nowrap="nowrap"><br /><% input type="submit" name="publish" value="Publish" %>&nbsp;<% input type="submit" name="save" value="Save offline" %>&nbsp;
<% input type="submit" name="cancel" value="Cancel" %></td>
</tr>
</table>
</form>
kinomu, 13. Jan 2006, 08:25  | link
 
Komplett und 1:1 ersetzen, ja? Wenn es in einer Katastrophe endet - Sie kennen mein Talent für so etwas noch nicht - helfen Sie mir dann? Jedenfalls vielen Dank auch an Sie (auch und ganz besonders für das, was Sie sonst noch hinter den Kulissen hier tun.)
schluesselkind, 13. Jan 2006, 10:01  | link
 
komplett (!) ersetzen. (das pendant zur alten editor skin sehen sie im unteren teil des codes.)
hab's gerade auch gemacht - und weiß gar nicht, was ich dadurch gewonnen habe. die gewöhnung an das eintippen ist stärker.
leteil, 13. Jan 2006, 10:12  | link
 
achja,
liebes Schlüsselkind, bei "Benutzerprofil ändern" können Sie es so einstellen, das Ihr Name - etwa in den hiesigen Kommentaren - auf Ihre URL verlinkt...
mark793, 13. Jan 2006, 18:58  | link
 
Ich weiss, lieber mark793, aber ich traue mich noch nicht ganz. Hab doch gerade erst angefangen und probiere noch herum. Kommt noch, wenn ich etwas mutiger bin. Aber schön, dass es Ihnen aufgefallen ist.
schluesselkind, 13. Jan 2006, 19:05  | link
 
Auch für Kommentare?
Hoh! Grandios kinomu!

Ich würde es meinen Postern auch gerne bei den Kommentaren zur Verfügung stellen. Kann ich das dann einfach dort hineinkopieren? Ich wäre unglaublich dankbar, wenn du mir schreiben könntest, was ich dort einfügen darf

Mfg Trickymaster
trickymaster, 20. Jan 2007, 20:44  | link
 
Für die Comment editor-Skin
sollten aus obigem Code jene Teile gelöscht werden, die nur für Stories gedacht sind. "Show this story on the front page", "Add this story to a topic" und "This story is editable by" etwa. Um es einfach zu machen, habe ich das Überflüssige entfernt - mit den folgenden Zeilen kannst du den Inhalt deiner Comment editor-Skin ersetzen:



<!-- begin editor enhancement javascript -->
<script type="text/javascript">

function addEvent(el, evname, func) {
if (el.attachEvent) {
el.attachEvent("on" + evname, func);
} else {
el.addEventListener(evname, func, true);
}
}

function stopEvent(evt) {
if (evt.preventDefault) {
evt.preventDefault();
evt.stopPropagation();
} else {
evt.cancelBubble = true;
evt.returnValue = false;
}
}

// returns the current selection object
function getSelection(ele) {
if (document.all) {
return ele.selection;
} else {
return window.getSelection();
}
}

function getSelectedText(ele) {
if (!ele) return "";

var result = "";
if (document.all) {
var selection = document.selection;
if (!selection) return "";
if (selection.type.toLowerCase() != "text") return;
ele.focus();
var range = selection.createRange();
if (range.parentElement() != ele) return;

return range.text;

} else {
var selectionStart = ele.selectionStart;
var selectionEnd = ele.selectionEnd;
if (selectionStart >= ele.length) return;

ele.setSelectionRange(selectionStart, selectionEnd);
ele.focus();

return ele.value.slice(selectionStart, selectionEnd);

}

return;
}

var bookMark01;

function pasteText(ele, before, text, after) {
if (!ele) return false;
before = before ? before : "";
text = text ? text : "";
after = after ? after : "";

if (document.all) {
var selection = document.selection;
if (!selection) return false;

if (selection.type.toLowerCase() != "text" && selection.type.toLowerCase() != "none") return;
ele.focus();
var range = selection.createRange();
if (range.parentElement() != ele) return false;

range.text = before + text + after;
bookMark01 = range.getBookmark();
range.moveStart("character", -after.length);
range.collapse(true);
range.select();
ele.focus();

} else {
var selectionStart = ele.selectionStart;
var selectionEnd = ele.selectionEnd;
if (selectionStart >= ele.length) return false;

ele.value.slice(selectionStart, selectionEnd);
ele.value = ele.value.slice(0, selectionStart) + before + text + after + ele.value.slice(selectionEnd);
var cursorPos = selectionStart + before.length + text.length;
ele.setSelectionRange(cursorPos, cursorPos);
ele.focus();

}

return true;
}

var formatOptions = [
{ "identifier": 'bold',
"before": '<b>',
"after": '</b>',
"shortcut": 'b' },
{ "identifier": 'italic',
"before": '<i>',
"after": '</i>',
"shortcut": 'i' },
{ "identifier": 'underline',
"before": '<u>',
"after": '</u>',
"shortcut": 'u' },
{ "identifier": 'strike',
"before": '<strike>',
"after": '</strike>'},
{ "identifier": 'cite',
"before": '<cite>',
"after": '</cite>',
"shortcut": '"' },
{ "identifier": 'ul',
"before": '<ul>\n <li>',
"after": '</li>\n</ul>',
"shortcut": '*' },
{ "identifier": 'ol',
"before": '<ol>\n <li>',
"after": '</li>\n</ol>',
"shortcut": '.' },
{ "identifier": 'macro',
"dialog": 'insertMacro',
"shortcut": '%' },
{ "identifier": 'file',
"before": '<\% file name="',
"after": '" %>',
"shortcut": 'f' },
{ "identifier": 'image',
"before": '<img src="http://',
"after": '" alt="">',
"shortcut": 'm' },
{ "identifier": 'link',
"command": 'insertLink',
"shortcut": 'k' },

{ "identifier": 'undo',
"shortcut": 'z',
"command": 'undo' },
{ "identifier": 'redo',
"shortcut": 'z',
"shiftKey": true,
"command": 'redo' },
{ "identifier": 'redo',
"shortcut": 'y',
"command": 'redo' }
]

var dialog;
var openedDialog = null;
function doFormat(format, id) {
var editableArea = document.getElementById(id);

for (var i in formatOptions) {
if (formatOptions[i].identifier == format) {
if (formatOptions[i].dialog) {
if (dialog) dialog.close();
dialog = window.open(formatOptions[i].dialog,'dialog','width=550,height=550,resizable');
openedDialog = new Object();
openedDialog.id = id;

} else if (formatOptions[i].command) {
doCommand(editableArea, formatOptions[i].command);

} else {
pasteText(editableArea, formatOptions[i].before, getSelectedText(editableArea), formatOptions[i].after);

}

}
}
}

function doCommand(ele, cmd) {
if (is_ie) {
var selection = document.selection;
if (!selection) return "";
ele.focus();
var range = selection.createRange();
if (range.parentElement() != ele) return;

if (cmd == "undo") {
document.execCommand("undo");

} else if (cmd == "redo") {
document.execCommand("redo");

} else if (cmd == "insertLink") {
var linkURL = window.prompt("Gib hier eine vollständige URL ein:", "http://" + ele);
pasteText(ele, '<a href="' + linkURL + '">', getSelectedText(ele), '</a>');

}

} else {
if (cmd == "insertLink") {
var linkURL = window.prompt("Gib hier eine vollständige URL ein:", "http://");
pasteText(ele, '<a href="' + linkURL + '">', getSelectedText(ele), '</a>');
}

}

}

var KEY_TAB = 9;
var KEY_REFRESH= 116; //F5 abfangen
var KEY_ENTER= 13;
var TAB_INDENT = 2;
var KEY_SPACE = 32;

var autoCompletion = [
{ "identifier": '<a',
"pattern": '<a href="http://"></a>',
"moveBy": -6 },
{ "identifier": '<img',
"pattern": '<img src="http://" alt="">',
"moveBy": -9 },
{ "identifier": '<table',
"pattern": '<table><tbody>\n<tr><td></td></tr>\n</tbody></table>',
"moveBy": -27 },
{ "identifier": '<ol',
"pattern": '<ol>\n <li></li>\n</ol>\n',
"moveBy": -12 },
{ "identifier": '\n*',
"pattern": '\n<ul>\n <li></li>\n</ul>\n',
"key": KEY_TAB,
"moveBy": -12 },
{ "identifier": '\n1.',
"pattern": '\n<ol>\n <li></li>\n</ol>\n',
"key": KEY_TAB,
"moveBy": -12 },
{ "identifier": '</li>',
"pattern": '</li>\n <li></li>',
"moveBy": -5 },
{ "identifier": '<ul',
"pattern": '<ul>\n <li></li>\n</ul>\n',
"moveBy": -12 },
{ "identifier": 'via',
"pattern": '[via <a href="http://"></a>]',
"moveBy": -7 },
{ "identifier": '<cite',
"pattern": '<cite>\n\n</cite>\n',
"moveBy": -9 },
{ "identifier": '\n"',
"pattern": '\n<cite>\n\n</cite>\n',
"moveBy": -9 },
{ "identifier": '<cite>',
"pattern": '<cite>\n\n</cite>\n',
"moveBy": -9 },
{ "identifier": '<\% image',
"pattern": '<\% image name="" %>',
"moveBy": -4 },
{ "identifier": '<\% file',
"pattern": '<\% file name="" %>',
"moveBy": -4 }
]


function editorKeyListener(evt) {
evt = evt ? evt : window.event;
var ele = evt.target ? evt.target : evt.srcElement;
var editableArea = ele;

var keyCode = (is_ie) ? evt.keyCode : evt.charCode

if (evt.ctrlKey && !evt.altKey)
{
for (var i in formatOptions) {
if (formatOptions[i].shortcut == String.fromCharCode(keyCode).toLowerCase() && evt.shiftKey == (formatOptions[i].shiftKey == true)) {
if (formatOptions[i].dialog) {
if (dialog) dialog.close();
dialog = window.open(formatOptions[i].dialog,'dialog','width=550,height=550,resizable');

} else if (formatOptions[i].command) {
doCommand(editableArea, formatOptions[i].command);

} else {
pasteText(editableArea, formatOptions[i].before, getSelectedText(editableArea), formatOptions[i].after);

}
stopEvent(evt);
return;
}
}
}

if (is_ie) {
if (evt.keyCode == KEY_SPACE || evt.keyCode == KEY_TAB || evt.keyCode == KEY_ENTER) {
var testRange = document.selection.createRange();
testRange.moveStart("character", -20);
var preText = testRange.text;

for (var i in autoCompletion) {
if (preText.substring(preText.length - autoCompletion[i].identifier.length, preText.length) == autoCompletion[i].identifier) {
if (autoCompletion[i].key != null && autoCompletion[i].key != evt.keyCode) {
continue;
}

var range = document.selection.createRange();
range.moveStart("character", -autoCompletion[i].identifier.length);
range.select();

range.text = autoCompletion[i].pattern;

range.move("character", autoCompletion[i].moveBy);
range.select();

stopEvent(evt);
return;
}
}
}

} else {
if (evt.charCode == KEY_SPACE || evt.keyCode == KEY_TAB || evt.keyCode == KEY_ENTER) {

var selectionStart = ele.selectionStart;
var selectionEnd = ele.selectionEnd;

var preText = ele.value.substring(Math.max(0, selectionStart - 20), selectionEnd);

for (var i in autoCompletion) {
if (preText.substring(preText.length - autoCompletion[i].identifier.length, preText.length) == autoCompletion[i].identifier) {
if (autoCompletion[i].key != null && autoCompletion[i].key != evt.keyCode) {
continue;
}

var insertAt = selectionStart - autoCompletion[i].identifier.length;
ele.value = ele.value.substring(0, insertAt) + autoCompletion[i].pattern + ele.value.substring(selectionStart);

var newPos = insertAt + autoCompletion[i].pattern.length + autoCompletion[i].moveBy;
ele.setSelectionRange(newPos, newPos);


stopEvent(evt);
return;
}
}

}

}
}

var userAgent = navigator.userAgent.toLowerCase();
var is_ie = ((userAgent.indexOf("msie") != -1) && (userAgent.indexOf("opera") == -1));
var is_opera = (userAgent.indexOf("opera") != -1);
var is_mac = (userAgent.indexOf("mac") != -1);
var is_mac_ie = (is_ie && is_mac);
var is_win_ie = (is_ie && !is_mac);
var is_gecko = (navigator.product == "Gecko");
var is_editable = (is_win_ie || is_gecko);

function initEditor() {
var textareas = document.getElementsByTagName("textarea");
for (var i = 0; i < textareas.length; i++) {
if (textareas[i].getAttribute("editor") == "editorJS" && is_editable) {
document.getElementById(textareas[i].id + "_toolbar").style.display = "block";
addEvent(textareas[i], (is_win_ie) ? "keydown" : "keypress", editorKeyListener);
}
}
}

onload = initEditor;
</script>
<style>
.editorToolbar {
display: none;
position: relative;
width: 100%;
border: 1px solid #000000;
background-color: #0a2d6c;
height: 24px;
}

.editorToolbar a {
width: 24px;
height: 24px;
display: block;
float: left;
}

.editorToolbar a.right {
float: right;
}

.editorToolbar a.first {
}

.editorToolbar a:hover {
background-color: #999999;
}

.editorToolbar img {
width: 24px;
height: 24px;
}
</style>
<!-- end editor enhancement javascript -->

<form method="post" action="<% response.action %>">
<table border="0" cellspacing="0" cellpadding="3">
<tr>
<td nowrap="nowrap"><span class="small">Title:</span><br />
<% story.content part="title" as="editor" size="24" class="formTitle" %></td>
</tr>
<tr>
<td nowrap="nowrap"><span class="small">Text:</span><br />

<!-- begin toolbar enhanced editor -->
<div id="content_text_toolbar" class="editorToolbar">
<a class="first" href="javascript: doFormat('bold', 'content_text')"><img width="24" height="24" title="Fett (Strg+b)" border="0" src="http://www.antville.org/img/kratzbuerste/editor_icon_bold.gif" alt="[B]" /></a>
<a href="javascript: doFormat('italic', 'content_text')"><img width="24" height="24" title="Kursiv (Strg+i)" border="0" src="http://www.antville.org/img/kratzbuerste/editor_icon_italic.gif" alt="[I]" /></a>
<a href="javascript: doFormat('strike', 'content_text')"><img width="24" height="24" title="Durchgestrichen" border="0" src="http://www.antville.org/img/kratzbuerste/editor_icon_strike.gif" alt="[S]" /></a>
<a href="javascript: doFormat('cite', 'content_text')"><img width="24" height="24" title="Zitat" border="0" src="http://www.antville.org/img/kratzbuerste/editor_icon_cite.gif" alt="&quot;..&quot;" /></a>
<a href="javascript: doFormat('link', 'content_text')"><img width="24" height="24" title="Link einfügen (Strk+k)" border="0" src="http://www.antville.org/img/kratzbuerste/editor_icon_link.gif" alt="link" /></a>
<a href="javascript: doFormat('image', 'content_text')"><img width="24" height="24" title="Bild einfügen" border="0" src="http://www.antville.org/img/kratzbuerste/editor_icon_image.gif" alt="img" /></a>
<a href="javascript: doFormat('file', 'content_text')"><img width="24" height="24" title="Datei einfügen" border="0" src="http://www.antville.org/img/kratzbuerste/editor_icon_file.gif" alt="file" /></a>
<a href="javascript: doFormat('ol', 'content_text')"><img width="24" height="24" title="Ungeordnete Liste" border="0" src="http://www.antville.org/img/kratzbuerste/editor_icon_ol.gif" alt="1." /></a>
<a href="javascript: doFormat('ul', 'content_text')"><img width="24" height="24" title="Geordnete Liste" border="0" src="http://www.antville.org/img/kratzbuerste/editor_icon_ul.gif" alt=" * " /></a>

</div>
<% story.content part="text" as="editor" cols="30" rows="25" class="formText" id="content_text" editor="editorJS" %></td>
<!-- end toolbar enhanced editor -->

</table>

<% input type="submit" name="save" value="Publish" %>&nbsp;
<% input type="submit" name="cancel" value="Cancel" %></p>
</form>
kinomu, 21. Jan 2007, 00:39  | link
 
Prima, kinomu!
Hey, ich habe deine Skript gerade auch bei mir eingebaut, und wollte das nicht so stillschweigend tun.

Danke für die Mühe, das werden bestimmt viele Blogger zu schätzen wissen, wenn sie ihr Layout aufpeppen wollen!

Beste Empfehlung, klappt bisher alles tadellos.

Halligen
halligen, 01. Nov 2007, 00:27  | link
 
Das ist ja cool. Werde ich heute gleich mal ausprobieren.
frauaehrenwort, 22. Sep 2008, 13:42  | link
... kommentieren