...

View Full Version : wysiwyg style detection



Lord_Garfield
04-22-2004, 09:54 AM
Hi all,

I created a wysiwyg editor in javascript. it all works fine. but what I still need is the folowing.

if you press text that is in bold or that is underlined I want the button wich stands for make bold or make underlined turned on. Or pressed in.

is this possible and how?

tanks.

best regards
Lord_Garfield

Kor
04-22-2004, 11:54 AM
To see how to handle a selection take a look at:

http://www.webreference.com/js/column12/crossbrowser.html

It says there about IE4 and NS4 but I have tested with Mozilla and IE6 and it looks OK that cross-browser solution.

Once you manage to hadle the selection I think it will be a piece of cake to make it bold, underlined or whichever

Lord_Garfield
04-22-2004, 10:57 PM
to put something in bold is not a problem. it is rather to check if it is bold then make the B button pressed in.

Like in word. if you place your cursor over a bold word. the B button will be pressed in.

How can I do this in javascript?

AaronW
04-22-2004, 11:10 PM
Well you can't tell a button to be pushed in when it's not. My suggestion is to whip up some images for the b, i, and u buttons and just emulate a button with two images (up and down).

Perhaps a more HTML-friendly way would be to simply give the button a 2px black border or something with CSS when it's in the a "bold" section.

Lord_Garfield
04-23-2004, 08:10 AM
Ok I mis explained myself.

I'm using images already. The problem is more how do I detect that I'm in this "bold area". So I can apply this other style to it.

or when I'm over text wich has the another font on it then the other text how can I detect wich font so I can put my select box so that that font is selected. etc...

tanks for the reply's.

best regards
LG

Kor
04-23-2004, 08:53 AM
hm... that means you need a way to find out if a selected characher/word is within <strong> or <b> tags... hm... interesting problem... I'll try to see if it can be solved...

joh6nn
04-23-2004, 10:41 AM
i'd say it depends heavily on how you're formatting that text. can we see the code you're working with?

Lord_Garfield
04-23-2004, 11:55 AM
I'll post a part of it.

I preload my images wich will be used as a toolbar.
I have a iframe named textvak1

I use this function to do basic stuff like setting something in bold.

function opmaak(commando)
{
textvak1.document.execCommand(commando);
textvak1.focus();

}

I call this function for example with this line
<IMG NAME="myinterfaceimgmap_01" SRC="images/myinterfaceimgmap_01.gif" OnClick="opmaak('Bold')" WIDTH=26 HEIGHT=25 BORDER=0 ALT="" USEMAP="#myinterfaceimgmap_01_Map"></TD>

hope this helps.

swmr
04-24-2004, 04:11 AM
something like this?



<html>
<head>
<title>QueryCommandState</title>

<script type="text/JScript">

function execCom(n){

editBox.focus();

var d = document;

if(d.queryCommandSupported(n)){
d.execCommand(n);}

}

function querCom(){
var d, f, e, n;

d = document;
f = d.commands;

e = new Enumerator(f.elements);

while (!e.atEnd()){

n = e.item().name;

if(d.queryCommandSupported(n)){

d.queryCommandState(n) ? f[n].className = "ON" : f[n].className = "OFF";}

e.moveNext();}

}
</script>

<style type="text/css">

.container{
width:40em;
padding:1em;
border:2px outset;
background:threedface}

.edt{
height:10em;
padding:1em;
overflow-y:scroll;
border:2px inset;
color:windowtext;
background:window;
word-wrap:break-word;
scrollbar-base-color:threedface}

.toolbar{
padding:0.5em;
margin:1em 0 0 0;
text-align:center;
border:2px outset}

.OFF{
font:caption;
border:2px outset}

.ON{
font:caption;
border:2px inset;
color:activecaption;
background:threedhighlight}

</style>

</head>
<body>

<div class="container" onclick="execCom(event.srcElement.name)">

<div contenteditable="true" id="editBox" class="edt"
onfocus="querCom()" onbeforeeditfocus="querCom()" onkeydown="querCom()" onkeyup="querCom()">
<!-- Use Div On Carriage Return --> <div></div>
</div>

<form unselectable="on" name="commands" class="toolbar">
<input type="button" name="Bold" title="text: bold" value="Bold" class="OFF">
<input type="button" name="Italic" title="text: italic" value="Italic" class="OFF">
<input type="button" name="StrikeThrough" title="text: strike-through" value="Strike" class="OFF">
</form>

</div>

</body>
</html>


(Just be sure to use actual command Identifiers as element names...)

swmr
04-24-2004, 10:11 AM
:eek: I just noticed the slow reaction from that "onbeforeeditfocus" event:


using onclick="querCom()" seems much faster... :cool:

Lord_Garfield
04-25-2004, 11:13 PM
tanks I try it..

starrwriter
05-20-2004, 04:56 AM
I'll post a part of it.

I preload my images wich will be used as a toolbar.
I have a iframe named textvak1

I use this function to do basic stuff like setting something in bold.

function opmaak(commando)
{
textvak1.document.execCommand(commando);
textvak1.focus();

}

I call this function for example with this line
<IMG NAME="myinterfaceimgmap_01" SRC="images/myinterfaceimgmap_01.gif" OnClick="opmaak('Bold')" WIDTH=26 HEIGHT=25 BORDER=0 ALT="" USEMAP="#myinterfaceimgmap_01_Map"></TD>

Dynamic Drive has a free script that will do what you want:
http://www.dynamicdrive.com/dynamicindex5/depressbutton.htm



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum