WYMeditor forum

by **matthoughton** on Thu Feb 12, 2009 10:34 pm

Hi everyone,
Firstly, great editor I'm currently building it into my CMS.

The issue I have is that I'm not that great at js and am having trouble skinning the editor. I'd like to be able to restrict the "containers" to ones I've allowed the mods to use. It's a strict W3C Compliant CMS so I don't want them re-using the H1 tag for instance.
I love the fact that they have no options to modify the fonts but I'd like to also restrict the containers they can use. Is there an easy way to do this? I removed the relevant lines from the jquery.wymeditor.js

Code: Select all: AT LINE 140: containersItems: [ {'name': 'P', 'title': 'Paragraph', 'css': 'wym_containers_p'}, {'name': 'H3', 'title': 'Heading_3', 'css': 'wym_containers_h3'},...

but this hasn't made a slight difference!!

I'd also like to style the HTML Text Area and change the font in there from Times New Roman. I've sorted this using the skin css file but can't change the size without it overwriting the container styles. Any clues?

Thanks for your help!

by **mr_lundis** on Fri Feb 20, 2009 4:31 pm

Hi Mat and welcome to the WYMeditor forum!

If you just want to hide some of the available containers, the easiest way to do so is by css. Each container in the list has a class name in the form of wym_containers_<container_name>, making them easy to hide if needed. If you want to disable the use of a default container altogether you'll need to modify the XhtmlValidator to exclude it, and that's a whole other story.

To change the appearance of the editor area, take a look at the wymiframe.css-file inside /wymeditor/default/iframe.

Cheers

by **matthoughton** on Mon Feb 23, 2009 6:20 pm

Thanks very much. The css system works perfectly with a {display: none} element.

Which is the css file which needs to be modified to accurately represent the Preview? I just need to drag the existing front-end css into play but can't work out how.

Thanks again

by **mr_lundis** on Mon Feb 23, 2009 7:04 pm

You're welcome! :wink:

At the moment only the skin styles are included (see skins/default/skin.css), and there's no easy way to add your own style sheets.

What you could do is to add all your css rules to the skin.css file and prepend .wym_dialog_preview to all the rules. This isn't ideal, but it will work.

Cheers!

by **der-meister** on Sat Apr 03, 2010 12:30 pm

You can overwrite the whole preview functionality:

Code: Select all: jQuery(function() { jQuery('.wymeditor').wymeditor({ postInit: function(wym) { // change name of preview button to suppress standard preview and assign a new preview function: jQuery(wym._box).find('li.wym_tools_preview a').attr('name','Preview2').click(function(e) { // adjust html to include your document type and style sheets var html = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n' + '<html xmlns="http://www.w3.org/1999/xhtml">\n' + '<head>\n' + ' <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>\n' + ' <title>vlcek.at: Preview</title>\n' + ' <link rel="stylesheet" href="/css/master.css" type="text/css" media="all" charset="utf-8" />\n' + '</head>\n' + '<' + 'body>\n' + wym.html() + '</' + 'body>\n' + '</html>\n'; // don't know how to get the dialogFeaturesPreview from WYM, so define it here: var features = "menubar=no,titlebar=no,toolbar=no,resizable=no,scrollbars=yes,width=560,height=300,top=0,left=0"; var wDialog = window.open('', 'dialog', features); var doc = wDialog.document; doc.write(html); doc.close(); }); } }); });

WYMeditor forum

A couple of probably simple issues

A couple of probably simple issues

Re: A couple of probably simple issues

Re: A couple of probably simple issues

Re: A couple of probably simple issues

Re: A couple of probably simple issues

Who is online