The textarea element has been widely used in the Web-page IDE. Usually the site's own textarea editor does not meet our needs, as a developer we often need to do code online editing, highlighting code, etc., so, through other open source projects, we can add some useful features, in this article, I'll use the JavaScript library ACE to create an input box effect. This is a completely open source script. This script allows developers to create input boxes that support syntax highlighting. Then you can embed the code anywhere in the site.
Download Library First we need to github up and down the ace code. After the download is complete, unzip and introduce JS files in your header section.
Copy Code code as follows:
<script src= "Src-min/ace.js" type= "Text/javascript" charset= "Utf-8" ></script>
Add code to Editor
First set up a div with ID editor and then call the Ace.edit () method in the script, the following code
Copy Code code as follows:
var editor = Ace.edit ("editor");
Editor.getsession (). SetMode ("Ace/mode/javascript"); You can rename variables, and for convenience, I define VAR editor as a variable, and you can also define VAR demoeditor as a variable. The second line declares which type of language is highlighted. You can select a different language collection from the SRC directory. Here are some support-supported language collections:
Sql
Ruby
SASS
Php
Objectivec
Csharp
Java
Json
Use additional parameters
Copy Code code as follows:
Editor.settheme ("Ace/theme/dawn");
Editor.getsession (). Settabsize (2);
Editor.getsession (). Setusewrapmode (True);
This 3 lines of code is about the text input effect, the first line changes the code default syntax color and theme, in the SRC directory there are dozens of new topics, you can choose from any
The other two options are about the user experience. In general, pressing the TAB key on one keyboard will enter 4 spaces, which I set to 2 spaces, in addition, the text will not automatically wrap by default, and will append a horizontal scroll bar outward extension. But using this method Setusewrapmode (true), we can fix the problem of automatic wrapping.
There are other commands you can refer to the Ace Wizard. This includes changing the position of the cursor, dynamically adding new content, or copying the entire contents of the text.
CSS Code
Copy Code code as follows:
#editor {
margin-left:15px;
margin-top:15px;
width:1000px;
height:400px;
}
