htmlArea

A directory of browser-based WYSIWYG editors

  MAIN
INDEX
SEARCH
POSTS
WHO'S
ONLINE
LOG
IN

Home: htmlArea 2: htmlArea 2 & 3 archive (read only): htmlArea v2.0:
Text Font Removal


The htmlArea 2 & 3 editors have been discontinued.

We've made these forums available as a read-only reference and knowledge-base for people using or developing editors based on htmlArea 2 or 3.

Anyone who is interested in taking over version 2 or 3 is free to do so. All we ask is that you choose a new name that doesn't have "htmlarea" in it to avoid confusion with this site. We'll even give you a link in the directory to make it easier for people to find you. If you are developing or hosting an htmlArea based-editor under a new name, please submit it to our directory.

 


Pie Man
New User

Jan 13, 2005, 1:05 PM

Post #1 of 2 (2553 views)
Shortcut
Text Font Removal Can't Post

Hi

I have a requirement to add this fab HTML Area to one of my sites, but I don't want it to specify any font or font size. I plan on doing that when the input is output to the site.

How do I do that, I have tried, but alas it doesn't seem to work.Unsure

Any help is appreciated.


GoodAsh
New User

Jan 14, 2005, 7:50 AM

Post #2 of 2 (2541 views)
Shortcut
Re: [Pie Man] Text Font Removal [In reply to] Can't Post

Hi Pieman,

There's a good outline found on the FAQ page of this website. If you need better code samples, you can probably find some posts in the forum by searching for config, settings, etc...

I've posted the text below for convenience...


I want to change the editor settings, how do I do that? While it's true that all you need is one line of JavaScript to create an htmlArea WYSIWYG editor you can also specify more config settings in the code to control how the editor works and looks. Here's an example of some of the available settings: <script language="JavaScript1.2" defer>
var config = new Object(); // create new config object

config.width = "90%";
config.height = "200px";
config.bodyStyle = 'background-color: white; font-family: "Verdana"; font-size: x-small;';
config.debug = 0;

// Add additional editor config settings here...

editor_generate('fieldname',config);
</script>
See below for even more configuration options that can be added. All of these settings will use default values in editor.js if you don't specify them yourself.

Width specifies the width of the editor (in pixels or as a percentage). Height specifies the height of the editor (in pixels or as a percentage). bodyStyle specifies CSS style of the editor window including color, default font face, and size. Note, the default font information isn't saved, it just controls how text is displayed if no other font formatting has been applied. debug if set to 1, displays a debug field with the actual contents of the editor (in raw html) which is updated as your type.



How can I change what controls are displayed on the toolbar? You can add a config.toolbar config setting to control exactly what's shown on the toolbar. Here's an example. config.toolbar = [
['fontname'],
['fontsize'],
['fontstyle'],
['linebreak'],
['bold','italic','underline','separator'],
['strikethrough','subscript','superscript','separator'],
['justifyleft','justifycenter','justifyright','separator'],
['OrderedList','UnOrderedList','Outdent','Indent','separator'],
['forecolor','backcolor','separator'],
//['custom1','custom2','custom3','separator'],
['HorizontalRule','Createlink','InsertImage','htmlmode','separator'],
['about','help']
]; The square brackets control how the buttons are "grouped" together. You can either erase or comment out (by adding // to the beginning of the line) buttons or button groups you don't want displayed. Most of the buttons do pretty much just what you'd expect, but here's a few odd ones for reference.

linebreak adds a linebreak to the toolbar, all buttons after this are on the next line. separator adds a vertical separator between buttons, helps to visually group buttons together customN these are custom buttons that can be defined by JavaScript programmers who want to extend htmlArea.



How can I change what fonts are in the font list? There is a config.fontnames setting that lets you control this. See below. config.fontnames = {
"Arial": "arial, helvetica, sans-serif",
"Courier New": "courier new, courier, mono",
"Georgia": "Georgia, Times New Roman, Times, Serif",
"Tahoma": "Tahoma, Arial, Helvetica, sans-serif",
"Times New Roman": "times new roman, times, serif",
"Verdana": "Verdana, Arial, Helvetica, sans-serif",
"impact": "impact",
"WingDings": "WingDings"
};
The name on the left is what is displayed to the user. The list of fonts on the right is what is actually put into the font tag in the code.



How can I change what sizes are in the font size? There is a config.fontsizes setting that lets you control this. See below. config.fontsizes = {
"1 (8 pt)": "1",
"2 (10 pt)": "2",
"3 (12 pt)": "3",
"4 (14 pt)": "4",
"5 (18 pt)": "5",
"6 (24 pt)": "6",
"7 (36 pt)": "7"
};
The value on the right is what the user sees, the value on the left is the actual font size used.



How can I change what styles are in the font style (CSS) list? As you can probably guess, there's a config.fontstyles setting for this. Now remember, the styles defined here control how the text looks in the editor. These styles ALSO have to be defined on any page where you display content created with the editor. htmlArea will save the class name with the content but nothing else. It's up to you to define the class style in your pages. config.fontstyles = [{
name: "headline",
className: "headline",
classStyle: "font-family: arial; font-size: 28px;"
},{
name: "red text",
className: "saletext2",
classStyle: ""
}];
The "name" is what's displayed to users, "className" is the name of the CSS class to use, and classStyle defines the attributes of the style in the editor. If you leave classStyle blank you have to be sure to also specify an external stylesheet with all the style information (and matching classNames!). See the next question on how to do that.



How can I specify an external stylesheet for my styles? You can specify a stylesheet to avoid entering the class style data for each class name. You STILL have to specify which classNames you want to have available though, see the previous question for information on that. config.stylesheet = "/style.css";





 
 
 


Search for (options)