using formatblock

anzenews · 2005-02-21 18:39:37

Hi!

Looks like I'm the only one writing here - sorry about that...
I tried to find answers elsewhere but couldn't and I am in a hurry to put Xinha in some project. Any help would be appreciated.

I would like to add users the option to add DIVs in text (for quotations and similar). I tried using formatblock for this but somehow can't make it work. Instead of adding '<div>' and '</div>' I get '<<div>>' and '</<div>>' - which is not really useful...

I am doing this:

var config = new HTMLArea.Config();

config.formatblock = {
"Heading 1": "h1",
"Heading 2": "h2",
"Heading 3": "h3",
"Quotation": "div"
};

config.toolbar = [
['formatblock', 'space',
'bold', 'italic', 'underline'],
[ "justifyleft", "justifycenter", "justifyright", "justifyfull", "separator",
"lefttoright", "righttoleft", "separator",
"insertorderedlist", "insertunorderedlist", "outdent", "indent", "separator","htmlmode"],
];
config.pageStyle = "@import url(/project/css/style.css);";

// create an editor for the textarea:
editor = new HTMLArea("ta",config);
editor.registerPlugin(FullPage);
editor.registerPlugin(TableOperations);
editor.registerPlugin(ListType);
editor.generate();

What am I doing wrong? Is there a nicer way to do it? Surely I'm not the first who wanted painted blocks inside text... Basically I wand blocks of text to be enclosed in <div class="quotation"> and </div>. How can I do it?

Another thing: I want CSS styles (defined in style.css) to be used inside htmlarea - but '@import' line doesn't seem to work. Any suggestions? Is there something wrong with the way I'm using it?

I only tested in Firefox (Linux) as I don't have IE here.

Any help would be appreciated.

Thank you, enjoy!

Anze

gogo · 2005-02-21 22:39:03

anzenews wrote:

I would like to add users the option to add DIVs in text (for quotations and similar). I tried using formatblock for this but somehow can't make it work. Instead of adding '<div>' and '</div>' I get '<<div>>' and '</<div>>' - which is not really useful...

Formatblock can't be used for div AFAIK (this is a built in command of the browser, the browser just doesn't support div as a block).

What I'd suggest is using the stylist plugin for this purpose, http://xinha.gogo.co.nz/cgi-bin/trac.cgi/wiki/Stylist

with a config command something like

cfg.stylistLoadStyles('div.quotation { /* whatever styles in here */ }');

aside from that you might look at the CSS or DynamicCSS plugin but I don't have any experience with those - http://xinha.gogo.co.nz/cgi-bin/trac.cgi/wiki/Plugins

anzenews · 2005-02-22 09:40:07

Great!

Stylist looks like a really nice solution... though... what is 'cfg' in an example? Probably 'editor.config' in my example?

I am a bit confused about all this config stuff. When does the htmlarea 'use' editor.config? I know it is called when you create the editor ( editor=new HTMLArea("ta",config); ). What about later? How do you change it? Can we just say editor.config=config?
Probably not...

I'll try to figure it out, but this could be another paragraph for documentation...
I'll post it back here once I crack it.

Thank you for all your help!

Anze

anzenews · 2005-02-22 10:39:55

OK, editor.config.stylistLoadStyles() works.

Though... When I choose another style the changes do not reflect on the text (text color does not change). Is it supposed to work this way?

Later I discovered how to make it work - I disabled FullPage plugin. Works like charm.

Another thing:
Is it possible to alter the way the enter key works? I think would be nice to have this feature.
Let's say you have four styles: h1 (Title), h2 (Subtitle), p (Text) and div.quotation (Quotation). The editor should start in 'Title' mode. Then when user presses Enter the editor should automatically switch to Subtitle (of course, the user could change the mode to some other).
When the user is inside Subtitle the enter key should go to Text. Inside Text mode the enter should keep it there, but it should close the current paragraph and start new one ('</p><p>').

Of course the developer should have the way of telling how the block should behave (what enter key does).

Just an idea...

Last edited by anzenews (2005-02-22 16:13:23)

anzenews · 2005-02-22 16:41:54

Another thing...

Is there a reason for Stylist to use a lower part of the text area and not a dropdown menu?

Enjoy!

gogo · 2005-02-27 01:07:42

anzenews wrote:

Is there a reason for Stylist to use a lower part of the text area and not a dropdown menu?

Yes, you can apply multiple styles to the selection, simply select something click a style, click another style. That would be cumbersome in a select list.

Is it possible to alter the way the enter key works? I think would be nice to have this feature.
Let's say you have four styles: h1 (Title), h2 (Subtitle), p (Text) and div.quotation (Quotation). The editor should start in 'Title' mode. Then when user presses Enter the editor should automatically switch to Subtitle (of course, the user could change the mode to some other).
When the user is inside Subtitle the enter key should go to Text. Inside Text mode the enter should keep it there, but it should close the current paragraph and start new one ('</p><p>').

Interesting idea. Submit a feature request ticket.

anzenews · 2005-02-28 04:56:20

OK, I did - I gave it low priority (stability and some other features being much more important to me). I included it under Stylist as the Xinha core has no notion of styles.

Yes, you can apply multiple styles to the selection, simply select something click a style, click another style. That would be cumbersome in a select list.

I see - I wasn't aware of this feature.
IMHO it would be nice to be able to choose between multiple selects and dropdown display. For my case multiple selects are not really needed while it would be very nice to have dropdown selection.
I want to give user an option to select paragraph styles - and they always cancel each other out (the way it is done now the user can enter: '<h1><h2>something</h2></h1>' - which does not make sense).

Maybe even better idea:
You have paragraph styles and you have character styles.
The selection for paragraph styles should be a dropdown menu and should exclude all other styles - you cannot possibly have paragraph style inside another paragraph style.
The selection for character styles should allow nested / multiple styles to be applied (the way Stylist works now).

That would IMHO simplify things for both developer and user (and is actually similar in a way MS Word & co. work).

It takes a bit of functionality from HTML (you cannot declare <p> inside <div>), but then again - does anybody ever need this?

anzenews · 2005-03-02 09:55:06

OK, I finally found a viable solution. It is not by using Stylist but by using formatblock.

The problem with Stylist was its feature to allow multiple styles on the same paragraph - what is the point in having "<h1><h2>title</h2></h1>" in your text?

While formatblock has its issues (not being able to use anything but <h1>..<h6> and <p> in correct manner) at least I could find an easy-to-use workaround - all my quotations are now <h4> blocks. While it is not strictly nice HTML at least it works. Of course, I can always replace <h4> tags with <div class="quote"> when displaying text.

Hope it helps someone.

Xinha Discussion Forum

Announcement

#1 2005-02-21 18:39:37

using formatblock

#2 2005-02-21 22:39:03

Re: using formatblock

#3 2005-02-22 09:40:07

Re: using formatblock

#4 2005-02-22 10:39:55

Re: using formatblock

#5 2005-02-22 16:41:54

Re: using formatblock

#6 2005-02-27 01:07:42

Re: using formatblock

#7 2005-02-28 04:56:20

Re: using formatblock

#8 2005-03-02 09:55:06

Re: using formatblock

Board footer