Build a demo.html file , First, add the following code where you need to add an editor , Use style You can set the width and height of the editor .

<script type="text/plain" id="myEditor" style="width:98%;height:240px;"> 
    <p> Content area </p> 
</script> 

then , take UMeditor relevant js and css File loading . Related documents can be downloaded from this website or directly to UMeditor Download the latest version on the official website .

<script src="http://libs.useso.com/js/jquery/2.1.0/jquery.min.js"></script> 
<script type="text/javascript" charset="utf-8" src="umeditor.config.js"></script> 
<script type="text/javascript" charset="utf-8" src="umeditor.min.js"></script> 
<link href="themes/default/css/umeditor.min.css" type="text/css" rel="stylesheet"> 

Next , We start calling the editor :

<script type="text/javascript"> 
 var um = UM.getEditor('myEditor'); 
</script> 

Now we can open the browser to preview the editor effect .

Custom options

UMeditor Provides a wealth of options settings , Users can customize it according to their own project needs .

To get the content in the editor, you can use the following code , You can also get plain text content .

UM.getEditor('myEditor').getContent(); 

Determine if the editor has content , You can use the following code :

    var cont = UM.getEditor('myEditor').hasContents(); 
    if(cont==true){ 
        alert(' There are content .'); 
    }else{ 
        alert(' There is no content .'); 
    } 

If you put the editor in the form form in , Set it up action route , You can submit the content in the form delivery editor . Such as :

<form action="server.php" method="post"> 
    <script id="container" name="content" type="text/plain" style="width:98%;height:240px;"> Here is your initialization content </script> 
    <button type="submit" class="btn"> Submit </button> 
</form> 

We can set the tool icons allowed in the toolbar , For example, the following is a simple customization of several commonly used tool icons :

var editor = UM.getEditor('container',{ 
    toolbar:  
        ['bold italic underline fullscreen', 'link unlink','| justifyleft justifycenter justifyright justifyjustify |', 'emotion image video  | map'] 
     
}); 

UEditor More articles on the evolution of the mini editor

  1. The essence of live broadcasting ( Entrepreneurs should start thinking from the right side of the business model , What value do you create for users ? It's not hard to find customers , But we need to find a way to keep our customers going ;PC It's important to enrich the end functions , Because the mobile version is usually just a mini version )

    I want to pour some cold water on the live broadcast . You bet , Live broadcasting is getting more and more popular now ,YouTube With a good infrastructure platform, we also started live broadcasting some time ago ,Facebook Live Recently also joined the face change . The function of booking live time and double recording , Not to mention domestic ...

  2. ASP.NET Core Deep analysis of the pipeline (2): Create a &ldquo; mini &rdquo; To simulate the real pipeline request processing flow

    from <ASP.NET Core Deep analysis of the pipeline (1): Pipeline treatment HTTP request > We know ASP.NET Core The request processing pipeline consists of a server and a set of ordered middleware , So the overall design is very simple , but ...

  3. Self use mini version Deferred

    Don't say anything, post code , The project with /** * Mini version deferred */ function Deferred(func) { if (this instanceof Deferred === false) ...

  4. mini jQuery——zepto Core source analysis

    Preface zepto It's called mini version jQuery, And become a mobile terminal dom The preferred operating library in fact zepto Most of the time it's just borrowed jQuery The fame of , Basically consistent with API, Its internal implementation has long been beyond recognition ! Allen analyzed jQue ...

  5. mini Deferred

    Post code directly : /** * Mini version deferred */ function Deferred(func) { if (this instanceof Deferred === false) { ret ...

  6. Write a mini version Smarty template engine , It's very good to understand the principle of template engine ( The attached code )

    Some time ago, I was reading Han Shunping's blog Smarty Template engine tutorial , Combined with myself and Li Yanhui, the second season is under development CMS It's written by the system tpl template engine . Write a mini version today Smarty engine , Although I haven't made an in-depth analysis Smarty Source code , however ...

  7. mini smarty -- Template engine and parsing

    http://blog.ipodmp.com/archives/php-write-a-mini-smarty-template-engine/ mini Smarty The template engine directory structure is as follows : ① To develop a ...

  8. One use C A mini version of language 2048 game , Only 500 Characters

    Jay Chan  use C A mini version of language 2048 game , Only 487 Characters . Come and watch M[16],X=16,W,k;main(){T(system("stty cbreak&qu ...

  9. ( turn ) Kingdee KIS mini 、 The Standard Version prompts when querying the quantity and amount Sub Ledger “ An unknown error occurred , The current operation of the system has been cancelled , Please contact Kingdee ”

    Kingdee KIS mini . The Standard Version prompts when querying the quantity and amount Sub Ledger “ An unknown error occurred , The current operation of the system has been cancelled , Please contact Kingdee ” 2013-07-10 12:17:51|   classification :  Kingdee | report | Font size   subscribe       gold ...

Random recommendation

  1. NSPredicate Filter function

    NSPredicate *resultPredicate = [NSPredicate predicateWithFormat:@"self contains[cd] %@", i ...

  2. STM32 Graft on ds1307 note

    PS: About online ds1307 Most of the information is based on 51 And so on , and stm32 It's still a little different in the world , The code is a reference to http://www.openedv.com/posts/list/20167.htm  But his code ...

  3. MQTT—— install 、 test

    MQTT Learning notes ——MQTT Protocol experience Mosquitto Installation and use          http://blog.csdn.net/xukai871105/article/details/39252653 ...

  4. for-in Traverse json data

    1.for Traverse json data ','fun':' The front-end development '} for(var attr in json){ alert(json[attr]) // Traverse json Attribute data alert(json['nam ...

  5. SQLSERVER2012 Database restore

    (1) Restore the existing database Prompt failed on restore , Because the database is in use , Unable to obtain exclusive access . terms of settlement , First detach the existing database , Then perform the restore operation . It was a success , Because I use it first (2) After restoring the database, try (1) The method is not enough ...

  6. bestcoder.hdu.edu.cn

    http://bestcoder.hdu.edu.cn/ Problem A Topic link : http://bestcoder.hdu.edu.cn/contests/contest_showproble ...

  7. Use Delve Conduct Golang Debugging of code

    problem Install well vscode Editing project , The following error occurred : Failed to continue: "Cannot find Delve debugger. Ensure it is in your ...

  8. Use pymysql

    install pip3 install pymysql Connect . perform sql. close ( The cursor ) import pymysql mysql_connect_dict={ 'host':'127.0.0.1', 'por ...

  9. js Array push Method use note

    js Array of push Method , I think we all know that adding elements to the end of an array , But there is a key point to note : To quote MDN Return value When the method is called , new  length  Property values will be returned . var sports = [&qu ...

  10. Scan web servers for real IP Small script for

    #!/usr/bin/env python # -*- coding: gbk -*- # -*- coding: utf_8 -*- # Date: 2015 year 9 month 11 Japan # Author: Blue Travel ...