Rich Text Editor UEditor

First to introduce relevant js libraries: jquery.min.js ueditor.config.js ueditor.all.js

Common operations:

     // Get the contents of the editor 
      .. $ ( '. Action') Find ( '. GetInfo') the Click (function () { 
        var = Pcontent UE.getEditor ( "Pcontent") getContent ();. 
        Alert (Pcontent); 
      }); 

      // Clear the contents editor 
      $ ( 'Action.') Find ( 'CLEARINFO.') the Click (function (..) { 
        var editorBox = UE.getEditor ( 'Pcontent'); 
        editorBox.setContent ( '' ); 
      }); 

      // editor to assign 
      $ ( 'Action.') Find ( 'setValueInfo.') the Click (function () {.. 
        var STR = 'Hello, ha'; 
        var = UE.getEditor editorBox ( 'Pcontent'); 
        editorBox.ready (function () {// initialization completion by assignment editor 
          editorBox.setContent (str);// assigned to UEditor 
        }); 
      });

HTML Source:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>富文本编辑器UEditor</title>
  <style>
    .pContent {
      width: 1000px;
      height: 100px;
      display: block;
      margin: 30px auto;
    }

    .action {
      display: block;
      overflow: hidden;
      width: 630px;
      margin: 30px auto;
    }

    .action .item {
      float: left;
      margin-right: 20px;
      cursor: pointer;
      border: 1px rgb(212, 212, 212) solid;
      padding: 4px 15px;
      box-sizing: border-box;
      border-radius: 4px;
    }
  </style>
</head>

<body>
  <div class="action"> 
    <Div class = " Item getInfo " > get the contents of the editor </ div> 
    <div class = " Item CLEARINFO " > empty the contents of the editor </ div> 
    <div class = " Item setValueInfo " > to the editor assignments </ div> 
  </ div> 
  <div style = " Clear: both; " > </ div>
   <div ID = Pcontent class = "Pcontent"> </ div> 

  <Script type = "text / JavaScript" the src = " ./js/jquery.min.js "> </ Script> 
  <Script type =" text / JavaScript "src="./js/ueditor/ueditor.config.js"></script> 
  <Script type =" text / JavaScript "src="./js/ueditor/ueditor.all.js"></script>
  <script type="text/javascript" src="./js/index.js"></script>
  <script type="text/javascript">
    $(function () {
      $.index.init();
    });
  </script>
</body>

</html>

JQuery Source:

(function ($) { 
  $ .index = { 
    the init: function () { 
      // Initialization editor 
      $ .index.initEditor ( ' Pcontent ' ); 

      // get content editor 
      $ ( ' .action ' ) .find ( ' .getInfo ' ) .click (function () {
         var Pcontent = UE.getEditor ( " Pcontent " ) .getContent (); 
        Alert (Pcontent); 
      }); 

      // empty the contents editor 
      $ ( ' .action ' ) .find ( ' .clearInfo ') .click (function () {
         var editorBox = UE.getEditor ( ' Pcontent ' ); 
        editorBox.setContent ( '' ); 
      }); 

      // to assignment editor 
      $ ( ' .action ' ) .find ( ' .setValueInfo ' ) .click (function () {
         var STR = ' Hello, ha ' ;
         var editorBox = UE.getEditor ( ' Pcontent ' ); 
        editorBox.ready (function () { // editor initialization completion by assignment 
          editorBox. setContent (str);   //赋值给UEditor
        });
      });

    },

    //编辑器开始
    initEditor: function (ObjectName) {
      var opts = {
        enableAutoSave: true,
        saveInterval: 60000,
        initialFrameHeight: 520,
        autoHeightEnabled: false,
        elementPathEnabled: false,
        retainOnlyLabelPasted: true,
        maximumWords: 20000,
        retainOnlyLabelPasted: true,
        toolbars: [['fullscreen', 'source', 'undo', 'redo', 'bold', 'italic',
          'underline', 'fontborder', 'backcolor', 'fontsize', 'fontfamily', 'paragraph',
          'justifyleft', 'justifyright', 'justifycenter', 'justifyjustify',
          'strikethrough', 'superscript', 'subscript', 'removeformat',
          'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|',
          'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist',
          'selectall', 'link', 'unlink', 'emotion', 'help', 'preview',
          'horizontal', 'removeformat', 'mergeright', 'mergedown', 'deleterow', 'deletecol', 'insertparagraphbeforetable', 'inserttitle',
          'insertcode', 'simpleupload', 'insertimage', 'spechars', 'searchreplace'
        ]]
      };
      UE.getEditor(ObjectName, opts);
    },

    validateEditor: {
      Editor: function (the ObjectName) { 
        var Content; 
      },= n- ' # ' + the ObjectName;
         var $ IPT = $ (n-);
         var Editor = UE.getEditor (the ObjectName);
         var Content = editor.getContent ();
         IF (content.length> 20000 ) { 
          $ .clwenkueditCont.validateEditor .msg ($ ipt, ' content length can not be more than 20,000 characters in multiple recommend that you publish!! ' );
           return  false ; 
        } 
        $ .clwenkueditCont.validateEditor.msg ($ ipt); 
        return 
      bLength: function (str) { 
        IF (! str) {
          return 0;
        }
        var aMatch = str.match(/[^\x00-\xff]/g);
        return (str.length + (!aMatch ? 0 : aMatch.length));
      },
      msg: function ($el, msg) {
        if (msg) {
          $el['addClass']('ipt-error');
          //$el.siblings('.form-ipt-error').html(msg).css('display', 'block');
          $el.next('.form-ipt-error').html(msg).css('display', 'block');
        } else {
          $el['removeClass']('ipt-error');
          //$el.siblings('.form-ipt-error').html('').css('display', 'none');
          $el.next('.form-ipt-error').html('').css('display', 'none');
        }
      }
    },
    
}) (the jQuery);
  }editor ends//

View Code

Specifically Source: https://github.com/summerSongXia/summerProject/tree/master/ueditor

Reference documents from: https://fex.baidu.com/ueditor/

Rich Text Editor UEditor

First to introduce relevant js libraries: jquery.min.js ueditor.config.js ueditor.all.js

Common operations:

HTML Source:

JQuery Source:

Guess you like