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

Source: Internet
Author: User

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.


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.