HTMLEditor Bean Styles

Classic Servoy
1

Where can I define the styles that show up inside the ServoyHTMLEditor bean (whether FCK or TinyMCE) in the Styles dropdown. For that matter, where do you define items such as Format, Font, Size, etc. as well?

Thanks,

Keith

2

Each editor has its own ways of doing that, so you’ll have to refer to the online documentation for it.
But generally this is done using the setCustomConfiguration() or setEditorTypeAndConfiguration() method, by passing proper initialization scripts.

3

I have the follwoing method on load of the form that contains the HTMLEditor but although it does not error or even have any warnings, it appears to do nothing at all:

function onLoadHTMLEditor(event) {
	var js = {
		config: 'FCKConfig.ToolbarSets["Default"] = [\
		["Source","Preview"],\
		["Cut","Copy","Paste","PasteText","PasteWord","-","Print","SpellCheck"],\
		["Undo","Redo","-","Find","Replace","-","SelectAll","RemoveFormat"],\
		["Form","Checkbox","Radio","TextField","Textarea","Select","Button"];\
		FCKConfig.AutoDetectPasteFromWord = true;\
		FCKConfig.AutoDetectLanguage = false;\
		FCKConfig.DefaultLanguage = "'+i18n.getCurrentLanguage()+'" ;'
		};
	elements.htmlEditor.setCustomConfiguration(js);
}

All of the editor buttons still show up such as Save, Document Properties, New Page, etc. even though in the above code they have been removed. Any idea what I may be doing wrong?

Thanks,

Keith

4

I should also mention that I’ve tried that same code using onShow instead of onLoad with the same results.

Keith

5

CFDaddy:

function onLoadHTMLEditor(event) {

var js = {
	config: 'FCKConfig.ToolbarSets["Default"] = [\
	["Source","Preview"],\
	["Cut","Copy","Paste","PasteText","PasteWord","-","Print","SpellCheck"],\
	["Undo","Redo","-","Find","Replace","-","SelectAll","RemoveFormat"],\
	["Form","Checkbox","Radio","TextField","Textarea","Select","Button"];\
	FCKConfig.AutoDetectPasteFromWord = true;\
	FCKConfig.AutoDetectLanguage = false;\
	FCKConfig.DefaultLanguage = "'+i18n.getCurrentLanguage()+'" ;'
	};
elements.htmlEditor.setCustomConfiguration(js);

}

Your config object is not properly build so it just ignores it (you’re missing one closing square bracket ‘]’ so your array is not closed). This works for me:

function onLoadHTMLEditor(event) {
	var js = {
		config: 'FCKConfig.ToolbarSets["Default"] = [\
		["Source","Preview"],\
		["Cut","Copy","Paste","PasteText","PasteWord","-","Print","SpellCheck"],\
		["Undo","Redo","-","Find","Replace","-","SelectAll","RemoveFormat"],\
		["Form","Checkbox","Radio","TextField","Textarea","Select","Button"]\
		];\
		FCKConfig.AutoDetectPasteFromWord = true;\
		FCKConfig.AutoDetectLanguage = false;\
		FCKConfig.DefaultLanguage = "'+i18n.getCurrentLanguage()+'" ;'
		};
	elements.htmlEditor.setCustomConfiguration(js);
}

As for styles in FCKEditor, have a look at: http://docs.cksource.com/FCKeditor_2.x/ … ion/Styles
For TinyMCE, look at http://www.tinymce.com/wiki.php/Configu … ontent_css and http://www.tinymce.com/wiki.php/Configu … editor_css

6

Doh!!! I should have seen that. Thank you Patrick for all your help. Your a life saver!

Keith

7

I’ve decided to go with the TinyMCE editor. everything is working great except that I cannot get the Styles drop down box to work. I found in the TinyMCE documentation the theme_advanced_styles and content_css properties, however no matter what I try they do not work. I think it is because I cannot figure out where to put the actual CSS file. Anyone know where the .css file should be in the servoy hierarchy OR a way to add styles inline via code. For reference here is the code I’m using:

	var js = {
	language: i18n.getCurrentLanguage(),
	theme: 'advanced',
	theme_advanced_styles: 'Foo=foo, Bar=bar',
	theme_advanced_buttons1: 'bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect',
	theme_advanced_buttons2: '""',
	theme_advanced_buttons3: '""',
	theme_advanced_buttons4: '""',
	theme_advanced_toolbar_location: 'top',
	theme_advanced_toolbar_align: 'left',
	execcommand_callback : "newCommandCallBack",
	plugins: 'safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager'
	};

With theme_advanced_styles, I can get Foo and Bar to show up in the Styles drop down, however because I cannot find where to actually define the classes in a .css file, they do nothing.

Thanks,

Keith

8

The best place to put your styles is in /application_server/server/webapps/ROOT/ (you can put them in a subfolder if you want).
Let say you put a style.css in /application_server/server/webapps/ROOT/css/

Then you can set:
content_css : application.getServerURL() + ‘/css/style.css’,

9

ptalbot:
The best place to put your styles is in /application_server/server/webapps/ROOT/ (you can put them in a subfolder if you want).
Let say you put a style.css in /application_server/server/webapps/ROOT/css/

Then you can set:
content_css : application.getServerURL() + ‘/css/style.css’,

Thank You Very Much. Worked Perfect!

Keith