Simple and easy to use text editor "Simditor" Plugin Quick Start Instance _ text Edit

The project needs the text editor, I found simditor this plugin on the Internet, feel simple and easy to use, record here, also recommend to more people. What Simditor can do?

In simple terms, simditor can turn the textarea text field in a Web page into a simple rich-text editor. Be able to implement commonly used bold underline, title table font color and other functions, and output WYSIWYG HTML code. Simditor How to use

You can view demo, documentation and GitHub download addresses at Simditor's website.

Download the latest version of the Simditor file and unzip it, and introduce:

Introduce CSS
<link rel= "stylesheet" type= "Text/css" href= "js/simditor-2.3.6/styles/simditor.css"/> 
// The introduction of JS, if you do not need to upload the Uploader.js file can not be referenced
<script type= "Text/javascript src=" js/simditor-2.3.6/scripts/ Jquery.min.js "></script>
<script type=" Text/javascript "src=" js/simditor-2.3.6/scripts/ Module.min.js "></script>
<script type=" Text/javascript "src=" js/simditor-2.3.6/scripts/ Hotkeys.min.js "></script>
<script type=" Text/javascript "src=" js/simditor-2.3.6/scripts/ Uploader.min.js "></script>
<script type=" Text/javascript "src=" js/simditor-2.3.6/scripts/ Simditor.min.js "></script>

You can then initialize:

$ (document). Ready (function () {
    //Init text editor
    var editor = new Simditor ({
        //textarea ID
        textarea: $ (' # Remark '),
        //bar contains what content
        toolbar:[' title ', ' Bold ', ' italic ', ' underline ', ' table ', ' Color ', ' ol ', ' ul ', ' image ', ' HR '],
        //if required upload function, upload the parameter settings.
        upload: {
                url: ' imgupload.action ',//File Upload interface address
                params:null,//Key value pair, specify file upload interface for additional parameters, upload with file submitted
                Filekey: ' Filedatafilename ',//server-side get file data parameter name
                connectioncount:3,
                leaveconfirm: ' Uploading file '
         } 
    }
);

Places to look for:

When I use it directly after downloading, I find that the picture of the toolbar will be offset, as shown below:

See the next discovery is simditor with the CSS has problems. I have been feedback on the GitHub, initially thought that I downloaded the wrong version, and later downloaded the latest version, found that direct introduction still have this problem. Submitted to the author again but has not yet received a reply. If a small partner encounters this problem, as long as the following figure is processed:

This property can be displayed correctly in Simditor.css. Other settings

1.fileKey: ' Upload ' Set the button to insert the picture after clicking on the menu only picture upload

2.locale: ' en-US ', the default language for Simditor is Chinese. In fact, you can support English, the text in the sidebar will be changed to English.