富文本 wangEditor 前后端交互例子

最新推荐文章于 2025-06-16 18:44:08 发布

Mr.Entropy

最新推荐文章于 2025-06-16 18:44:08 发布

阅读量1.2w

点赞数 8

CC 4.0 BY-SA版权

分类专栏： java后端

本文链接：https://blog.youkuaiyun.com/qq_33416416/article/details/88870833

之前看了很多但都不是很详细，这次贴上的代码，希望新手能少走弯路，与君共勉

参考文献

官方文档 https://www.kancloud.cn/wangfupeng/wangeditor3/332599

主要引入： <script type="text/javascript" src="../static/js/wangEditor.min.js"></script>

官方文档中都有，没用的可以自行删除

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - 富文本编辑器</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后�?">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3�?新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技�?">

    <link rel="shortcut icon" href="favicon.ico"> <link href="../static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../static/css/animate.css" rel="stylesheet">
    <link href="../static/css/plugins/summernote/summernote.css" rel="stylesheet">
    <link href="../static/css/plugins/summernote/summernote-bs3.css" rel="stylesheet">
    <link href="../static/css/style.css?v=4.1.0" rel="stylesheet">
    <script src="../static/js/jquery.min.js?v=2.1.4"></script>
    <script src="../static/js/bootstrap.min.js?v=3.3.6"></script>
    <!-- Peity -->
    <script src="../static/js/plugins/peity/jquery.peity.min.js"></script>
    <script type="text/javascript" src="../static/js/wangEditor.min.js"></script>
</head>

<body class="gray-bg">
     <div> 
     <span class="col-lg-8" id="editor"></span>
     </div>
     <div>
     <button id="btn2">获取text</button>
        </div>
     <script type="text/javascript">
      var E = window.wangEditor;
      var editor = new E('#editor');
      //editor.create();
      // 自定义菜单配置
      editor.customConfig.menus = [
          'head',  // 标题
          'bold',  // 粗体
          'fontSize',  // 字号
          'fontName',  // 字体
          'italic',  // 斜体
          'underline',  // 下划线
          'strikeThrough',  // 删除线
          'foreColor',  // 文字颜色
          'backColor',  // 背景颜色
          'link',  // 插入链接
          'list',  // 列表
          'justify',  // 对齐方式
          'quote',  // 引用
          'emoticon',  // 表情
          'image',  // 插入图片
          'table',  // 表格
          'video',  // 插入视频
          'code',  // 插入代码
          'undo',  // 撤销
          'redo'  // 重复
      ];

      //editor.customConfig.uploadImgServer = '/admin.php/Upload/wang_editor';  // 上传图片到服务器
      //editor.customConfig.uploadImgServer = '/upload';
      editor.customConfig.uploadImgShowBase64 = true;   // 使用 base64 保存图片
      // 3M
      editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
      // 限制一次最多上传 5 张图片
      editor.customConfig.uploadImgMaxLength = 1;
      // 自定义文件名
      editor.customConfig.uploadFileName = 'editor_img';
      // 将 timeout 时间改为 3s
      editor.customConfig.uploadImgTimeout = 5000;
        
      editor.create();
      editor.customConfig.uploadImgHooks = {
          before: function (xhr, editor, files) {
              // 图片上传之前触发
              // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

              // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
              // return {
              // &nbs