Home

General settings

This is all the general settings that PunyMCE currently provides.

Option: id

This option enables you to specify the id of the textarea or div element to replace with an editor instance.

Example:

<textarea id="content1" name="content1"></textarea>
<script type="text/javascript" src="punymce/puny_mce.js"></script>
<script type="text/javascript">
var editor1 = new punymce.Editor({
        id : 'content1'
});
</script>

Option: toolbar

This option is a comma separated list button/control names to display in the toolbar of the editor. For example bold,italic.

Example:

<textarea id="content1" name="content1"></textarea>
<script type="text/javascript" src="punymce/puny_mce.js"></script>
<script type="text/javascript">
var editor1 = new punymce.Editor({
        id : 'content1',
        toolbar : 'bold,italic'
});
</script>

Option: plugins

This option is a comma separated list of plugins to add to the editor.

Example:

<textarea id="content1" name="content1"></textarea>
<script type="text/javascript" src="punymce/puny_mce.js"></script>
<script type="text/javascript" src="punymce/plugins/image/image.js"></script>
<script type="text/javascript" src="punymce/plugins/link/link.js"></script>
<script type="text/javascript">
var editor1 = new punymce.Editor({
        id : 'content1',
        plugins : 'Image,Link',
        toolbar : 'bold,italic,image,link'
});
</script>

Option: min_width

This option enables you to specify the minimum resize width of the editor in pixels.

Example:

<textarea id="content1" name="content1"></textarea>
<script type="text/javascript" src="punymce/puny_mce.js"></script>
<script type="text/javascript">
var editor1 = new punymce.Editor({
        id : 'content1',
        min_width : 300
});
</script>

Option: min_height

This option enables you to specify the minimum resize height of the editor in pixels.

Example:

<textarea id="content1" name="content1"></textarea>
<script type="text/javascript" src="punymce/puny_mce.js"></script>
<script type="text/javascript">
var editor1 = new punymce.Editor({
        id : 'content1',
        min_height : 300
});
</script>

Option: max_width

This option enables you to specify the maximum resize width of the editor in pixels.

Example:

<textarea id="content1" name="content1"></textarea>
<script type="text/javascript" src="punymce/puny_mce.js"></script>
<script type="text/javascript">
var editor1 = new punymce.Editor({
        id : 'content1',
        max_width : 300
});
</script>

Option: max_height

This option enables you to specify the maximum resize width of the editor in pixels.

Example:

<textarea id="content1" name="content1"></textarea>
<script type="text/javascript" src="punymce/puny_mce.js"></script>
<script type="text/javascript">
var editor1 = new punymce.Editor({
        id : 'content1',
        max_height : 300
});
</script>

Option: entities

This option enables you to change how the entities should be encoded. There are two possible values for this option one is numeric and one is raw. Numeric will convert characters above the char code 127 to &#

;. Raw will not encode them at all, this is the default.

Example:

<textarea id="content1" name="content1"></textarea>
<script type="text/javascript" src="punymce/puny_mce.js"></script>
<script type="text/javascript">
var editor1 = new punymce.Editor({
        id : 'content1',
        entities : 'numeric'
});
</script>

Option: spellcheck

This option can be used to disable the build in spellchecked in Firefox.

Example:

<textarea id="content1" name="content1"></textarea>
<script type="text/javascript" src="punymce/puny_mce.js"></script>
<script type="text/javascript">
var editor1 = new punymce.Editor({
        id : 'content1',
        spellcheck : false
});
</script>

Option: content_css

This option enabled you to specify a CSS file to be used inside the editor. It will load the css file “punymce/css/content.css” by default. This is normally the same CSS you use for your site.

Example:

<textarea id="content1" name="content1"></textarea>
<script type="text/javascript" src="punymce/puny_mce.js"></script>
<script type="text/javascript">
var editor1 = new punymce.Editor({
        id : 'content1',
        content_css : 'my.css'
});
</script>

Option: editor_css

This option enabled you to specify a CSS file to be used for rendering the user interface. It will load the css file “punymce/css/editor.css” by default. You can also use the site CSS and simply set this option to an empty string or 0 if you want to skip the loading.

Example:

<textarea id="content1" name="content1"></textarea>
<script type="text/javascript" src="punymce/puny_mce.js"></script>
<script type="text/javascript">
var editor1 = new punymce.Editor({
        id : 'content1',
        editor_css : 'my.css'
});
</script>

Option: styles

This option gives you the possibility to change the styles drop down menu.

Example:

<textarea id="content1" name="content1"></textarea>
<script type="text/javascript" src="punymce/puny_mce.js"></script>
<script type="text/javascript">
var editor1 = new punymce.Editor({
        id : 'content1',
        styles : [
                { title : 'H1', cls : 'h1', cmd : 'FormatBlock', val : '<h1>' },
                { title : 'H2', cls : 'h2', cmd : 'FormatBlock', val : '<h2>' },
                { title : 'H3', cls : 'h3', cmd : 'FormatBlock', val : '<h3>' },
                { title : 'Pre', cls : 'pre', cmd : 'FormatBlock', val : '<pre>' },
                { title : 'Times', cls : 'times', cmd : 'FontName', val : 'Times'},
                { title : 'Arial', cls : 'arial', cmd : 'FontName', val : 'Arial'},
                { title : 'Courier', cls : 'courier', cmd : 'FontName', val : 'Courier'},
                { title : 'Quote', cls : 'quote', cmd : 'mceSetClass', val : 'quote'}
        ],
});
</script>