zoukankan      html  css  js  c++  java
  • 富文本编辑器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 {
           1000px;
          height: 100px;
          display: block;
          margin: 30px auto;
        }
    
        .action {
          display: block;
          overflow: hidden;
           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/

  • 相关阅读:
    c++vector(入门级)
    端口扫描(TCP)
    推荐安全程序员的书单(系统、网络、安全等)
    My latest news(--2016.12.31)
    HTML+JS+DOM【选项卡自动切换】
    20170916考试总结
    [Usaco2014 Mar]Sabotage
    [SHOI2014]概率充电器
    [Usaco2010 Dec]Exercise 奶牛健美操
    [JZOJ4687]奇袭
  • 原文地址:https://www.cnblogs.com/songxia/p/11098152.html
Copyright © 2011-2022 走看看