Kleur verandere simple wysiwig

[killer4all2]

Goedendag,

Momenteel ben ik bezig met een cms systeem opzetten en omdat ik zelf geen java kan maak ik gebruik van simple wysiwyg editor heb hem zelf een beetje aangepast met de hand van een internet tutorial. Maar omdat ik zelf geen java kan weet ik niet hoe ik nou de Standaard kleur van de textarea moet veranderen. Ik hoop dat jullie mij kunnen helpen.

Misschien is het beter om een andere wysiwyg editor te gebruiken, maar ik snap er niet veel van (ik wil ook de styles dan aanpassen namelijk)

Groetjes,
Rowan

Het html script:

<textarea onfocus = 'changeCol(this)' style='color:#FFF' id='simple' name='textarea' cols='30' rows='30'>$value</textarea>
<script type='text/javascript'>
	var ste = new SimpleTextEditor('simple', 'ste');
	ste.init();
</script>

Het javascript :

[JS]// +----------------------------------------------------------------+
// | SimpleTextEditor 1.0 |
// | Author: Cezary Tomczak [www.gosu.pl] |
// | Free for any use as long as all copyright messages are intact. |
// +----------------------------------------------------------------+

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.className == "button") {
buttons.id = this.id+'-button-'+i;
buttons.onmouseover = function() { this.className = "button-hover"; }
buttons.onmouseout = function() { this.className = this.className.replace(/button-hover(\s)?/, "button"); }
buttons.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.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+'java/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 += '<td class="bar"><td class="button"><img style="float:right;" id="'+this.id+'-viewSource" src="'+this.path+'images/html.gif" width="20" height="20" alt="View source" title="View source" onclick="'+this.objectId+'.toggleSource()" />';
html += '</td></td></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();
}
};
}[/JS]

 

[dieterke]

U hebt uw post wel fout geplaatst. Dit is het Java forum ipv het JavaSCRIPT forum. Ik weet niet of ik u goed begrijp maar je wilt zelf een CMS maken met een wysiwyg editor? Als dat het geval is zal ik u moeten teleurstellen. Je kan namelijk geen CMS maken met een wysiwyg editor. Je zal hier een programmeertaal voor moeten aanleren (PHP, Java, C# met ASP.Net,....) er zijn veel mogelijkheden. Ik denk dat het makkelijkste is beginnen met HTML & CSS en daarna overstappen naar PHP. Je kan ook naar bestaanden cms'en kijken hoe hun het doen en daar op verder bouwen. Schrijf bijvoorbeeld plugins voor wodpress..

 

[killer4all2]

bedankt voor u reactie, maar ik denk dat u mijn vraag verkeerd geïnterpreteerd hebt. Een cms maken met een wysiwyg maken bedoel ik "Een cms maken waar een wysiwyg in verwerkt zit" Ik kan de programmeer taal PHP en de codeer talen css en (x)html (feilloos html / css) en het lukt mij al aardig goed. (php eind beginners fase ;P)

Ik heb het al voor elkaar gekregen de kleuren te veranderen. Als ik helemaal klaar ben met mijn cms zal ik is gaan kijken naar de programmeer taal java script dan kan ik mijn eigen geadvanceerde wysiwyg maken.

Maar bedankt voor je reactie!