Rich editor - source code

Question

ivan3510 8 Junior Poster

13 Years Ago

Hi!
Sorry for my bad english!
How to make a button (source code) that when someone clicks on it, it shows the source code of that what is written.
(On some buttons I put the image (<input type="image" src="image.bmp" onclick="urediFont('justifyleft');">) (alignment:left, center, right). But when I click on them everthing is ok but the page refreshed and then isn't ok. What is mistake? See the code (PS. I tried write "<button><img src="image.bmp" onclick="urediFont('justifyleft');"></button>", the same mistake!)
Here's code:

<script type="text/javascript">
wid="350px";
function stvoriEditor(){
var mjesto=document.getElementById('mjesto');
var prozor=document.createElement('iframe');
prozor.name=prozor.id="uredivac";
mjesto.appendChild(prozor);
uredivac.document.designMode="on";
uredivac.document.open();
uredivac.document.write('<html><head><style type="text/css">body{font-family:libersina,Arial;font-size:15px;}</style></head><body>');
uredivac.document.close();
uredivac.focus();
document.getElementById('uredivac').style.width=wid;
document.getElementById('naredbe').style.width=wid;
}
window.onload=function(){
stvoriEditor();
}
function urediFont(x,y){
uredivac.document.execCommand(x,"",y);
uredivac.focus();
}
function dodajLink(){
var link=prompt('Upisite URL:');
if(link==null){
link='http://www.webdevproject.com';
}
urediFont('CreateLink',link);
}
function spremi(){
var sadrzaj=uredivac.document.body.innerHTML;
sadrzaj=content.replace(/</g,"&lt;").replace(/>/g,"&gt;");
document.getElementById('sadrzaj').value=sadrzaj;
}
</script>
<style type="text/css">
#uredivac{
border:1px inset black;
}
#naredbe{
background-color:rgb(199,147,69);
}
.na{
background-color:rgb(199,147,69);
border:0px;
font-family:libersina,arial;
font-size:15px;
}
input[disabled]{
background-color:rgb(105,84,33);
border:0px;
font-family:libersina,arial;
font-size:15px;
}
</style>
<form action="" method="post" onsubmit="spremi(); return true;">
<div id="naredbe">
<input type="button" class="na" style="font-weight:bold;" value="B" onclick="urediFont('bold');">
<input type="button" class="na" style="text-decoration:underline;" value="U" onclick="urediFont('underline');">
<input type="button" class="na" style="font-style:italic;" value="I" onclick="urediFont('italic');">
<input type="button" class="na" value="Dodaj link" onclick="dodajLink();">
<input type="image" src="por_l.bmp" class="na" onclick="urediFont('justifyleft')">
<input type="image" src="por_s.bmp" class="na" onclick="urediFont('justifycenter')">
<input type="image" src="por_d.bmp" class="na" onclick="urediFont('justifyright')">
<input type="image" src="por_o.bmp" class="na" onclick="urediFont('justifyfull')">
<input type="button" class="na" value="1" onclick="urediFont('insertorderedlist')">
<input type="button" class="na" value="t" onclick="urediFont('insertunorderedlist')">
<input type="button" class="na" value="l" onclick="urediFont('outdent')">
<input type="button" class="na" value="d" onclick="urediFont('indent')">
<select id='boja' onchange="urediFont('ForeColor',this[this.selectedIndex].value)">
<option style="color:black;" value="black">-</option>
<option style="color:blue;" value="blue">-</option>
<option style="color:green;" value="green">-</option>
<option style="color:pink;" value="pink">-</option>
</select>
<select id='font' onchange="urediFont('fontname',this[this.selectedIndex].value)">
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Times New Roman">Times New Roman</option>
</select>
<select id='velicina' onchange="urediFont('fontsize',this[this.selectedIndex].value)">
<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>
</select>
<input type="hidden" name="sadrzaj" id="sadrzaj" value="">
</div>
<div id="mjesto"></div>

Thanks!
(PS. How to add tables?)

javascript

Edited 13 Years Ago by ivan3510 because: n/a

3 Contributors
14 Replies
180 Views
2 Days Discussion Span
Latest Post 13 Years Ago Latest Post by ivan3510

All 14 Replies

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Ivan,

I have never written an editor from scratch but I have hacked a few over the years.

How to make a button (source code) that when someone clicks on it, it shows the source code of that what is written.

Do you mean you want to toggle between Markup mode and WYSIWYG mode?

If so, there are several ways to approach this. Personally, I would have two elements, same size, same position, one for Markup and one for WYSIWYG. All user interactions would first update the Markup, which would then be immediately parsed and rendered in the WYSIWYG element. Toggling between modes would simply be a question of showing one element and hiding the other.

I think it is very optimistic to hope that an editor (more specifically any user entered text) would survive a page refresh. You should design it to work without ever needing to be refreshed.

In this regard, you should note that <input type="image"> makes a submit button. You can suppress the submit action with onclick="...; return false;" or use <a href="" onclick="...; return false;"><img src="..."></a> instead.

Airshow

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Ivan,

Style them both in CSS. You can use height and width for both. Cols and rows is an oldfashioned HTML thing (but still quite useful on other occasions).

I can foresee cross-browser differences, especially as one of the elements is an iFrame. You can start by putting both elements inside the same wrapper (a div). Give this wrapper CSS height and width in px then apply height=100% and width=100% to both the contained elements.

Airshow

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Ivan,

I played around for 10 minutes and came up with this (slightly different from what I said before):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
#editorWrapper    { width:300px; height:200px; }
#markupContainer  { width:300px; height:200px; overflow:auto; }
#wysiwygContainer { width:100%; height:100%; background-color:#e0e0e0; border:1px solid #666; overflow:auto; }
</style>

<script type="text/javascript">
	var editorWrapper = document.getElementById('editorWrapper');
	var markupContainer = document.getElementById('markupContainer');
	var wysiwygContainer = document.getElementById('wysiwygContainer');
	var swapButton = document.getElementById('swapButton');
	var markupButton = document.getElementById('markupButton');
	var wysiwygButton = document.getElementById('wysiwygButton');
	
	markupButton.onclick = function(){
		markupContainer.style.display  = 'block';
		wysiwygContainer.style.display = 'none';
	};
	wysiwygButton.onclick = function(){
		markupContainer.style.display  = 'none';
		wysiwygContainer.style.display = 'block';
	};
	markupButton.onclick();//here you choose which mode is initially displayed
//	wysiwygButton.onclick();//here you choose which mode is initially displayed
};
</script>

</head>

<body>

<div id="editorWrapper">
	<textarea id="markupContainer"> </textarea>
	<div id="wysiwygContainer"></div>
</div>

<button id="markupButton">Markup</button>&nbsp;
<button id="wysiwygButton">WYSIWYG</button>

</body>
</html>

This is very basic and looks differnt in IE and Firefox. You will need to do lots of testing in different browsers and adjust accordingly.

It may be easier to make the WYSIWYG a popup div that overlays the rest of the page.

Airshow

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Whoops I missed a line!

Add the following as first line after <script> tag

onload = function(){

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ivan3510 8 Junior Poster · Answer 1 · 2010-10-19T00:04:07+00:00

Ok. Thanks!
But how to make that the elements has the same width and height?
(I make "textarea" and "iframe").
In textarea is "cols" and "rows", but in iframe is "width" and "height"!

ivan3510 8 Junior Poster · Answer 2 · 2010-10-19T00:35:33+00:00

But in textarea doesn't work "width" and "height"!
PS. I don't understand you very well. Can you add some example!

ivan3510 8 Junior Poster · Answer 3 · 2010-10-19T20:13:23+00:00

Here's code. It doesn't work. (It work, but result isn't expected)

<script type="text/javascript">
function stvoriEditor(){
var mjesto=document.getElementById('mjesto');
var prozor=document.createElement('iframe');
prozor.name=prozor.id="uredivac";
mjesto.appendChild(prozor);
uredivac.document.designMode="on";
uredivac.document.open();
uredivac.document.write('<html><head><style type="text/css">body{font-family:libersina,Arial;font-size:15px;}</style></head><body>');
uredivac.document.close();
uredivac.focus();
}
window.onload=function(){
stvoriEditor();
}
function urediFont(x,y){
uredivac.document.execCommand(x,"",y);
uredivac.focus();
}
function dodajLink(){
var link=prompt('Upisite URL:');
if(link==null){
link='http://www.webdevproject.com';
}
urediFont('CreateLink',link);
}
function spremi(){
var sadrzaj=uredivac.document.body.innerHTML;
sadrzaj=content.replace(/</g,"&lt;").replace(/>/g,"&gt;");
document.getElementById('sadrzaj').value=sadrzaj;
}
function ozn(opcija,id){
document.getElementById(id).style.background="rgb(167,120,50)";
document.getElementById(id).onclick=function(){mak('+opcija+',this.id);}
urediFont(opcija);
}
function mak(opcija,id){
document.getElementById(id).style.background="rgb(199,147,69)";
document.getElementById(id).onclick=function(){ozn('+opcija+',this.id);}
urediFont(opcija);
}
function wysiwyg(){
dok2=document.getElementById('izvor').innerHTML;
document.getElementById('izvor').style.display="none";
document.getElementById('uredivac').style.display="block";
uredivac.document.body.innerHTML=dok2;
document.getElementById('uredivac').focus();
document.getElementById('btn').value="HTML kod";
document.getElementById('btn').onclick=htmlkod;
}
function htmlkod(){
dok=uredivac.document.body.innerHTML;
document.getElementById('uredivac').style.display="none";
document.getElementById('izvor').style.display="block";
document.getElementById('izvor').innerHTML=dok;
document.getElementById('izvor').focus();
document.getElementById('btn').value="WYSIWYG";
document.getElementById('btn').onclick=wysiwyg;
}
</script>
<style type="text/css">
#mjesto{
width:350px;
height:100px;
}
#uredivac{
border:1px inset black;
width:350px;
height:100px;
}
#naredbe{
background-color:rgb(199,147,69);
width:350px;
}
.na{
background-color:rgb(199,147,69);
border:0px;
font-family:libersina,arial;
font-size:15px;
}
input[disabled]{
background-color:rgb(105,84,33);
border:0px;
font-family:libersina,arial;
font-size:15px;
}
#izvor{
border:1px inset black;
width:350px;
height:100px;
overflow:auto;
display:none;
}
</style>
<form action="" method="post" onsubmit="spremi(); return true;"></form>
<div id="naredbe">
<input type="button" class="na" style="font-weight:bold;" value="B" id="1" onclick="ozn('bold',this.id);">
<input type="button" class="na" style="text-decoration:underline;" value="U" id="2" onclick="ozn('underline',this.id);">
<input type="button" class="na" style="font-style:italic;" value="I" id="3" onclick="ozn('italic',this.id);">
<input type="button" class="na" value="Dodaj link" onclick="dodajLink();">
<input type="image" src="por_l.bmp" class="na" onclick="urediFont('justifyleft')">
<input type="image" src="por_s.bmp" class="na" onclick="urediFont('justifycenter')">
<input type="image" src="por_d.bmp" class="na" onclick="urediFont('justifyright')">
<input type="image" src="por_o.bmp" class="na" onclick="urediFont('justifyfull')">
<input type="button" class="na" value="1" onclick="urediFont('insertorderedlist')">
<input type="button" class="na" value="t" onclick="urediFont('insertunorderedlist')">
<input type="button" class="na" value="l" onclick="urediFont('outdent')">
<input type="button" class="na" value="d" onclick="urediFont('indent')">
<select id='boja' onchange="urediFont('ForeColor',this[this.selectedIndex].value)">
<option style="color:black;" value="black">-</option>
<option style="color:blue;" value="blue">-</option>
<option style="color:green;" value="green">-</option>
<option style="color:pink;" value="pink">-</option>
</select>
<select id='font' onchange="urediFont('fontname',this[this.selectedIndex].value)">
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Times New Roman">Times New Roman</option>
</select>
<select id='velicina' onchange="urediFont('fontsize',this[this.selectedIndex].value)">
<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>
</select>
<input type="button" value="HTML kod" class="na" id="btn" onclick="htmlkod();">
<input type="hidden" name="sadrzaj" id="sadrzaj" value="">
</div>
<div id="mjesto"><textarea id="izvor"></textarea></div>

Something is wrong with options. (I want to make that when yomebody clicks on it that this button change his background color. But when the button is clicked (eg. B), it constantly write bolded text.)

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 4 · 2010-10-20T06:37:04+00:00

Ivan,

Editors are complex. You just have to keep working at it.

Airshow

Graphix 68 --- · Answer 5 · 2010-10-20T14:53:30+00:00

Ivan, I see you used the tutorials I gave you to make a rich text editor, but you did not copy them correctly. For instance, line 9 and 10, you neglected to close the <body> and <html> tag, which is probably causing your problems.

If you want to change the background color of the selected text, you just simply use the following:

urediFont('BackColor', 'blue');

For a complete reference see:
http://msdn.microsoft.com/en-us/library/ms533049%28v=VS.85%29.aspx

I would highly recommend that you read through my tutorial again:
http://www.webdevproject.com/projects/solo/project31.html

Also, commenting/indenting on your code is advisable, as we can then understand the code alot better. (Code guidelines)

~G

ivan3510 8 Junior Poster · Answer 6 · 2010-10-20T18:19:46+00:00

No. You didn't understand me.
eg. button "B", bold;
when somebody click on button "B", the background color of this button changes (when user clicks on "B", background color of the "b" changes, the user know whether the text will be bold or not. But, when he clicks on "b", it constantly writes bolded text, no matter how many times you click on it, it can not be set to off)

Graphix 68 --- · Answer 7 · 2010-10-20T19:25:21+00:00

When the user selects a text, he can press the 'B'-button to bold and to unbold the selected text. However, when he presses the 'B'-button without having the text selected, the user can enter text which will turn up bold. If the user wants to stop with this, he can unbold by clicking the 'B'-button.

~G

ivan3510 8 Junior Poster · Answer 8 · 2010-10-20T20:20:20+00:00

I make that when user clicks on b-button, the b-button background color changes (SEE THE CODE). When bold is on, background color is changed so the user know that the text that he writes will be bold. But if user want to stop bolding, he click on the b-button. the background color of the button changes, but the text that he writes is still bold. What's mistake?
ps. just see the code (copy/paste), and you'll see the mistake; my browser: firefox

Graphix 68 --- · Answer 9 · 2010-10-20T21:06:34+00:00

Ok your problem lies in the following two functions:

function ozn(opcija,id){
document.getElementById(id).style.background="rgb(167,120,50)";
document.getElementById(id).onclick=function(){mak('+opcija+',this.id);}
urediFont(opcija);
}

function mak(opcija,id){
document.getElementById(id).style.background="rgb(199,147,69)";
document.getElementById(id).onclick=function(){ozn('+opcija+',this.id);}
urediFont(opcija);
}

They need to be changed into:

function ozn(opcija,id){
document.getElementById(id).style.background="rgb(167,120,50)";
document.getElementById(id).onclick=function(){mak(opcija,this.id);}
urediFont(opcija);
}

function mak(opcija,id){
document.getElementById(id).style.background="rgb(199,147,69)";
document.getElementById(id).onclick=function(){ozn(opcija,this.id);}
urediFont(opcija);
}

~G

PS: I do not have any clue which language this is, so all the variables names are confusing to me. Perhaps program in english so your code is more understandable to people. Just a suggestion for in the future ;)

ivan3510 8 Junior Poster · Answer 10 · 2010-10-20T21:09:49+00:00

ivan3510 8 Junior Poster

13 Years Ago

Thank you very much!
ps. This is CROATIAN.

Rich editor - source code

Recommended Answers Collapse Answers

All 14 Replies

Recommended Answers