富文本编辑器UEditor

首先要引入相关的js库文件：jquery.min.js ueditor.config.js ueditor.all.js

常用操作：

     //获取编辑器的内容
      $('.action').find('.getInfo').click(function () {
        var pContent = UE.getEditor("pContent").getContent();
        alert(pContent);
      });

      //清空编辑器的内容
      $('.action').find('.clearInfo').click(function () {
        var editorBox = UE.getEditor('pContent');
        editorBox.setContent('');
      });

      //给编辑器赋值
      $('.action').find('.setValueInfo').click(function () {
        var str='你好，哈哈哈';
        var editorBox = UE.getEditor('pContent');
        editorBox.ready(function () {//编辑器初始化完成再赋值
          editorBox.setContent(str);  //赋值给UEditor
        });
      });

HTML源码：

<!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">获取编辑器的内容</div>
    <div class="item clearInfo">清空编辑器的内容</div>
    <div class="item setValueInfo">给编辑器赋值</div>
  </div>
  <div style="clear: both;"></div>
  <div id=pContent class="pContent"></div>

  <script type="text/javascript" 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源码：

(function ($) {
  $.index = {
    init: function () {
      //初始化编辑器
      $.index.initEditor('pContent');

      //获取编辑器的内容
      $('.action').find('.getInfo').click(function () {
        var pContent = UE.getEditor("pContent").getContent();
        alert(pContent);
      });

      //清空编辑器的内容
      $('.action').find('.clearInfo').click(function () {
        var editorBox = UE.getEditor('pContent');
        editorBox.setContent('');
      });

      //给编辑器赋值
      $('.action').find('.setValueInfo').click(function () {
        var str='你好，哈哈哈';
        var editorBox = UE.getEditor('pContent');
        editorBox.ready(function () {//编辑器初始化完成再赋值
          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 (ObjectName) {
        var n = '#' + ObjectName;
        var $ipt = $(n);
        var editor = UE.getEditor(ObjectName);
        var content = editor.getContent();
        if (content.length > 20000) {
          $.clwenkueditCont.validateEditor.msg($ipt, '内容长度不能超过20000个字符！建议您分多次发布！');
          return false;
        }
        $.clwenkueditCont.validateEditor.msg($ipt);
        return content;
      },
      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');
        }
      }
    },
    //编辑器结束


  }
})(jQuery);

View Code

具体源码：https://github.com/summerSongXia/summerProject/tree/master/ueditor

参考文档来自：https://fex.baidu.com/ueditor/

富文本编辑器UEditor

首先要引入相关的js库文件：jquery.min.js ueditor.config.js ueditor.all.js

常用操作：

HTML源码：

JQuery源码：

猜你喜欢