Categories

.uiPrevieweditor()

Categories: UI

ep.uiPrevieweditor(options)

Subclass: ep

Inherit: (Subclass: ep) .widget()

Plugin: ep.ui.previeweditor

Description: Creates an inline editor for the preview view.

  • ep.uiPrevieweditor(options)

    version added: 6.15.0

    options   A map of additional options pass to the method.

The ep.uiPrevieweditor method creates an inline editor for the preview view. In addition it provides necessary methods to connect the external toolbar to the CKEditor plugins.

  • Create a preview editor.

    HTML:
    <div id="baseId">Some Content</div>
    <div id="holderId" style="clear:both; position:relative;display: none;">
      <textarea style="visiblity:hidden;" name="editorName" id="editorID">Some Content</textarea>
    </div>
    
    Code:
    ep('#editorID').uiPrevieweditor({
      'name' : 'editorName',
      'navbar' : 'Content',
      'pageBreak': false,
      'height': $('#baseId').height(),
      'width': $('#baseId').width(),
      'holder': $('#holderId'),
      'base': $('#baseId')
    });
    
    
  • name

    version added: 6.15.0

    Name of the editor (corresponds to the name attribute of the textarea).

    Default: undefined

  • pageBreak

    version added: 6.15.0

    Flag that indicates if the pagebreak icon is shown (e.g. for blog posts).

    Default: false

  • navbar

    version added: 6.15.0

    Add class to the html element inside the iframe to set special CSS for preview inline mode.

    Default: undefined

  • width

    version added: 6.15.0

    Width for the editor.

    Default: 400

  • height

    version added: 6.15.0

    Height for the editor.

    Default: 300

  • holder

    version added: 6.15.0

    jQuery object of the DOM element which holds the textarea/editor.

    Default: undefined

  • base

    version added: 6.15.0

    jQuery object of the DOM element which contents the source html.

    Default: undefined

  • toggleToolbar

    • .uiPrevieweditor('toggleToolbar', blnShow)

      version added: 6.15.0

      blnShow   Specifies path and name of the file containing the new preview image.

    Handles settings for the current editor if the external toolbar is toggled.