tw2.wysihtml5

TextArea
  • rows
    • Number of rows
  • cols
    • Number of columns
  • placeholder
    • Placeholder text (HTML5 Only)
class TextArea(BootstrapMixin, twf.TextArea):
    css_class = 'input-xlarge'
<%namespace name="tw" module="tw2.core.mako_util"/>\
<textarea ${tw.attrs(attrs=w.attrs)}>${w.value or ''}</textarea>

wysihtml5_js
  • location
    • Location on the page where the resource should be placed.This can be one of: head, headbottom, bodytop or bodybottom. None means the resource will not be injected, which is still useful, e.g. static images.
  • modname
    • Name of Python module that contains the file.
  • filename
    • Path to file, relative to module base.
  • no_inject
    • Don't inject this link. (Default: False)
  • whole_dir
    • Make the whole directory available. (Default: False)

wysihtml5_editor_css
  • location
    • Location on the page where the resource should be placed.This can be one of: head, headbottom, bodytop or bodybottom. None means the resource will not be injected, which is still useful, e.g. static images.
  • modname
    • Name of Python module that contains the file.
  • filename
    • Path to file, relative to module base.
  • no_inject
    • Don't inject this link. (Default: False)
  • whole_dir
    • Make the whole directory available. (Default: False)
  • media
    • Media tag

wysihtml5_parser_simple
  • location
    • Location on the page where the resource should be placed.This can be one of: head, headbottom, bodytop or bodybottom. None means the resource will not be injected, which is still useful, e.g. static images.
  • modname
    • Name of Python module that contains the file.
  • filename
    • Path to file, relative to module base.
  • no_inject
    • Don't inject this link. (Default: False)
  • whole_dir
    • Make the whole directory available. (Default: False)

wysihtml5_parser_advanced
  • location
    • Location on the page where the resource should be placed.This can be one of: head, headbottom, bodytop or bodybottom. None means the resource will not be injected, which is still useful, e.g. static images.
  • modname
    • Name of Python module that contains the file.
  • filename
    • Path to file, relative to module base.
  • no_inject
    • Don't inject this link. (Default: False)
  • whole_dir
    • Make the whole directory available. (Default: False)

Wysihtml5
  • rows
    • Number of rows
  • cols
    • Number of columns
  • placeholder
    • Placeholder text (HTML5 Only)
  • parser
    • The set of parser rules to use. The simple parser contains only basic html5 tags, while the advanced parser contains more html5 tags and preserves some css classes. If you use the simple parser, the editor css is not strictly needed.
class DemoWysihtml5(widgets.Wysihtml5):
    # Provide default parameters, value, etc... here
    # default = <some-default-value>
    parser = 'advanced'
<%namespace name="tw" module="tw2.core.mako_util"/>
  <div id="${w.toolbar_id}" style="display: none;">
    <div class="btn-group">
      <a class="btn btn-small" data-wysihtml5-command="bold" title="bold [CTRL+B]"><i class="icon-bold"></i>&nbsp;</a>
      <a class="btn btn-small" data-wysihtml5-command="italic" title="italic [CTRL+I]"><i class="icon-italic"></i>&nbsp;</a>
      <a class="btn btn-small" data-wysihtml5-command="createLink" title="Insert link"><i class="icon-share-alt"></i>&nbsp;</a>
      <a class="btn btn-small" data-wysihtml5-command="insertImage" title="Insert picture"><i class="icon-picture"></i>&nbsp;</a>
      <a class="btn btn-small" data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1">h1</a>
      <a class="btn btn-small" data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h2">h2</a>
      <a class="btn btn-small" data-wysihtml5-command="insertUnorderedList" title="Unordered list"><i class="icon-list"></i>&nbsp;ul</a>
      <a class="btn btn-small" data-wysihtml5-command="insertOrderedList" title="Ordered list"><i class="icon-list"></i>&nbsp;ol</a>
      <a class="btn btn-small" data-wysihtml5-command="foreColor" data-wysihtml5-command-value="red" style="color: red;">red</a>
      <a class="btn btn-small" data-wysihtml5-command="foreColor" data-wysihtml5-command-value="green" style="color: green;">green</a>
      <a class="btn btn-small" data-wysihtml5-command="foreColor" data-wysihtml5-command-value="blue" style="color: blue;">blue</a>
      <a class="btn btn-small" data-wysihtml5-action="change_view" title="switch to html view"><i class="icon-chevron-left"></i>&nbsp;<i class="icon-chevron-right"></i></a>
    </div>
    
    <div data-wysihtml5-dialog="createLink" style="display: none;" class="form-inline">
      <label>
        Link:
        <input data-wysihtml5-dialog-field="href" value="http://" class="input-medium">
      </label>
      <a data-wysihtml5-dialog-action="save" class="btn btn-mini btn-primary">OK</a>
      <a data-wysihtml5-dialog-action="cancel" class="btn btn-mini">Cancel</a>
    </div>
    
    <div data-wysihtml5-dialog="insertImage" style="display: none;" class="form-inline">
      <label>
        Image:
        <input data-wysihtml5-dialog-field="src" value="http://" class="input-medium">
      </label>
      <label>
        Align:
        <select data-wysihtml5-dialog-field="className" class="input-small">
          <option value="">default</option>
          <option value="wysiwyg-float-left">left</option>
          <option value="wysiwyg-float-right">right</option>
        </select>
      </label>
      <a data-wysihtml5-dialog-action="save" class="btn btn-mini btn-primary">OK</a>
      <a data-wysihtml5-dialog-action="cancel" class="btn btn-mini">Cancel</a>
    </div>
    
  </div>
<textarea ${tw.attrs(attrs=w.attrs)}>${w.value or ''}</textarea>