Download
Click Here to download the zip file. You can also install Simditor by bower and npm :
$ npm install simditor
$ bower install simditor
Import files below into your web application
<link rel="stylesheet" type="text/css" href="[style path]/simditor.css" />
<script type="text/javascript" src="[script path]/jquery.min.js"></script>
<script type="text/javascript" src="[script path]/module.js"></script>
<script type="text/javascript" src="[script path]/hotkeys.js"></script>
<script type="text/javascript" src="[script path]/uploader.js"></script>
<script type="text/javascript" src="[script path]/simditor.js"></script>
Note that
- Simditor is based on jQuery and module.js.
- hotkeys.js is used to bind hotkeys.
- uploader.js is related to uploading files. You don't need to import this file if you don't want the uploading feature.
Using Simditor in your project
To use Simditor, first, you need a textarea
element like this:
<textarea id="editor" placeholder="Balabala" autofocus></textarea>
Initialize Simditor:
var editor = new Simditor({
textarea: $('#editor')
//optional options
});
textarea
is a required option. jQuery Object、HTML Element or Selector String can be passed to this option.
Some optional options:
placeholder
(default: '') Placeholder of simditor. Use the placeholder attribute value of the textarea by default.toolbar
(default: true) - Show the toolbar buttonstoolbarFloat
(default: true) - Fixed the toolbar on the top of the browser when scrolling.toolbarHidden
(default: false) - Hide the toolbar.defaultImage
(default: 'images/image.png') - Default image placeholder. Used when inserting pictures in Simditor.tabIndent
(default: true) - Use 'tab' key to make indent.params
(default: {}) - Insert a hidden input in textarea to store params (key-value pairs).upload
(default: false) - Accept false or key - value pairs. Extra options for uploading images. e.g. 'url', 'params'pasteImage
(default: false) - Support uploading by pasting images from clipboard. Only supported by Firefox and Chrome.
For more details please refer to Options Doc.
Customize Simditor
simditor.css
is compiled from '.scss' source file using Sass. If you want to change
the style of Simditor, you can simply change simditor.scss
and reproduce the CSS file.
.editor-style
is the layout style of the textarea. Customize this file if you want a different text format.
Want some special interactions and features? have a look at extension library. You can also create your own extensions for Simditor. Sample extensions:
- a feature extension: simditor-autosave
- a button extension: simditor-mark