Jag har en wysiwyg editor och den fungerar utmärkt förutom en liten sak.. När man lägger in en bild så kan man inte ändra align på den. Men kan få den att ligga till höger på sidan och så men jag vill kunna få en bild där man kan ha text vid sidan om och "runt" bilden. självklart kan man editera i html taggen manuellt men det är 'nybörjare' som skall använda sidan och därför skulle jag vilja ha en bättre funktion för detta.
Säg till om jag skall slänga med koden också.. Det är ganska mycket kod.
wysiwyg hjälp med bild
5 svar · 344 visningar · startad av henrikjohansson
Vill du möjligen dela med dig av editorn?
Kanske det.. :) Jag är inte hemma nu så jag har inte koden med mig
Här är det 1
<html>
<style type="text/css">
TABLE#tblCoolbar { background-color:buttonface; padding:1px; color:menutext; border-width:1px; border-style:solid; border-color:threedhighlight threedshadow threedshadow threedhighlight;}
.cbtn{BORDER-LEFT: threedface 1px solid;BORDER-RIGHT: threedface 1px solid;BORDER-TOP: threedface 1px solid;BORDER-BOTTOM: threedface 1px solid; }
.starter{background-color: buttonface; border-left: buttonhighlight solid 1px; border-right: buttonshadow solid 1px;border-top: buttonhighlight solid 1px; font-size: 1px;top: 1px; height: 22px; width: 3px;}
.separator{border-left: buttonshadow solid 1px; border-right: buttonhighlight solid 1px; font-size: 0px; top: 1px;height: 22px; width: 1px; }
.dropdown{height: 22px; top:2;font:8pt verdana,arial,sans-serif}
.arrow {cursor:default;}
</style>
<script LANGUAGE="JavaScript">
var ground = "";
function changeColor(wcolour) {
if (ground=="bg"){
document.all["pickbgcolour"].style.backgroundColor = '#' + wcolour;
document.all["colorbox"].style.visibility = 'hidden';
idContent.document.body.bgColor = wcolour;
} else {
document.all["pickfgcolour"].style.backgroundColor = '#' + wcolour;
document.all["colorbox"].style.visibility = 'hidden';
cmdExec("ForeColor",wcolour);
}
}
function showColor(posX,posY,what){
e = window.event;
with (document.all["colorbox"]){
style.left = e.clientX+4;
style.top = e.clientY-18;
style.visibility = 'visible';
}
ground = what;
}
function button_over(eButton){
eButton.style.borderBottom = "buttonshadow solid 1px";
eButton.style.borderLeft = "buttonhighlight solid 1px";
eButton.style.borderRight = "buttonshadow solid 1px";
eButton.style.borderTop = "buttonhighlight solid 1px";
}
function button_out(eButton){
eButton.style.borderColor = "threedface";
}
function button_down(eButton){
eButton.style.borderBottom = "buttonhighlight solid 1px";
eButton.style.borderLeft = "buttonshadow solid 1px";
eButton.style.borderRight = "buttonhighlight solid 1px";
eButton.style.borderTop = "buttonshadow solid 1px";
}
function button_up(eButton){
eButton.style.borderBottom = "buttonshadow solid 1px";
eButton.style.borderLeft = "buttonhighlight solid 1px";
eButton.style.borderRight = "buttonshadow solid 1px";
eButton.style.borderTop = "buttonhighlight solid 1px";
eButton = null;
}
var isHTMLMode=false
function document.onreadystatechange(){
idContent.document.designMode="On"
}
function cmdExec(cmd,opt) {
if (isHTMLMode){alert("Please uncheck 'Edit HTML'");return;}
idContent.document.execCommand(cmd,"",opt);idContent.focus();
}
function setMode(bMode){
var sTmp;
isHTMLMode = bMode;
if (isHTMLMode){sTmp=idContent.document.body.innerHTML;idContent.document.body.innerText=sTmp;}
else {sTmp=idContent.document.body.innerText;idContent.document.body.innerHTML=sTmp;}
idContent.focus();
}
function createLink(){
if (isHTMLMode){alert("Please uncheck 'Edit HTML'");return;}
cmdExec("CreateLink");
}
function insertImage()
{
if (isHTMLMode){alert("Please uncheck 'Edit HTML'");return;}
var sImgSrc=prompt("Insert Image File (You can use your local image file) : ", "http://www.aspalliance.com/Yusuf/Article10/sample.jpg");
if(sImgSrc!=null) cmdExec("InsertImage",sImgSrc);
}
function fninit()
{
for(i=0;i<document.all.length;i++) document.all(i).unselectable = "on";
idContent.unselectable = "off";
}
function Save()
{
if (isHTMLMode){alert("Please uncheck 'Edit HTML'");return;}
document.all.Texten.value =idContent.document.body.innerHTML;
document.forms("Check").submit();
}
</script>
<body onload="fninit();" style="FONT-FAMILY: Verdana;FONT-SIZE: x-small;">
<form name="Check" action=Check.asp method=post>
<textarea name="Texten"></textarea>
</form>
och del 2
<font size=3><b>Create New Document</b></font>
<table id="tblCoolbar" cellpadding="0" cellspacing="0" width="500">
<tr>
<td><div class="starter"></div></td>
<td><div class="cbtn" onClick="cmdExec('cut')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);"><img align="absmiddle" src="images/Cut.gif" alt="Cut" WIDTH="23" HEIGHT="22"></div></td>
<td><div class="cbtn" onClick="cmdExec('copy')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);"><img align="absmiddle" src="images/Copy.gif" alt="Copy" WIDTH="23" HEIGHT="22"></div></td>
<td><div class="cbtn" onClick="cmdExec('paste')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);"><img align="absmiddle" src="images/Paste.gif" alt="Paste" WIDTH="23" HEIGHT="22"></div></td>
<td><div class="separator"></div></td>
<td><div class="cbtn" onClick="cmdExec('justifyleft')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);"><img align="absmiddle" src="images/Left.gif" alt="Justify Left" WIDTH="23" HEIGHT="22"></div></td>
<td><div class="cbtn" onClick="cmdExec('justifycenter')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);"><img align="absmiddle" src="images/Center.gif" alt="Center" WIDTH="23" HEIGHT="22"></div></td>
<td><div class="cbtn" onClick="cmdExec('justifyright')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);"><img hspace="1" vspace="1" align="absmiddle" src="images/Right.gif" alt="Justify Right" WIDTH="23" HEIGHT="22"></div></td>
<td><div class="separator"></div></td>
<td><div class="cbtn" onClick="cmdExec('insertorderedlist')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);"><img align="absmiddle" src="images/numlist.GIF" alt="Ordered List" WIDTH="23" HEIGHT="22"></div></td>
<td><div class="cbtn" onClick="cmdExec('insertunorderedlist')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);"><img align="absmiddle" src="images/bullist.GIF" alt="Unordered List" WIDTH="23" HEIGHT="22"></div></td>
<td><div class="cbtn" onClick="cmdExec('outdent')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);"><img align="absmiddle" src="images/deindent.gif" alt="Decrease Indent" WIDTH="23" HEIGHT="22"></div></td>
<td><div class="cbtn" onClick="cmdExec('indent')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);"><img align="absmiddle" src="images/inindent.gif" alt="Increase Indent" WIDTH="23" HEIGHT="22"></div></td>
<td><div class="separator"></div></td>
<td><div class="cbtn" onClick="cmdExec('createLink')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);"><img align="absmiddle" src="images/Link.gif" alt="Link" WIDTH="23" HEIGHT="22"></div></td>
<td><div class="separator"></div></td>
<td>
<div class="cbtn" id="pickfgcolour" style="background-color:#FFFFFF;width:16;height:17;" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<a class="arrow" href="#" onClick="showColor(this.x,this.y,'fg');">
<img align="absmiddle" src="images/fgcolor.gif" alt="Forecolor" border="0" WIDTH="23" HEIGHT="22"></a></div>
<div id="colorbox" style="position:absolute;visibility:hidden">
<table border="0" cellpadding="0" cellspacing="0" width="252" bgcolor="#000000">
<tr>
<td>
<table border="0" bordercolor="#000000" cellpadding="0" cellspacing="1">
<tbody>
<tr>
<script language="JavaScript">
c = new Array();
c[1] = "FF";
c[2] = "CC";
c[3] = "99";
c[4] = "66";
c[5] = "33";
c[6] = "00";
d = 0;
for (i=1;i <=6;i++)
{
if (i >1)
{
document.write( "</tr>\n<tr>\n");
}
for (m=1;m <=6;m++)
{
for (n=1;n <=6;n++)
{
d++;
colour = c[i] + c[m] + c[n];
document.write("<td bgcolor=\"#"+colour+"\" width=7 class=\"text\"><a href=\"#\" onClick=\"changeColor('"+colour+"')\"><img src=\"images/pixel.gif\" width=7 height=7 name=\"a"+d+"\" border=0></td>\n");
}
}
}
</script>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<table id="tblCoolbar" cellpadding="0" cellspacing="0" width="500">
<tr valign="middle" height="25">
<td><div class="starter"></div></td>
<td><select class="dropdown" onchange="cmdExec('fontsize',this[this.selectedIndex].value);" id=select3 name=select3>
<option selected>Size</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="10">10</option>
<option value="12">12</option>
<option value="14">14</option>
</select></td>
<td><div class="separator"></div></td>
<td><div class="cbtn" onClick="cmdExec('bold')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);"><img align="absmiddle" src="images/Bold.gif" alt="Bold" WIDTH="23" HEIGHT="22"></div></td>
<td><div class="cbtn" onClick="cmdExec('italic')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);"><img align="absmiddle" src="images/Italic.gif" alt="Italic" WIDTH="23" HEIGHT="22"></div></td>
<td><div class="cbtn" onClick="cmdExec('underline')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);"><img align="absmiddle" src="images/Under.gif" alt="Underline" WIDTH="23" HEIGHT="22"></div></td>
<td><div class="separator"></div></td>
<td><div class="cbtn" onClick="idContent ='HENRIK'" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);"><img align="absmiddle" src="images/Under.gif" alt="Underline" WIDTH="23" HEIGHT="22"></div></td>
<td><div class="cbtn" onClick="cmdExec('underline')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);"><img align="absmiddle" src="images/Under.gif" alt="Underline" WIDTH="23" HEIGHT="22"></div></td>
<td style="font:8pt verdana,arial,sans-serif" valign="middle" nowrap><a href="#" onclick="insertImage()">Insert Image</a></td>
<td valign="middle"><input type="checkbox" onclick="setMode(this.checked)" id=checkbox2 name=checkbox2></td><td width="100%" style="font:8pt verdana,arial,sans-serif" valign="middle" nowrap>Edit HTML</td>
</tr></table>
<iframe width="500" id="idContent" height="350"></iframe>
<table id="tblCoolbar" width="500" cellpadding=0 cellspacing=0>
<tr bgcolor=threedface>
<td align=right>
<INPUT type="button" value="Save" onClick="Save()" id=button2 name=button2>
</td>
</tr>
</table>
</body>
</html>