其他分享
首页 > 其他分享> > 富文本编辑器bootstrap-wysiwyg

富文本编辑器bootstrap-wysiwyg

作者:互联网

 

 之前demo相关博客查看的,只有3.x多的版本才有这些图标显示出来。应该是某些属性是用的老的样式,新版的没研究先用这3.x版本的吧。

https://www.bootcdn.cn/font-awesome/

 

https://plugins.jquery.com/hotkeys/

需要引入css:

    <link  th:href="@{/css/bootstrap-combined.no-icons.min.css}" rel="stylesheet"/>
    <link  th:href="@{/bootstrap-4.4.1-dist/css/bootstrap.min.css}" rel="stylesheet" type="text/css" />
    <link  th:href="@{/css/font-awesome.css}" rel="stylesheet"/>
    <link  th:href="@{/css/index.css}" rel="stylesheet"/>

js:

<script    th:src="@{/js/jquery-3.4.1.min.js}"></script>
<!--键盘事件-->
<script    th:src="@{/js/jquery.hotkeys.js}"></script>
<!--bootstrap.bundle.min.js此文件包含Popper.min.js,只是点击下拉框需要双击才行-->
<!--<script th:src="@{/bootstrap-4.4.1-dist/js/bootstrap.bundle.min.js}"></script>-->
<!--富文本编辑框点击文字样式,和大小,下拉框没反应是因为没引入popper.min.js的问题。-->
<script  th:src="@{/js/popper.min.js}"></script>
<script    th:src="@{/bootstrap-4.4.1-dist/js/bootstrap.min.js}"></script>
<!--<script    th:src="@{/js/bootstrap-wysiwyg.js}"></script>-->
<script    th:src="@{/js/bootstrap-wysiwyg-define.js}"></script>

整体demo页面html:

  1 <!DOCTYPE html>
  2 <html lang="en" xmlns:th=http://www.thymeleaf.org>
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>编辑新闻详情页面</title>
  6     <link  th:href="@{/css/bootstrap-combined.no-icons.min.css}" rel="stylesheet"/>
  7     <link  th:href="@{/bootstrap-4.4.1-dist/css/bootstrap.min.css}" rel="stylesheet" type="text/css" />
  8     <link  th:href="@{/css/font-awesome.css}" rel="stylesheet"/>
  9     <link  th:href="@{/css/index.css}" rel="stylesheet"/>
 10     <style>
 11 
 12         .editor-container { /* 编辑器容器样式 */
 13 
 14                 padding: 25px 20px 25px;
 15 
 16                 margin-bottom: 10px;
 17 
 18                 background-color: #eeeeee;
 19 
 20                 -webkit-border-radius: 6px;
 21 
 22                 -moz-border-radius: 6px;
 23 
 24                 border-radius: 6px;
 25 
 26         }
 27 
 28          
 29 
 30         .btn-toolbar {
 31 
 32                 font-size: 0;
 33 
 34                 margin-top: 10px;
 35 
 36                 margin-bottom: 10px;
 37 
 38         }
 39 
 40          
 41 
 42         #editor { /* 编辑框样式 */
 43 
 44                 max-height: 400px;
 45 
 46                 height: 400px;
 47 
 48                 width: 100%;
 49 
 50                 background-color: white;
 51 
 52                 border-collapse: separate;
 53 
 54                 border: 1px solid rgb(204, 204, 204);
 55 
 56                 padding: 4px;
 57 
 58                 box-sizing: content-box;
 59 
 60                 -webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
 61 
 62                 box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
 63 
 64                 border-top-right-radius: 3px;
 65 
 66                 border-bottom-right-radius: 3px;
 67 
 68                 border-bottom-left-radius: 3px;
 69 
 70                 border-top-left-radius: 3px;
 71 
 72                 overflow: scroll;
 73 
 74                 outline: none;
 75 
 76         }
 77 
 78          
 79 
 80             /* 工具条里按钮样式,这个样式其实是.btn-default的样式,
 81 
 82     Button按钮之所以没有直接加上.btn-default样式是因为按钮选中后wysiwyg会给选中的按钮加.btn-info样式,
 83 
 84     .btn-default和.btn-info同时存在样式会冲突 */
 85             .btn-toolbar .btn {
 86 
 87 
 88                      color: #333;
 89 
 90                      background-color: #fff;
 91 
 92                      border-color: #ccc;
 93 
 94              }
 95 
 96          
 97 
 98             /* 这个样式其实是.btn-info的样式,重写一遍是为了提高优先级,
 99 
100     否则.btn-info的样式会被.btn-toolbar .btn覆盖,这个样式要写在.btn-toolbar .btn之下 */
101         .btn-toolbar .btn-info {
102 
103                 color: #fff;
104 
105                 background-color: #5bc0de;
106 
107                 border-color: #46b8da;
108 
109         }
110 
111     </style>
112 </head>
113 <body>
114     <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
115         <div class="btn-group">
116             <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font"><i class="icon-font"></i><b class="caret"></b></a>
117             <ul class="dropdown-menu"> </ul>
118         </div>
119         <div class="btn-group">
120             <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="icon-text-height"></i> <b class="caret"></b></a>
121             <ul class="dropdown-menu">
122                 <li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
123                 <li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
124                 <li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
125             </ul>
126         </div>
127         <div class="btn-group">
128             <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a> <!--加粗-->
129             <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a><!-- 斜体-->
130             <a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="icon-strikethrough"></i></a><!-- 删除线-->
131             <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="icon-underline"></i></a><!-- 下划线-->
132         </div>
133         <div class="btn-group">
134             <a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a><!-- 加点-->
135             <a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a><!-- 数字排序-->
136             <a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a><!-- 减少缩进-->
137             <a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a><!--增加缩进-->
138         </div>
139         <div class="btn-group">
140             <a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="icon-align-left"></i></a><!--左对齐-->
141             <a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="icon-align-center"></i></a><!-- 居中 -->
142             <a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="icon-align-right"></i></a><!--右对齐-->
143             <a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="icon-align-justify"></i></a><!--垂直对齐-->
144         </div>
145         <div class="btn-group">
146             <a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="icon-link"></i></a><!-- 链接-->
147             <div class="dropdown-menu input-append">
148                 <input class="span2" placeholder="URL" type="text" data-edit="createLink"/>
149                 <button class="btn" type="button">Add</button>
150             </div>
151             <a class="btn" data-edit="unlink" title="Remove Hyperlink"><i class="icon-cut"></i></a>
152         </div>
153         <div class="btn-group">
154             <a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="icon-picture"></i></a>
155         <input type="file" id="pictureInput" name="picture" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" action="/ylxtWeb/news/upload"/>
156         </div>
157         <div class="btn-group">
158             <a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a><!--撤销-->
159             <a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="icon-repeat"></i></a><!--恢复-->
160         </div>
161         <input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech="">
162     </div>
163 
164     <div id="editor" contenteditable="true" th:text="${news?.content}"></div>
165     <div style="text-align: center;margin-top: 10px;">
166         <button class="btn-info" onclick="cancel()" >返回</button>
167         <button class="btn-info" onclick="clea()" style="margin: 0 36px;">清空</button>
168         <button class="btn-info" id="confirmBtn" onclick="confir()" th:attr="news_id=${news?.id}" >确定</button>
169     </div>
170 <form action="" id="myForm" style="display: none;">
171     <input type="text" name="news" th:value="${news}">
172 </form>
173 </body>
174 <script    th:src="@{/js/jquery-3.4.1.min.js}"></script>
175 <!--键盘事件-->
176 <script    th:src="@{/js/jquery.hotkeys.js}"></script>
177 <!--bootstrap.bundle.min.js此文件包含Popper.min.js,只是点击下拉框需要双击才行-->
178 <!--<script th:src="@{/bootstrap-4.4.1-dist/js/bootstrap.bundle.min.js}"></script>-->
179 <!--富文本编辑框点击文字样式,和大小,下拉框没反应是因为没引入popper.min.js的问题。-->
180 <script  th:src="@{/js/popper.min.js}"></script>
181 <script    th:src="@{/bootstrap-4.4.1-dist/js/bootstrap.min.js}"></script>
182 <!--<script    th:src="@{/js/bootstrap-wysiwyg.js}"></script>-->
183 <script    th:src="@{/js/bootstrap-wysiwyg-define.js}"></script>
184 
185 <script th:inline="javascript">
186 function cancel(){
187 window.location.href = baseUrl+"/news/toPageNews";
188 }
189 function clea(){
190     console.log(222);
191     //获取清除HTML标签后的内容:
192     $("#editor").empty();
193 }
194 
195 function confir(){
196     //获取富文本编辑器的内容,和获取普通div内容一样。
197     var cont = $("#editor").html();
198     console.log(cont);
199 
200     var news_id = $("#confirmBtn").attr("news_id");
201     var data_news=[[${news}]]
202     data_news.content = cont;
203 var formEle = document.getElementById("myForm");
204 formEle.action = baseUrl+"/news/updateNews";
205 var formData = new FormData(formEle);
206 /*Object.keys(data_news).forEach((key) => {
207 formData.append(key, data_news[key]);
208 });
209 console.log(formData.get("title")+"5555"+formData.get("isDelete"));*/
210             //formEle.submit();
211             //提交表单
212 var xhr = new XMLHttpRequest();
213 xhr.open('PUT', baseUrl+"/news", true);
214 xhr.onload = function () {
215   if (xhr.status !== 200) {
216     console.log('An error occurred!');
217   }
218 };
219 xhr.send(formData);
220 }
221 var baseUrl = "";
222 $(function(){
223         var pathName = window.location.pathname.substring(1);
224         var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
225         baseUrl = window.location.protocol + '//' + window.location.host+'/' + webName + '/';
226         // 初始化工具条
227         initToolbarBootstrapBindings();
228         $('#editor').wysiwyg();
229     });
230 
231     // 初始化工具条
232     function initToolbarBootstrapBindings() {
233         // 字体样式
234         var fonts = [ 'Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
235                 'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact',
236                 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
237                 'Times New Roman', 'Verdana' ],
238             fontTarget = $('[title=Font]').siblings('.dropdown-menu');
239         $.each(fonts,function(idx, fontName) {
240             fontTarget.append($('<li><a href="#" data-edit="fontName ' + fontName 
241                     +'" style="font-family:\''+ fontName +'\'">' + fontName + '</a></li>'));
242         });
243 
244         $('button[title]').tooltip({
245             container : 'body'
246         });
247 
248         // .dropdown-menu下的input事件
249         $('.dropdown-menu input').click(function() {
250             return false;
251         })
252         .change(function() {
253             $(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');
254         })
255         .keydown('esc', function() {
256             this.value = '';
257             $(this).change();
258         });
259 
260         // [data-role=magic-overlay]的样式
261         $('[data-role=magic-overlay]').each(function() {
262             var overlay = $(this), target = $(overlay.data('target'));
263             overlay.css('opacity', 0).css('position', 'absolute')
264                     .offset(target.offset()).width(target.outerWidth())
265                     .height(target.outerHeight());
266         });
267     };
268 
269 </script>
270 </html>
View Code

查了好多博客里边的demo的图片都是没有上传到服务器的,需要修改bootstrap-wysiwyg.js文件,原理为:选中图片后就上传到服务器,然后服务端返回图片访问链接,前端把链接写入img标签的src属性内,并放到编辑框内,

修改后的bootstrap-wysiwyg.js文件,更名为bootstrap-wysiwyg-define.js引入了thymeleaf模板页面。

/* http://github.com/mindmup/bootstrap-wysiwyg */
/*global jQuery, $, FileReader*/
/*jslint browser:true*/
(function ($) {
    'use strict';
    /*转码图片*/
    var readFileIntoDataUrl = function (fileInfo) {
        var loader = $.Deferred(),  //jq延迟对象
            fReader = new FileReader();
        fReader.onload = function (e) {
            loader.resolve(e.target.result);
        };
        fReader.onerror = loader.reject; //拒绝
        fReader.onprogress = loader.notify;
        fReader.readAsDataURL(fileInfo); //转码图片
        return loader.promise();  //返回promise对象,观察某种类型被绑定到集合的所有行动,是否已被加入到队列中。
    };
    //一、修改原readFileIntoDataUrl方法
        /*var readFileIntoDataUrl = function (fileInfo) {
            var loader = $.Deferred(),
                fReader = new FileReader(),
                img = '';
            fReader.onload = function (e) {
                img = e.target.result;
                $.ajax({
                    url: ctxPath+'news/upload',
                    type: 'post',
                    async: false,
                    dataType: 'json',
                    data: {"file":fileInfo},
                    success: function(data){
                     if(data.responseCode == 1){
                    loader.resolve(服务器返回的图片的地址);
                      }else if(data.responseCode == 0){
                          alert('上传失败');
                      }
                    }
                });
            };
            fReader.onerror = loader.reject;
            fReader.onprogress = loader.notify;
            fReader.readAsDataURL(fileInfo);
            return loader.promise();
        };*/
var uploadFileToServer = function(id, action, callback) {
 var fileObj = document.getElementById("pictureInput").files[0]; // js 获取文件对象

               var tokenv="ssssssss";

               //var data = {"id":id,"picture":fileObj};
            var formData = new FormData();//document.getElementById("myForm")
            //formData.append("picture",$("#pictureInput")[0].files[0]);
            formData.append("file",fileObj);
            formData.append("token",tokenv);
console.log(formData);
 $.ajax({
  type: 'post',
  url : action,
  cache: false,
  data: formData,
  processData: false,//如果processData不設置為false,jquery會把formData轉換為字符串。
  contentType : false,//不设置是:application/x-www-form-urlencoded;
  dataType : 'json',
  success : function(obj) {
  if (obj.status) {
   callback(obj.imgsrc);
  } else
   options.fileUploadError("server-internal-exception",
    obj.message);
  },
  error : function(e) {
  console.log(e);
  //options.fileUploadErroe("upload-failure", "");
  }
 });}
    /*清空内容*/
    $.fn.cleanHtml = function () {
        var html = $(this).html();
        return html && html.replace(/(<br>|\s|<div><br><\/div>|&nbsp;)*$/, '');
    };
    $.fn.wysiwyg = function (userOptions) {
        var editor = this,  //设置ui-jq='设置的插件别名的dom元素'(此句注释可忽略,是针对我的项目结构写的)
            selectedRange,
            options,
            toolbarBtnSelector,
            //更新工具栏
            updateToolbar = function () {
                if (options.activeToolbarClass) {
                    $(options.toolbarSelector).find(toolbarBtnSelector).each(function () {
                        var command = $(this).data(options.commandRole);
                        //判断光标所在位置以确定命令的状态,为真则显示为激活
                        if (document.queryCommandState(command)) {
                            $(this).addClass(options.activeToolbarClass);
                        } else {
                            $(this).removeClass(options.activeToolbarClass);
                        }
                    });
                }
            },
            //插入内容
            execCommand = function (commandWithArgs, valueArg) {
                var commandArr = commandWithArgs.split(' '),
                    command = commandArr.shift(),
                    args = commandArr.join(' ') + (valueArg || '');
                document.execCommand(command, 0, args);
                updateToolbar();
            },
            //用jquery.hotkeys.js插件监听键盘
            bindHotkeys = function (hotKeys) {
                $.each(hotKeys, function (hotkey, command) {
                    editor.keydown(hotkey, function (e) {
                        if (editor.attr('contenteditable') && editor.is(':visible')) {
                            e.preventDefault();
                            e.stopPropagation();
                            execCommand(command);
                        }
                    }).keyup(hotkey, function (e) {
                        if (editor.attr('contenteditable') && editor.is(':visible')) {
                            e.preventDefault();
                            e.stopPropagation();
                        }
                    });
                });
            },
            //获取当前range对象
            getCurrentRange = function () {
                var sel = window.getSelection();
                if (sel.getRangeAt && sel.rangeCount) {
                    return sel.getRangeAt(0); //从当前selection对象中获得一个range对象。
                }
            },
            //保存
            saveSelection = function () {
                selectedRange = getCurrentRange();
            },
            //恢复
            restoreSelection = function () {
                var selection = window.getSelection(); //获取当前既获区,selection是对当前激活选中区(即高亮文本)进行操作
                if (selectedRange) {
                    try {
                        //移除selection中所有的range对象,执行后anchorNode、focusNode被设置为null,不存在任何被选中的内容。
                        selection.removeAllRanges();
                    } catch (ex) {
                        document.body.createTextRange().select();
                        document.selection.empty();
                    }
                    //将range添加到selection当中,所以一个selection中可以有多个range。
                    //注意Chrome不允许同时存在多个range,它的处理方式和Firefox有些不同。
                    selection.addRange(selectedRange);
                }
            },
            //插入文件(这里指图片)
                //将insertFiles方法作改写如下:
            insertFiles = function (files, id, action) {
                editor.focus();
                //遍历插入(应为可以多文件插入)
                $.each(files, function (idx, fileInfo) {
                    //只可插入图片文件
                    if (/^image\//.test(fileInfo.type)) {
                        //转码图片
                        /*
                       * $.when(readFileIntoDataUrl(fileInfo)).done(function(dataUrl) {
                       * execCommand('insertimage', dataUrl); }).fail(function(e) {
                       * options.fileUploadError("file-reader", e); });
                       */
                       uploadFileToServer(id, action, function(src) {
                       execCommand('insertimage', src);
                       });
                    } else {
                        //非图片文件会调用config的错误函数
                        options.fileUploadError("unsupported-file-type", fileInfo.type);
                    }
                });
            },
            //TODO 暂不了解用意
            markSelection = function (input, color) {
                restoreSelection();
                //确定命令是否被支持,返回true或false
                if (document.queryCommandSupported('hiliteColor')) {
                    document.execCommand('hiliteColor', 0, color || 'transparent');
                }
                saveSelection();
                input.data(options.selectionMarker, color);
            },
            //绑定工具栏相应工具事件
            bindToolbar = function (toolbar, options) {
                //给所有工具栏上的控件绑定点击事件
                toolbar.find(toolbarBtnSelector).click(function () {
                    restoreSelection();
                    editor.focus();  //获取焦点
                    //设置相应配置的工具execCommand
                    execCommand($(this).data(options.commandRole));
                    //保存
                    saveSelection();
                });
                //对[data-toggle=dropdown]进行单独绑定点击事件处理  字体大小
                toolbar.find('[data-toggle=dropdown]').click(restoreSelection);
                //对input控件进行单独处理,webkitspeechchange为语音事件
                toolbar.find('input[type=text][data-' + options.commandRole + ']').on('webkitspeechchange change', function () {
                    var newValue = this.value; //获取input 的value
                    this.value = '';  //清空value防止冲突
                    restoreSelection();
                    if (newValue) {
                        editor.focus();//获取焦点
                        //设置相应配置的工具execCommand
                        execCommand($(this).data(options.commandRole), newValue);
                    }
                    saveSelection();
                }).on('focus', function () { //获取焦点
                    var input = $(this);
                    if (!input.data(options.selectionMarker)) {
                        markSelection(input, options.selectionColor);
                        input.focus();
                    }
                }).on('blur', function () { //失去焦点
                    var input = $(this);
                    if (input.data(options.selectionMarker)) {
                        markSelection(input, false);
                    }
                });
                //图片按钮添加了监听器事件
                toolbar.find('input[type=file][data-' + options.commandRole + ']')
                  .change(
                   function() {
                    restoreSelection();
                    if (this.type === 'file' && this.files
                     && this.files.length > 0) {
                     insertFiles(this.files, $(this).attr('id'),
                      $(this).attr('action'));
                    }
                    saveSelection();
                    this.value = '';
                    });
            },
            //初始化拖放事件
            initFileDrops = function () {
                editor.on('dragenter dragover', false)
                    .on('drop', function (e) {
                        var dataTransfer = e.originalEvent.dataTransfer;
                        e.stopPropagation();
                        e.preventDefault();
                        if (dataTransfer && dataTransfer.files && dataTransfer.files.length > 0) {
                            insertFiles(dataTransfer.files);
                        }
                    });
            };
        //合并传入的配置对象userOptions和默认的配置对象config
        options = $.extend({}, $.fn.wysiwyg.defaults, userOptions);
        //设置查找字符串:a[data-edit] button[data-edit] input[type=button][data-edit]
        toolbarBtnSelector = 'a[data-' + options.commandRole + '],button[data-' + options.commandRole + '],input[type=button][data-' + options.commandRole + ']';
        //设置热键 容器有[data-role=editor-toolbar]属性的dom元素
        bindHotkeys(options.hotKeys);
        //是否允许拖放 允许则配置拖放
        if (options.dragAndDropImages) {initFileDrops();}
        //配置工具栏
        bindToolbar($(options.toolbarSelector), options);
        //设置编辑区域为可编辑状态并绑定事件mouseup keyup mouseout
        editor.attr('contenteditable', true)
            .on('mouseup keyup mouseout', function () {
                saveSelection();
                updateToolbar();
            });
        //编辑区域绑定图片点击事件
        //TODO 这是我自己添加的,因为有时要对图片进行一些操作
        editor.on('mousedown','img', function (e) {
            e.preventDefault();
        }).on('click', 'img', function (e) {
            var $img = $(e.currentTarget);
            console.log($img);
            e.preventDefault();
            e.stopPropagation();
        });
        //window绑定touchend事件
        $(window).bind('touchend', function (e) {
            var isInside = (editor.is(e.target) || editor.has(e.target).length > 0),
                currentRange = getCurrentRange(),
                clear = currentRange && (currentRange.startContainer === currentRange.endContainer && currentRange.startOffset === currentRange.endOffset);
            if (!clear || isInside) {
                saveSelection();
                updateToolbar();
            }
        });
        return this;
    };
    //配置参数
    $.fn.wysiwyg.defaults = {
        hotKeys: {      //热键 应用hotkeys.js jquery插件
            'ctrl+b meta+b': 'bold',
            'ctrl+i meta+i': 'italic',
            'ctrl+u meta+u': 'underline',
            'ctrl+z meta+z': 'undo',
            'ctrl+y meta+y meta+shift+z': 'redo',
            'ctrl+l meta+l': 'justifyleft',
            'ctrl+r meta+r': 'justifyright',
            'ctrl+e meta+e': 'justifycenter',
            'ctrl+j meta+j': 'justifyfull',
            'shift+tab': 'outdent',
            'tab': 'indent'
        },
        toolbarSelector: '[data-role=editor-toolbar]',
        commandRole: 'edit',
        activeToolbarClass: 'btn-info',
        selectionMarker: 'edit-focus-marker',
        selectionColor: 'darkgrey',
        dragAndDropImages: true,  //是否支持拖放,默认为支持
        fileUploadError: function (reason, detail) { console.log("File upload error", reason, detail); }
    };
}(window.jQuery));

测试图片上传成功:

 

 后台Java接收图片方法:

   /**
     *
     * @param file  MultipartFile 这个类一般是用来接受前台传过来的文件
     * @param request
     * @return
     */
    @ResponseBody
    @RequestMapping(value = "/upload",method = RequestMethod.POST)
    public Map<String,Object> multiUpload(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
        Map<String,Object> res = new HashMap<String, Object>();
        try {
            String scheme = request.getScheme();//http
            String serverName = request.getServerName();//localhost
            int serverPort = request.getServerPort();//8080
            String contextPath = request.getContextPath();//项目名
            String url = scheme+"://"+serverName+":"+serverPort+contextPath;//http://127.0.0.1:8080/test

            LOGGER.info("url:"+url);
            String imgUrl = "";
            //String imgUrl=imgPath.substring(0,imgPath.length()-2);//截取到的是"/static/",如果配置访问路径的话
            String path = request.getContextPath();
            String intactPath =null;
            String filename=file.getOriginalFilename();
            String imgDir = imgServerPath.substring(imgServerPath.indexOf("file:") + 5, imgServerPath.length());
            File file2 = new File(imgDir, filename);
            LOGGER.info("imgDir:"+imgDir);
            //得到原始文件的输入流
            InputStream inputStream=file.getInputStream();
            FileOutputStream fileOutputStream=new FileOutputStream(file2);
            //写出文件
            IOUtils.copy(inputStream,fileOutputStream);
            inputStream.close();
            fileOutputStream.close();
            if(!file.isEmpty()){
                imgUrl = url+File.separator + file.getOriginalFilename();
                System.out.println(intactPath);
                int pre = (int) System.currentTimeMillis();

            }
            res.put("status","succ");
            res.put("imgsrc",imgUrl);
        } catch (Exception e) {
            res.put("status","error");
            res.put("msg",e.getMessage());
            e.printStackTrace();
            LOGGER.info("multiUpload方法异常!",e);
            System.out.println(e.getMessage());
        }
        return res;
    }

参考链接:

https://www.jb51.net/article/85252.htm

标签:function,文本编辑,bootstrap,wysiwyg,editor,var,btn,data,options
来源: https://www.cnblogs.com/erlongxizhu-03/p/12195297.html