Simditor

An Easy and Fast WYSIWYG Editor

Options

You can customize Simditor by passing optional options when initializing Simditor. Here are some optional options and their default values:

editor = new Simditor
  textarea: null
  placeholder: ''
  defaultImage: 'images/image.png'
  params: {}
  upload: false
  tabIndent: true
  toolbar: true
  toolbarFloat: true
  toolbarFloatOffset: 0
  toolbarHidden: false
  pasteImage: false
  cleanPaste: false
textarea jQuery Object / HTML Element / Selector String default: null

The textarea element which Simditor will be created on.

placeholder String default: ''

Placeholder of Simditor. Use the placeholder attribute value of the textarea by default.

toolbar Boolean / Array default: true

Show toolbar buttons. Accpect an array of buttons that includes:

[
  'title'
  'bold'
  'italic'
  'underline'
  'strikethrough'
  'fontScale'
  'color'
  'ol'             # ordered list
  'ul'             # unordered list
  'blockquote'
  'code'           # code block
  'table'
  'link'
  'image'
  'hr'             # horizontal ruler
  'indent'
  'outdent'
  'alignment'
]
toolbarFloat Boolean default: true

Fixed the toolbar on the top of the browser when scrolling.

toolbarFloatOffset Number default: 0

Top offset of the toolbar when fixed

toolbarHidden Boolean default: false

Hide the toolbar. Can not work together with toolbarFloat.

defaultImage String default: images/image.png

Default image placeholder. Used when inserting pictures in Simditor.

tabIndent Boolean default: true

Use 'tab' key to make an indent.

params Object default: { }

Insert a hidden input in textarea to store params (key-value pairs). Usually used as the default params of the form. It will generate:

<input type="hidden" name="key" value="val" />
upload Boolean / Object default: false

Accept false or key/value pairs. Extra options for uploading images:

  • url upload api url;
  • params extra params sent to the server;
  • fileKey key of the file param;
  • connectionCount how many images can be uploaded simultaneously;
  • leaveConfirm messages will be shown if one leave the page while file is being uploaded;

Default values of these options

editor = new Simditor
  textarea: $('#editor')
  upload:
    url: ''
    params: null
    fileKey: 'upload_file'
    connectionCount: 3
    leaveConfirm: 'Uploading is in progress, are you sure to leave this page?'

JSON response after uploading complete:

{
  "success": true/false,
  "msg": "error message", # optional
  "file_path": "[real file path]"
}
pasteImage Boolean default: false

Support uploading by pasting images from the clipboard. Work together with upload and only supported by Firefox and Chrome.

cleanPaste Boolean default: false

Remove all styles in paste content automatically.

imageButton Array/String default: ['upload', 'external']

Insert images by uploading from the local computer or external links. If both are enabled, Simditor will show a drop-down menu when click the image button.

allowedTags Array default: null

Tags that are allowed in Simditor. Default whitelist:

['br', 'span', 'a', 'img', 'b', 'strong', 'i', 'strike', 'u', 'font', 'p', 'ul', 'ol', 'li', 'blockquote', 'pre', 'code', 'h1', 'h2', 'h3', 'h4', 'hr']

Note that custom whitelist will be merged into the default one.

allowedAttributes Array default: null

Whitelist of tag attributes. style attribute whitelist is defined in allowedStyles. Default whitelist:

img: ['src', 'alt', 'width', 'height', 'data-non-image']
a: ['href', 'target']
font: ['color']
code: ['class']

Note that custom whitelist will be merged into the default one.

allowedStyles Array default: null

Inline style whitelist. Default whitelist:

span: ['color', 'font-size']
b: ['color']
i: ['color']
strong: ['color']
strike: ['color']
u: ['color']
p: ['margin-left', 'text-align']
h1: ['margin-left', 'text-align']
h2: ['margin-left', 'text-align']
h3: ['margin-left', 'text-align']
h4: ['margin-left', 'text-align']

Note that custom whitelist will be merged into the default one.

codeLanguages Array default: null

A list of programming languages supported by code block. Default list:

[
  { name: 'Bash', value: 'bash' }
  { name: 'C++', value: 'c++' }
  { name: 'C#', value: 'cs' }
  { name: 'CSS', value: 'css' }
  { name: 'Erlang', value: 'erlang' }
  { name: 'Less', value: 'less' }
  { name: 'Sass', value: 'sass' }
  { name: 'Diff', value: 'diff' }
  { name: 'CoffeeScript', value: 'coffeescript' }
  { name: 'HTML,XML', value: 'html' }
  { name: 'JSON', value: 'json' }
  { name: 'Java', value: 'java' }
  { name: 'JavaScript', value: 'js' }
  { name: 'Markdown', value: 'markdown' }
  { name: 'Objective C', value: 'oc' }
  { name: 'PHP', value: 'php' }
  { name: 'Perl', value: 'parl' }
  { name: 'Python', value: 'python' }
  { name: 'Ruby', value: 'ruby' }
  { name: 'SQL', value: 'sql'}
]
Fork me on GitHub