|
JavaScript - Lightbox Like Image Display Function On Wysiwyg Editor
I would like to add a Lightbox like image display function to TinyMCE. What is a good approach in the regard, integration or extension?
Thank for your input in advance. Similar TutorialsI use http://www.openwebware.com/ wysiwyg editor. It is necessary to change something in it, but I do not know how? When the inserted image in the editor, and then changes the image size, stretches the image in an editor, I want to record a change image size, without editor in <input type='text'> field. Is there any idea how to bring? Thanks! Hi All, Having a real problem with IE losing focus when clicking outside the wysiwyg iframe. This works fine in Firefox, Chrome, Safari, Opera. Code: <html>
<head></head>
<body>
<script type="text/javascript">
function initializeEditor() {
contentEditor.document.designMode='on';
}
function insertHTML1() {
var html = "<em><u>Some Text</u></em><p>2. Select this text<p><strong></u>Some text</strong>";
document.contentEditor.focus();
range = contentEditor.document.selection.createRange();
document.contentEditor.focus();
range.pasteHTML(html);
}
function insertHTML2() {
var html = "<strong>INSERTED TEXT</strong>";
document.contentEditor.focus();
range = contentEditor.document.selection.createRange();
document.contentEditor.focus();
range.pasteHTML(html);
}
</script>
<iframe name="contentEditor" id="contentEditor" onLoad="initializeEditor();"></iframe>
<p><input type="button" value="1. Click Here" onClick="insertHTML1()">
<p><input type="text" value="3. Click Here">
<p><input type="button" value="4. Click Here" onClick="insertHTML2()">
</body>
</html>
To demonstrate, first follow steps 1, 2 and 4. This works fine! Introduce step 3, clicking in a field outside the iframe and focus is lost. Appreciate any help!! Thanks WYSIWYG editor for PHPBB3. As far as I'm aware only unofficial MODS exist, and one has the impression they are fraught with bugs. I need a polished free opensource solution. I was really hopeful there was an official WYSIWYG, but I haven't found it yet if there is one. Can anyone confirm? Hi! I am trying to use a very simpe wysiwyg-editor. It works fine, except i don't know how to proces the data from the iframe. I simply cant make use of the text written. Code: <html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function Init() {
document.getElementById("rte").contentWindow.document.designMode = "On";
}
function doBold() {
document.getElementById("rte").contentWindow.document.execCommand('bold', false, null);
}
function doItalic() {
document.getElementById("rte").contentWindow.document.execCommand('italic', false, null);
}
function doURL() {
var mylink = prompt("Enter a URL:", "http://");
if ((mylink != null) && (mylink != "")) {
document.getElementById('rte').contentWindow.document.execCommand("CreateLink",false,mylink);
}
}
function doImage() {
myimg = prompt('Enter Image URL:', 'http://');
document.getElementById('rte').contentWindow.document.execCommand('InsertImage', false, myimg);
}
</script>
</head>
<body onLoad="Init();">
<input type="submit" name="btnBold" value="bold" on id="btnBold" onClick="doBold();">
<input type="submit" name="btnItalic" id="btnItalic" value="italic" onClick="doItalic();">
<input type="submit" name="btnURL" id="btnURL" value="URL" onClick="doURL();">
<input type="submit" name="btnImg" id="btnImg" value="Image" onClick="doImage();">
<br>
<form action="process.php" method="post">
<iframe name="rte" id="rte"><textarea name="areal"></textarea>
</iframe>
<br>
<input type="submit" value="Submit"></form>
</body>
</html>
Most editors seem use this iframe-thing, without telling how to send the information by a form. I am allowing my customers to use a rich text editor (wysiwyg) on a jsp page to create snippets of HTML code that can be used to describe their items. When they want to add an image, table or custom tag (something we wrote), they are presented with a properties box created using javascript on the same page just below the editor. Upon clicking 'Insert' button on the properties box, I use javascript to create an HTML string with the tag information and insert the string into the edited page where the cursor was. The problem is that I can't seem to find a reliable way to know where the cursor was. More information: I am a C programmer who morphed to a Java programmer who knows some javascript. The JSP page looks like this: -------------------------------------------------------------------- Some text and text fields for some basic information -------------------------------------------------------------------- The javascript wysiwyg editor -------------------------------------------------------------------- The properties box (changes depending on the type of item being inserted) -------------------------------------------------------------------- Submit button, etc. for the page (so the information can be persisted) I have tried: 1. Seven days of searching the web for helpful hints. 2. Using a popup window to get the properties (doesn't work because in IE7, closing the popup also kills the session... I need to use some of the beans on the main window on the popup.) 3. Processing onMouseDown and onKeyDown events storing the element information in a global variable so I could use it later to know the point of insertion. (Has not been reliable and the arrow keys present real problems with where the cursor ends up as that is different from where it was pressed.) I am frustrated because I don't seem to be gaining on the problem. I suspect it is because I have missed something very simple. Does anyone have any ideas? Thanks in advance. Carl How do I get a function in the head to turn on or show an image in the body area? I am a struggling noob, but tutorials will not teach me. If I wanted to document.write, or in this case use an alert box, I would not have a question. I feel I understand the functions below, but these are not real world examples of anything, at least that I would ever use. I don't know how to help myself. But I do know, I need to get the part of alert("Hello") changed into something somehow the image will act on, see and display after the 3 second delay. This is the website I got this code from. http://www.w3schools.com/js/js_timing.asp If I can see how to get a function to really do something, would be a big help for me in understanding JS. This is not a school project, my school doesn't offer any programming. I have been at this all day trying to find a tutorial that would help me. Thanks so much for your help. Code: <html>
<head>
<script type="text/javascript">
function timeMsg()
{
var t=setTimeout("alertMsg()",3000);
}
function alertMsg()
{
alert("Hello"); Somehow this has to show my image.
}
</script>
</head>
<body">
<form>
<input type="button"
value="show my Image"
onClick="timeMsg()" />
</form>
<img />
</body>
</html>
Hello all..I am new to this forum and also new to html and js. I started college at the ripe old age of 55 and I have to take this course for my required degree I have a table 5 across with thumbnails inside and a larger cell at the bottom with a picture of me. I need to write a javascript function that will make the big picture change when I click on the thumbnail...there is also a smaller cell at the bottom that would change that text to a description as well,when thumbnail clicked. Ihave no clue where to start. Any help would be much appreciated!! Thanks In advance <style> .table th {border-style: solid; border-color: red;background-color: #CCCCFF; } </style> <body> <table border="1" class="table"> <thead> <th colspan = "5">Click an Image to Enlarge </th> </thead> <tbody> <tr> <td> <img src = "Thumbnails/ada1838-thumb.JPG" alt = "ada1838-thumb" > </td> <td> <img src = "Thumbnails/adaplaque-thumb.JPG" alt = "adaplaque-thumb"> </td> <td> <img src = "Thumbnails/babbageborn-thumb.JPG" alt = "babbageborn-thumb"> </td> <td> <img src = "Thumbnails/aediagram-thumb.JPG" alt = "aediagram-thumb"> </td> <td> <img src = "Thumbnails/babbage1860-thumb.JPG" alt = "babbage1860-thumb"> </td> </tr> <tr><td colspan= "5" ><img src= "All_Images/Me@home.JPG" alt = "Me @ Home" width = "800px" height= "800px" align="center"> </td> </tr> <thead> <th colspan = "5"> </th> </thead> </table> </body> </html> When a particular radio option is selected and the user presses the submit button, based on what is selected I want a particular lightbox to popup [like an alert]. The JavaScript below is what I used to turn images I created into radio buttons so I could have my own custom styles instead of using the default DOM version. Any help is appreciated. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<LINK REL=StyleSheet HREF="global.css" TYPE="text/css" MEDIA=screen>
<script type="text/javascript">
// Leave next 2 lines as is. Customization is a few lines down.
var RadioCheckedImage = new Image();
var RadioUncheckedImage = new Image();
// Customization section:
// Specify the relative or absolute URL of each image. Examples:
RadioCheckedImage.src = "images/radio_on.png";
RadioUncheckedImage.src = "images/radio_off.png";
// No other customizations needed.
function RadioClicked(radioid,radiosetname,formid) {
// - first, uncheck all radio buttons of the set
var form = document.getElementById(formid);
for( var i = 0; i < form.length; i++ ) {
if(form[i].name == radiosetname) {
document.getElementById(form[i].id).checked = false;
document.getElementById("Image"+form[i].id).src = RadioUncheckedImage.src;
}
}
// - then, check the clicked button
document.getElementById(radioid).checked = true;
document.getElementById("Image"+radioid).src = RadioCheckedImage.src;
return false;
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#submit_button').click(function() {
if (!$("input[@name='name']:checked").val()) {
alert('Nothing is checked!');
return false;
}
else {
alert('One of the radio buttons is checked!');
}
});
});
</script>
</head>
<body>
<div id="container">
<img class="main_pic" src="images/cain.jpg" alt="..." />
<img class="herman_slice" src="images/herman.png" alt="..." />
<img class="cain_slice" src="images/cain.png" alt"..." />
<img class="is_slice" src="images/is.png" alt="..." />
<img class="what_slice" src="images/what.png" alt="..." />
<!-- Form -->
<span style="display:none;">
<form id="MyFormID">
<input type="radio" name="thisradio" value="yes" id="RadioFieldID1">
<input type="radio" name="thisradio" value="yes" id="RadioFieldID2">
<input type="radio" name="thisradio" value="yes" id="RadioFieldID3">
<input type="radio" name="thisradio" value="yes" id="RadioFieldID4">
</form>
</span>
<!-- Start of Form -->
<div class="radio_section">
<img id="ImageRadioFieldID1" src="images/radio_off.png" name="solidworks" width="42" height="44" onclick="RadioClicked('RadioFieldID1','thisradio','MyFormID')" style="cursor:pointer;">
<img class="smart_slice" src="images/smart_slice.jpg" alt="..." />
<img id="ImageRadioFieldID2" src="images/radio_off.png" name="solidworks" width="42" height="44" onclick="RadioClicked('RadioFieldID2','thisradio','MyFormID')" style="cursor:pointer;">
<img class="smart_slice" src="images/dumb_slice.jpg" alt="..." />
<img id="ImageRadioFieldID3" src="images/radio_off.png" name="solidworks" width="42" height="44" onclick="RadioClicked('RadioFieldID3','thisradio','MyFormID')" style="cursor:pointer;">
<img class="average_slice" src="images/average_slice.jpg" alt="..." />
<img id="ImageRadioFieldID4" src="images/radio_off.png" name="solidworks" width="42" height="44" onclick="RadioClicked('RadioFieldID4','thisradio','MyFormID')" style="cursor:pointer;">
<img class="idk_slice" src="images/idk_slice.jpg" alt="..." />
</div>
<!-- End of Form -->
<img class="submit_btn" src="images/submit_btn.jpg" alt="..." />
</div>
</body>
</html>
i found a tutorial for doing the lightbox image viewer...and the link and demo is given below.. can someone tell me how do i replace the image with text in the lightbox....i mean when we hit on the image what shud i do to display text instead of image....hit on the image in the site and it will display an image.... http://www.dynamicdrive.com/dynamici...box2/index.htm thanx First off thank you in advance to whomever decides to help out. I am having an issue where I am using lightbox, however what is showing up is a text link "Request Email." I understand how to manipulate this text to say anything I want. However, I am having difficulty changing the text link to an image. Instead of the text, I want to have an image (button) stored on my server http://www.something.com/something.jpeg be the link to click on instead of the text. It seems this would be easy to accomplish, but I cant figure it out. It anybody can send me in the right direction it would be appreciated. Thanks! [CODE] <a id='anchor_LU8eKAvs2W' href='http://www.emailmeform.com/builder/form/LU8eKAvs2W'>Request Email!</a><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> if (typeof jQuery == 'undefined'){ document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-1.4.4.min.js' type='text/javascript'%3E%3C/script%3E")); } </script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <script type="text/javascript"> if (typeof $.ui == 'undefined'){ document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-ui-1.7.2.custom.min.js' type='text/javascript'%3E%3C/script%3E")); } </script> <link rel="stylesheet" type="text/css" href="http://www.emailmeform.com/builder/styles/dynamic.php?t=post" /> <script type="text/javascript" src="http://www.emailmeform.com/builder/js/dynamic.php?t=post&t2=0&use_CDN=true"></script> <script>$(function(){$('#anchor_LU8eKAvs2W').colorbox({width:'75%', height:'75%', iframe:true});})</script> [CODE] Hi, I am Aditya. I am explaining below the exact scenario where I need the help: I am developing a web application in which I need to integrate a javascript/html editor on some of the web pages and then provide 'Edit' buttons on those web pages so that users can edit the content on that partciular html/jsp page (like editing in wiki pages) and then, when they add some content and click on submit button, the new content should appear on the web page with all the formatting (i.e. bold, italics, color and so on) which was applied by user when he was entering the text. Now, I need help for the below issues: 1. Please suggest me a good javascript/html editor (freely downloadable) which I can use to integrate with my web pages. 2. Once the user has entered some content using the above javascript editor, how to make that content reach the server and update the corresponding web page. I am new to web development, so may be that these questions are too simple. But, I need some help from you. Waiting for your reply, Thanks, Aditya Hey guys, I'm trying to accomplish something similar to what the develop on this site did: http://backlinkwatch.com/ When you click on the text area, a clickable image, with a 50% black opacity background overlay, and an exit either through a link or clicking outside of the box, shows up. I want to accomplish the same thing, but have the image popup show up on the page load instead of requiring a click of the text area. In addition, I would like this popup only once to each IP address; ie, if you visit a page on my site, this will show up, but if you close it and refresh the page or visit another page on the site a cookie will be stored that knows its already been opened once and it won't try to do it again. Thanks to anyone who can help me with this! Hello, I would like some help with a two stage display of thumbnails. I have managed to display all thumbnail product images of my targetId in a scrolling div from the contents of my targetId image folder. I have also managed to display the thumbnail as a larger image in a html image. I would now like to apply a href link to the larger image so that I can display using jsquery lightbox, but I can't figure out what code i need and where it should go. Please help! Code: <head>
<script type="text/javascript">
function replaceImg(path) {
var imgDest = document.getElementById('image');
var imgSrc = path;
imgDest.setAttribute("src", imgSrc);
}
</script>
</head>
<body>
<div class="productimage"><img id="image" img src="product_images/<?php echo $targetID; ?>/<?php echo $targetID; ?>.jpg" width="253" height="378" border="0" /></div>
<div class="gallerypics"><?php
$counter = 0;
foreach (glob("product_images/$targetID/thumb/*.jpg") as $pathToThumb)
{
$filename = basename($pathToThumb);
echo ('<div class="gallerypicsframe"><a href="javascript:replaceImg(\'product_images/'.$targetID.'/'.$filename.'\')"><img src="'.$pathToThumb.'"" width="60" height="90" border="0"/></a></div>');
$counter++;
}
?>
</body>
Hello there. I'm using Joomla 1.5 and VirtueMart for my e-shop. I've also installed a virtuemart template which loads mootools. Well in my virtuemart product detail pages, if you click the main image to make it enlarged using IE8 it will not open and return a JS error instead (found it using Firebug): http://goo.gl/6lQCV Code: Message: 'closeButton' is null or not an object Line: 21 Char: 63 Code: 0 URI: http://www.xxxxx.xxx/media/system/js/mootools.js I'm not sure but I think that if I fix the JS errors on these pages the problem will be solved and the images will open normally. Note that on all other browsers it works fine (Firefox, Chrome, Safari, IE9). The page returns some other errors too but they're the whole time there. I think there's a conflict caused by all the JS libraries loaded by my Plugins (System - RokBox & YOOeffects), Joomla template, VirtueMart & VirtueMart template (jquery and mootools are both loaded). Thanks in advance i have this code Code: function blockformat(tag) {
if(document.selection){
var Editor = document.getElementById('iView').contentWindow.document;
var range = Editor.selection.createRange();
if (range.pasteHTML) {
var content=Editor.selection.createRange().htmlText;
content1="<"+tag+">"+content+"</"+tag+">";
range.pasteHTML(content1);
}
} else if (window.getSelection) {
var Editor = document.getElementById('iView').contentWindow;
var range = Editor.getSelection().getRangeAt(0);
content1="<"+tag+">"+range+"</"+tag+">";
getIFrameDocument('iView').execCommand('insertHTML',false, content1);
}
}
the code get tag like "div" and insert into my wysiwyg the text that marked between the got tags. to example blockformat('div'); not in my wysiwyg iframe there is " <div>blabla</div>" now i want that if i clicked again the tags are remove like a execcommand if i click bold one time its make the text bold and second time its remove the bold tnx ... Hey, as i'm nearly finished writing my own wysiwyg editor, i need help to get it working in IE. So here is the Editor i hope you want to help me. Morri I am trying to create a WYSIWYG editor for my site, but seeing as how every browser gives different results when using the execcommand method, I am trying to do my own insertions instead. What I would like to do is create an iframe with designMode On to enable editing of the frame, but when someone does a command to bold text, I want to make a method which enters <b>Some Highlighted Text</b> into the frame where the user highlighted so it would appear bold and the source would have the <b> tags. My issue is I have been unsuccessful in learning how to take the selected text within an iframe and surround it with tags. I was able to accomplish this in Internet Explorer using this code: Code: //iFrame is the object handling the frame var text = iframe.document.selection.createRange().text; var obj = iframe.document.selection.createRange(); obj.text = '<i>' + text + '</i>'; Except the resulting text would actually have the <i> tags appear, and the source would be: Code: <i>Some Text</i> Pretty retarded if you ask me since in no way did I want it to convert the tags into entities. Anyway, if anyone could please direct me to a method in which I can successfully take selected text within the iframe and surround it with HTML tags in such a way that the formatting will actually show, I would be very grateful ^_^. Hi there, I found this thread on the forum its from a few years back but the code works, but I can't seem to get the image that appears as you rollover the button to display in the correct place. I'm not sure if its because I'm using tables within tables? Should I recode in divs? Any help is greatly appreciated!! http://www.codingforums.com/archive/...p/t-95847.html I've downloaded a simple wysiwyg script from the internet, however I want to add a wordcounter to it. The main idea is that the amount of words is refreshed every time a new character is entered. However I haven't got a clue on how to implement this, I've used javascript a lot a few years ago.. but this is out of my league. So I'm hoping someone can help me with this. The html file: Quote: <html> <head> <style type="text/css">@import url('SimpleTextEditor.css');</style> <script src="SimpleTextEditor.js"></script> <script type="text/javascript"> function countWords(){ document.form1.wordcount.value = document.form1.inputString.value.split(' ').length + '/300 words'; if (document.form1.inputString.value.split(' ').length >= 50){ document.getElementById("wordcount").style.color = "red"; }else{ document.getElementById("wordcount").style.color = "black"; } } </script> </head> <body> <form name="form1" method="post"> <div style="height:34px;width:750px;margin-bottom:5px;background-image:url('mainbar.png');background-repeat:no-repeat; "><input style="margin-top:6px;margin-left:25px;" name="wordcount" type="text" value="" size="6"></div> <textarea name="inputString" id="inputString" cols="70" rows="4" onkeyup='countWords();'></textarea> <br> <script> var ste = new SimpleTextEditor("inputString", "ste"); ste.cssFile = 'test.css'; ste.charset = 'iso-8859-1'; ste.init(); </script> <input type="submit" value="submit" onclick="ste.submit();"> </form> </body> </html> The javascript file: Quote: function SimpleTextEditor(id, objectId) { if (!id || !objectId) { alert("SimpleTextEditor.constructor(id, objectId) failed, two arguments are required"); } var self = this; this.id = id; this.objectId = objectId; this.frame; this.viewSource = false; this.path = ""; // with slash at the end this.cssFile = ""; this.charset = "iso-8859-1"; this.editorHtml = ""; this.frameHtml = ""; this.textareaValue = ""; this.browser = { "ie": Boolean(document.body.currentStyle), "gecko" : (navigator.userAgent.toLowerCase().indexOf("gecko") != -1) }; this.init = function() { if (document.getElementById && document.createElement && document.designMode && (this.browser.ie || this.browser.gecko)) { // EDITOR if (!document.getElementById(this.id)) { alert("SimpleTextEditor "+this.objectId+".init() failed, element '"+this.id+"' does not exist"); return; } this.textareaValue = document.getElementById(this.id).value; var ste = document.createElement("div"); document.getElementById(this.id).parentNode.replaceChild(ste, document.getElementById(this.id)); ste.id = this.id+"-ste"; ste.innerHTML = this.editorHtml ? this.editorHtml : this.getEditorHtml(); // BUTTONS var buttons = ste.getElementsByTagName("td"); for (var i = 0; i < buttons.length; ++i) { if (buttons[i].className == "button") { buttons[i].id = this.id+'-button-'+i; buttons[i].onmouseover = function() { this.className = "button-hover"; } buttons[i].onmouseout = function() { this.className = this.className.replace(/button-hover(\s)?/, "button"); } buttons[i].onclick = function(id) { return function() { this.className = "button-hover button-click"; setTimeout(function(){ document.getElementById(id).className = document.getElementById(id).className.replace(/(\s)?button-click/, ""); }, 100); } }(buttons[i].id); } } // FRAME if (this.browser.ie) { this.frame = frames[this.id+"-frame"]; } else if (this.browser.gecko) { this.frame = document.getElementById(this.id+"-frame").contentWindow; } this.frame.document.designMode = "on"; this.frame.document.open(); this.frame.document.write(this.frameHtml ? this.frameHtml : this.getFrameHtml()); this.frame.document.close(); insertHtmlFromTextarea(); } }; function lockUrls(s) { if (self.browser.gecko) { return s; } return s.replace(/href=["']([^"']*)["']/g, 'href="simpletexteditor://simpletexteditor/$1"'); } function unlockUrls(s) { if (self.browser.gecko) { return s; } return s.replace(/href=["']simpletexteditor:\/\/simpletexteditor\/([^"']*)["']/g, 'href="$1"'); } function insertHtmlFromTextarea() { try { self.frame.document.body.innerHTML = lockUrls(self.textareaValue); } catch (e) { setTimeout(insertHtmlFromTextarea, 10); } } this.getEditorHtml = function() { var html = ""; html += '<input type="hidden" id="'+this.id+'" name="'+this.id+'" value="">'; html += '<table class="ste" cellspacing="0" cellpadding="0">'; html += '<tr><td class="bar"><table id="'+this.id+'-buttons" cellspacing="0" cellpadding="0"><tr>'; //html += '<td><select onchange="'+this.objectId+'.execCommand(\'formatblock\', this.value);this.selectedIndex=0;"><option value=""></option><option value="<h1>">Heading 1</option><option value="<h2>">Heading 2</option><option value="<h3>">Heading 3</option><option value="<p>">Paragraph</option><option value="<pre>">Preformatted</option></select></td>'; //html += '<td><div class="separator"></div></td>'; html += '<td class="button"><img src="'+this.path+'images/bold.gif" width="20" height="20" alt="Bold" title="Bold" onclick="'+this.objectId+'.execCommand(\'bold\')"></td>'; html += '<td class="button"><img src="'+this.path+'images/italic.gif" width="20" height="20" alt="Italic" title="Italic" onclick="'+this.objectId+'.execCommand(\'italic\')"></td>'; html += '<td class="button"><img src="'+this.path+'images/underline.gif" width="20" height="20" alt="Underline" title="Underline" onclick="'+this.objectId+'.execCommand(\'underline\')"></td>'; html += '<td><div class="separator"></div></td>'; html += '<td class="button"><img src="'+this.path+'images/left.gif" width="20" height="20" alt="Align Left" title="Align Left" onclick="'+this.objectId+'.execCommand(\'justifyleft\')"></td>'; html += '<td class="button"><img src="'+this.path+'images/center.gif" width="20" height="20" alt="Center" title="Center" onclick="'+this.objectId+'.execCommand(\'justifycenter\')"></td>'; html += '<td class="button"><img src="'+this.path+'images/right.gif" width="20" height="20" alt="Align Right" title="Align Right" onclick="'+this.objectId+'.execCommand(\'justifyright\')"></td>'; html += '<td><div class="separator"></div></td>'; html += '<td class="button"><img src="'+this.path+'images/ol.gif" width="20" height="20" alt="Ordered List" title="Ordered List" onclick="'+this.objectId+'.execCommand(\'insertorderedlist\')"></td>'; html += '<td class="button"><img src="'+this.path+'images/ul.gif" width="20" height="20" alt="Unordered List" title="Unordered List" onclick="'+this.objectId+'.execCommand(\'insertunorderedlist\')"></td>'; html += '<td><div class="separator"></div></td>'; html += '<td class="button"><img src="'+this.path+'images/outdent.gif" width="20" height="20" alt="Outdent" title="Outdent" onclick="'+this.objectId+'.execCommand(\'outdent\')"></td>'; html += '<td class="button"><img src="'+this.path+'images/indent.gif" width="20" height="20" alt="Indent" title="Indent" onclick="'+this.objectId+'.execCommand(\'indent\')"></td>'; //html += '<td><div class="separator"></div></td>'; //html += '<td class="button"><img src="'+this.path+'images/link.gif" width="20" height="20" alt="Insert Link" title="Insert Link" onclick="'+this.objectId+'.execCommand(\'createlink\')"></td>'; //html += '<td class="button"><img src="'+this.path+'images/image.gif" width="20" height="20" alt="Insert Image" title="Insert Image" onclick="'+this.objectId+'.execCommand(\'insertimage\')"></td>'; //html += '<td><div class="separator"></div></td>'; //html += '<td class="button"><img src="'+this.path+'images/help.gif" width="20" height="20" alt="Help" title="Help" onclick="'+this.objectId+'.openWindow(\''+this.path+'help.html\', \'300\', \'300\')"></td>'; html += '</tr></table></td></tr>'; html += '<tr><td class="frame"><iframe id="'+this.id+'-frame" frameborder="0"></iframe></td></tr>'; html += '<tr><td class="source"><input id="'+this.id+'-viewSource" type="checkbox" onclick="'+this.objectId+'.toggleSource()"> View Source</td></tr>'; html += '</table>'; return html; }; this.getFrameHtml = function() { var html = ""; html += '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">'; html += '<html><head>'; html += '<meta http-equiv="Content-Type" content="text/html; charset='+this.charset+'">'; html += '<title>SimpleTextEditor frame</title>'; html += '<style type="text/css">pre { background-color: #eeeeee; padding: 0.75em 1.5em; border: 1px solid #dddddd; }</style>'; if (this.cssFile) { html += '<link rel="stylesheet" type="text/css" href="'+this.cssFile+'">'; } html += '<style type="text/css">html,body { cursor: text; } body { margin: 0.5em; padding: 0; }</style>'; html += '</head><body></body></html>'; return html; }; this.openWindow = function(url, width, height) { var x = (screen.width/2-width/2); var y = (screen.height/2-height/2); window.open(url, "", "scrollbars=yes,width="+width+",height="+height+",screenX="+(x)+",screenY="+y+",left="+x+",top=" +y); }; this.toggleSource = function() { var html, text; if (this.browser.ie) { if (!this.viewSource) { html = this.frame.document.body.innerHTML; this.frame.document.body.innerText = unlockUrls(html); document.getElementById(this.id+"-buttons").style.visibility = "hidden"; this.viewSource = true; } else { text = this.frame.document.body.innerText; this.frame.document.body.innerHTML = lockUrls(text); document.getElementById(this.id+"-buttons").style.visibility = "visible"; this.viewSource = false; } } else if (this.browser.gecko) { if (!this.viewSource) { html = document.createTextNode(this.frame.document.body.innerHTML); this.frame.document.body.innerHTML = ""; this.frame.document.body.appendChild(html); document.getElementById(this.id+"-buttons").style.visibility = "hidden"; this.viewSource = true; } else { html = this.frame.document.body.ownerDocument.createRange(); html.selectNodeContents(this.frame.document.body); this.frame.document.body.innerHTML = html.toString(); document.getElementById(this.id+"-buttons").style.visibility = "visible"; this.viewSource = false; } } document.getElementById(this.id+"-viewSource").checked = this.viewSource ? "checked" : ""; document.getElementById(this.id+"-viewSource").blur(); }; this.execCommand = function(cmd, value) { if (cmd == "createlink" && !value) { var url = prompt("Enter URL:", ""); if (url) { this.frame.focus(); this.frame.document.execCommand("unlink", false, null); if (this.browser.ie) this.frame.document.execCommand(cmd, false, "simpletexteditor://simpletexteditor/"+url); else if (this.browser.gecko) this.frame.document.execCommand(cmd, false, url); this.frame.focus(); } } else if (cmd == "insertimage" && !value) { var imageUrl = prompt("Enter Image URL:", ""); if (imageUrl) { this.frame.focus(); this.frame.document.execCommand(cmd, false, imageUrl); this.frame.focus(); } } else { this.frame.focus(); this.frame.document.execCommand(cmd, false, value); this.frame.focus(); } }; this.isOn = function() { return Boolean(this.frame); }; this.getContent = function() { try { return unlockUrls(this.frame.document.body.innerHTML); } catch(e) { alert("SimpleTextEditor "+this.objectId+".getContent() failed"); } }; this.submit = function() { if (this.isOn()) { if (this.viewSource) { this.toggleSource(); } document.getElementById(this.id).value = this.getContent(); } }; } As you can see there are a few lines I wrote myself in the HTML file, but they didn't do the trick. Hey, i'm building my own wyiwyg-editor, and all works very good, exept getting the current focused element, i mean i wan't to show a path where the user is, and this function came out: Code: wysiwyg.getPath = function(i) {
if(wysiwyg.getMode(i) == 'source') return;
curr = document.getElementById('wysiwyg_frame_' + i).contentWindow.document;
sel = curr.selection;
if(sel == undefined) return;
if (sel.type=="Control") {
// control selection
range = sel.createRange();
if (range.length==1) {
elem = range.item(0);
}
else {
// multiple control selection
return;
}
} else {
range = sel.createRange();
elem = range.parentElement();
}
p = elem.tagName;
while(elem == elem.parentNode && elem.tagName != 'BODY'){
p = elem + ' > ' + p;
}
document.getElementById('wysiwg_path_' + i).innerHTML = p;
}
unfortunaly sel is always undefined, how can i fix it? i hope you can help me Morri |
|||||||