WYSIWYG

Skip to end of metadata
Go to start of metadata

Configuration

Name Type
Description
width
integer
Width of the field in pixel
height
integer
Height of the field in pixel
toolbar
string
Available options: Full,Basic
resize_disabled
boolean
Set true to disable resizing
sharedtoolbar
boolean
Set to false to disable the "sticky" toolbar, and display it directly at the editor.
enterMode integer
Set it to 2 if you don't want to add the P-tag
contentsCss string
Path to stylesheet with text styles

Accessable Properties

Name
Type
Description
text
string
Value of the WYSIWYG, this is useful to get the value even in editmode

See the 2nd example of the following code block.

Basic Example

// Basic usage
<?php echo $this->wysiwyg("myWysiwyg") ?>

// Advanced useage
<?php echo $this->wysiwyg("content", array(
    "width" => 700,
    "height" => 500,
    "toolbar" => "Basic"));
?>


Custom Configuration of CKeditor

// It's possible to full customize the whole editor. All arguments which are defined in the configuration are passed to the CKeditor config. For example:
<?php echo $this->wysiwyg("content", array(
    "width" => 700,
    "height" => 500,
    "customConfig" => "/custom/ckeditor_config.js"));
?>

// with the follwing code you can get the text even in editmode
<?php echo $this->wysiwyg("content", array(
    "width" => 700,
    "height" => 500,
    "customConfig" => "/custom/ckeditor_config.js"));
?>

// output the text also in editmode
<?php if ($this->editmode) { ?>
    <?php echo $this->wysiwyg("content")->text ?>
<?php } ?>

How to define a custom Toolbar for the Editor

<script type="text/javascript">

    var MyCustomToolbar = [
        ['Cut','Copy','Paste','PasteText','PasteFromWord','-', 'SpellChecker', 'Scayt'],
        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
        '/',
        ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
        ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
        ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
        ['Link','Unlink','Anchor'],
        ['Image','Flash','Table','HorizontalRule','SpecialChar','PageBreak'],
        '/',
        ['Styles','Format','Font','FontSize'],
        ['TextColor','BGColor'],
        ['Maximize', 'ShowBlocks','Source']
    ];

</script>

<?php echo $this->wysiwyg("content",array(
    "width" => 700,
    "height" => 500,
    "toolbar" => "MyCustomToolbar"));
?>

/*
Please read the docs of CKeditor for more information:

http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Setting_Configurations
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar

*/
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

Comments (5)

 

  1. Jan 18, 2011

    Tim Glabisch says:

    you can use a custom css file for the wysiwyg: "contentsCss" => "/website/st...

    you can use a custom css file for the wysiwyg:

    "contentsCss" => "/website/static/css/wysiwyg.css"

  2. Jan 20, 2011

    Tim Glabisch says:

    i use this config: CKEDITOR.on( 'instanceReady', function( ev ) .* ev.edi...

    i use this config:

    CKEDITOR.on( 'instanceReady', function( ev )

    .*

    ev.editor.dataProcessor.writer.selfClosingEnd = '>';

    ev.editor.dataProcessor.writer.indentationChars = '';

    ev.editor.dataProcessor.writer.selfClosingEnd = ' />';

    ev.editor.dataProcessor.writer.lineBreakChars = '\n';

    ev.editor.dataProcessor.writer.setRules.* 'p',

            .*

               indent : false,

               breakBeforeOpen : false,

               breakAfterOpen : false,

               breakBeforeClose : false,

               breakAfterClose : false

            ..);

    ..;

  3. May 06, 2011

    Florian H. says:

    1. Cannot add a 'close' button to my custom toolbar... 2. If you don't want CKE...

    1. Cannot add a 'close' button to my custom toolbar...

    2. If you don't want CKEditor to create <p> elements, use 'enterMode' => 2 option!

    3. Would be a good idea to integrate pimcore assets like images into ckeditor...

    1. Jul 20, 2011

      Brecht Cloetens says:

      Thanks Florian H. 'enterMode' => 2 was very useful Wondering why it's not in ...

      Thanks Florian H.
      'enterMode' => 2 was very useful
      Wondering why it's not in the configuration of this page.

      In IE9 I wasn't able to post this reply.
      Got the message 'Comment text is empty. Cannot create empty comments.'.

  4. Jan 24

    Andreas says:

    Why isn't it possible to drag 'n' drop assets in the Wysiwyg window on regular t...

    Why isn't it possible to drag 'n' drop assets in the Wysiwyg window on regular templates? It works in my custom objects.