Bootstrap-based rich text box -- wangEditor [Welcome to development], bootstrap text box

Bootstrap-based rich text box -- wangEditor [Welcome to development], bootstrap text box

Supplement: QQ Group 164999061. Welcome to join the discussion! 

First:

01. Introduction

I have been studying rich text boxes for a long time. After writing "Understanding javascript prototype and closure", I want to create an example of a rich text box plug-in.

Currently, there are a lot of open-source Rich Text Box plug-ins on the Internet. There are a lot of plug-ins to search for, but there are not many based on bootstrap. Now there is only one "bootstrap-wysiwyg", written by foreigners, and there is no Chinese character, you can take a look at the fork Source Code. The Code is very concise, and the compression is less than 10 KB, which is very powerful! I haven't had time to study it yet. Check it out.

02. wangEditor

A foreigner's things are full of English and can be used by programmers, but it is so miserable to allow netizens and users to use them on the page. So I made a bootstrap-based Rich Text Editor myself --WangEditor. Now open-source, you can go to [https://github.com/wangfupeng1988/wangeditor/javasfork source code.

Now it's just a simple test version. If you have any questions, you can leave a message or send me an email (wangfupeng1988 # (#-> @) 163.com). Thank you!

03. Easy to use, two steps

WangEditor's application is very simple. You can do it in two steps! See the following code:

<Div id = "divEditor"> </div> <textarea id = "txtCode" rows = "5" cols = "50" style = "width: 100% "> </textarea> <script src =" javascript/wangEditor-1.0.0.js "type =" text/javascript "> </script> <script type =" text/javascript "> $ (function () {$ ('# divEditor '). wangEditor ({codeTargetId: 'txtcode', // store the source code to txtCode frameHeight: '300px '. // The default value is "300px" initWords: 'Welcome! Enter text... ', // The default value is "enter... "showInfo: true // whether to display the" about "menu. displayed by default}) ;}</script>

Define a div and a textarea, and then execute $ ('# diveditor'). wangEditor.

Since wangEditor is based on bootstrap and jquery, You need to reference the corresponding file. (Among them, font-awesome.min.css is the bootstrap icon library, which contains a wide range of icons. It is very easy to search)

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" /><link href="Font-Awesome-3.2.1/css/font-awesome.min.css" rel="stylesheet" /><script src="javascript/jquery-1.10.2.min.js" type="text/javascript"></script><script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

In these two steps, the wangEditor editing page is displayed. The source code of the edited content is in textarea and can be obtained through js.

04. How to Deal with low-version browsers?

As we all know, bootstrap does not support low-version IE browsers, But what should we do if we encounter low-version browsers? My principle is to use four words-at least!

So I got along with a clever solution: for IE 8 and earlier browsers, the Department provides rich text editing function, only displays one input box, and gives a prompt.

Although bootstrap does not support browsers earlier than IE8, I cannot let users see garbled characters and cannot perform operations. The user can operate what I present to the user.

05. continue upgrading

I will continue to upgrade wangEditor. First, I will refer to bootstrap-wysiwyg to optimize and streamline code. Second, I want to add a code editor function.

In fact, I have already done some work-code formatting, code highlighting, and not yet have time to integrate it into wangEditor.

Although there are many rich JavaScript text boxes, but there are not many with code editing and display functions, I did not find them anyway. Therefore, after this function is added, it can also be regarded as a feature.

06. Welcome to join!

If you are also interested in working with me to develop, upgrade, and maintain this wangEditor, contact me (send a message in the station) for development. you can work with me through github.

In fact, there are still a lot of work to be done next, such as troubleshooting bugs, adding more features, and supporting more browsers. There may also be customized development work for commercial use. At that time, you can earn a little extra money! Haha, but that's the end.

Finally, we recommend that you use Github for windows to manage your source code. The easiest way to use git is to avoid tedious command operations!

Bytes -------------------------------------------------------------------------------------------------------------

Welcome to my Weibo.

You are also welcome to follow my tutorial:

From design to Model《Deep understanding of javascript prototype and closure SeriesMicrosoft petshop4.0 source code explanation video json2.js source code interpretation video

Bytes -------------------------------------------------------------------------------------------------------------