二龙戏珠03

富文本编辑器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>



<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-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">Hugefont>a>li>
123                 <li><a data-edit="fontSize 3"><font size="3">Normalfont>a>li>
124                 <li><a data-edit="fontSize 1"><font size="1">Smallfont>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">Addbutton>
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 
178 
179 
180 <script  th:src="@{/js/popper.min.js}">script>
181 <script    th:src="@{/bootstrap-4.4.1-dist/js/bootstrap.min.js}">script>
182 
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($('' + fontName 
241                     +'" style="font-family:\''+ fontName +'\'">' + fontName + ''));
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(/(
|\s|
<\/div>| )*$/, '');
    };
    $.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 multiUpload(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
        Map res = new HashMap();
        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

vue进阶——整合富文本编辑器wangEditor 秋书一叶 Vue vue.js javascript 前端 wangEditor 富文本
vue进阶——整合富文本编辑器wangEditor前言一、什么是wangEditor？二、安装wangEditor1.React2.Vue23.Vue34.CDN三、基本使用1.vue22.vue3四、文件上传问题1、前端重点在于editorConfig中fileName及server的配置2、后端重点在于返回类型及文件大小配置五、参考文献wangEditor文档wangEditor-next文档
ios加载html富文本编辑器,IOS - 富文本解决方案（上） Mr.括号 ios加载html富文本编辑器
概述针对富文本来说，一直都是移动端的痛。虽然网上的解决方案很多，但是大多数都是基于展示，真正可以进行编辑的，却很少。而这些少数的实现中，适合我使用就没有了。所以我决定自己研究，并实现。需求需求说起来很简单，就是要设计一款IOS、Androd、PC端通用的富文本编辑器。模仿新浪微博中-头条文章。调研经过多次的分析和调研，有过这么几套方案。使用UIWebView来实现使用内嵌js编辑器实现使用html
【甲方安全建设】富文本编辑器XSS漏洞攻击及防御详析秋说网络安全 xss web安全富文本编辑器
原创文章，禁止转载。文章目录调研背景搭建TinyMCE富文本编辑器靶场富文本编辑器前端过滤富文本编辑器后端攻击后端弱过滤弱过滤1弱过滤2后端有效过滤从甲方的视角看动态安全调研背景随着Web2.0技术的普及，富文本编辑器在各种Web应用中得到了广泛应用，用户、网站管理员等可以通过富文本编辑器在网页中添加并展示格式化文本、图片、视频等丰富内容。然而，由于富文本内容本质上涉及客户端输入，并且可能包含HT
[套路] 浏览器引入Vue.js场景-WangEditor富文本编辑器的使用 (永久免费) Grandpa_Rick 套路 front end vue.js 前端 javascript wangEditor
系列文章目录[套路]el-table多选属性实现单选效果[套路]基于服务内存实现的中文拼音混合查询[套路]Bypass滑块验证码目录系列文章目录前言一、实现1.1场景1.2Window对象简介1.3引入WangEditor1.4页面配置前言公司使用freemarker的老旧SpringBootWeb后台项目,前两年通过浏览器引入js的方式使用Vue简单升级了下,方便迭代功能.近期一个很简单的功能需
Java学习--黑马SpringBoot3课程个人总结-2024-02-16 客卿123 Java的学习笔记 java 学习开发语言
1.添加文章1.1富文本编辑器文章内容需要使用到富文本编辑器，这里咱们使用一个开源的富文本编辑器Quill官网地址：https://vueup.github.io/vue-quill/安装：npminstall@vueup/vue-quill@latest--save导入组件和样式：import{QuillEditor}from'@vueup/vue-quill'import'@vueup/vue
如何将“龙”插入到富文本编辑器中？前端开源组件库低代码
本文由体验技术团队TinyVue组件库核心成员曾令卡同学编写。Quill是一款API驱动、支持格式和模块定制的开源Web富文本编辑器，目前在GitHub的Star数是38k。本文是一个Quill的综合案例，从自定义工具栏按钮，到自定义Blot编辑器内容格式，再到调用Quill实例的insertEmbed方法，完成在富文本编辑器中插入由Canvas绘制的龙。之前在掘金看到一篇文章：《产品经理：你能不
富文本编辑器wangEditor2的基本配置 Demonor_ java wangEditor 富文本编辑器 java配置富文本编辑器编辑器 Editor
对于富文本编辑器主要有几种，他们的有点缺点如下：1.KindEditor：优点：比较轻，轻量版缺点：目前来说，不可自定义字体字号【2018-04-01】2.UEditor：优点：拥有最丰富的功能。缺点：1.换行之后，下一行对齐上一行，因此无法调整下一行的对齐方式2.当全选内容，给全部内容统一改变属性时，不一定使每个字的格式都生效。3.还有其他一些bug，就不多说了3.wangEditorv2：优点
JS特效第134弹：jQuery响应式全屏背景图片导航菜单特效马coder javascript 开发语言 ecmascript
jQuery响应式全屏背景图片导航菜单特效，先来看看效果：一部分关键的代码如下：jQuery响应式全屏背景图片导航菜单特效主页jQuery从1.4-2.1版本下载适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.不支持IE8及以下浏览器。内容leanModal.js轻巧的弹出层插件设置wysiwyg微小的Bootstrap富文本编辑器bootstra
微信小程序官方组件展示之表单组件editor源码 MLC061
以下将展示微信小程序之表单组件editor源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。功能描述：富文本编辑器，可以对图片、文字进行编辑。编辑器导出内容支持带标签的html和纯文本的text，编辑器内部采用delta格式进行存储。通过setContents接口设置内容时，解析插入的html可能会由于一些非法标签导致解析错误，建议开发者在小程序
TinyMCE 实现ctrl+v粘贴图片并上传、word粘贴带图片 Mr_Zang666 word图片一键粘贴 word
自动导入Word图片，或者粘贴Word内容时自动上传所有的图片，并且最终保留Word样式，这应该是Web编辑器里面最基本的一个需求功能了。一般情况下我们将Word内容粘贴到Web编辑器（富文本编辑器）中时，编辑器都无法自动上传图片。需要用户手动一张张上传Word图片。如果只有一张图片还能够接受，如果图片数量比较多，这种操作就显得非常的麻烦。1、只粘贴图片并上传到服务器config.extraPlu
百度ueditor 实现ctrl+v粘贴图片并上传、word粘贴带图片 Mr_Zang666 word图片一键粘贴 word
自动导入Word图片，或者粘贴Word内容时自动上传所有的图片，并且最终保留Word样式，这应该是Web编辑器里面最基本的一个需求功能了。一般情况下我们将Word内容粘贴到Web编辑器（富文本编辑器）中时，编辑器都无法自动上传图片。需要用户手动一张张上传Word图片。如果只有一张图片还能够接受，如果图片数量比较多，这种操作就显得非常的麻烦。1、只粘贴图片并上传到服务器config.extraPlu
富文本编辑器从word复制粘贴公式 Mr_Zang666 word图片一键粘贴 word java 开发语言
自动导入Word图片，或者粘贴Word内容时自动上传所有的图片，并且最终保留Word样式，这应该是Web编辑器里面最基本的一个需求功能了。一般情况下我们将Word内容粘贴到Web编辑器（富文本编辑器）中时，编辑器都无法自动上传图片。需要用户手动一张张上传Word图片。如果只有一张图片还能够接受，如果图片数量比较多，这种操作就显得非常的麻烦。1、只粘贴图片并上传到服务器config.extraPlu
2019-09-09 富文本编辑器kindEditor 海老山川
富文本编辑器，RichTextEditor,简称RTE,它提供类似于MicrosoftWord的编辑功能。常用的富文本编辑器：KindEditorhttp://kindeditor.net/兼容性强UEditorhttp://ueditor.baidu.com/website/CKEditorhttp://ckeditor.com/商品介绍vareditor;KindEditor.ready(fu
vue-cli引入wangEditor、Element，封装可上传附件的富文本编辑器组件（附源代码直接应用，菜单可调整） shawxlee Element Vue 参考手册【置顶】elementui vue vuecli wangeditor 富文本编辑器
关于Element安装引入，请参考我的另一篇文章：vue-cli引入ElementPlus（element-ui），修改主题变量，定义全局样式_shawxlee的博客-CSDN博客_chalkvariables1、安装wangeditornpmiwangeditor--savewangEditor官方文档：Introduction·wangEditor用户文档2、在页面中引入wangeditor创
vue项目：集成富文本编辑器 - 百度ueditor（vue-ueditor-wrap） snowball_li 前端 vue.js 前端富文本
一、背景集成百度ueditor，实现图文编辑二、项目介绍vue2-nuxt2项目vue项目：ueditor（vue-ueditor-wrap）三、集成步骤3.1、下载富文本编辑器GitHub-fex-team/ueditor:richtext富文本编辑器3.2、下载后放在static目录下3.3、vue项目安装插件vue-ueditor-wrapyarnaddvue-ueditor-wrap3.4
vue-element-admin实现富文本编辑器功能陈卿诺语 Vue vue.js 前端 javascript
vue-element-admin简介：vue-element-admin是一个后台前端解决方案，它基于vue和element-ui实现。它使用了最新的前端技术栈，内置了i18国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。官网地址：https://panjiachen.gitee.io/vue-element-admin-
好用的vue项目插件哆来A梦没有口袋 vue 好用的vue的插件 vue的富文本插件 vue的无缝滚动插件 vue的拖拽剪裁插件 vue插件推荐
1.vue-seamless-scroll无缝滚动-vue-seamless-scroll的简介及使用教程-MadewithVuejs2.富文本(1)avue-plugin-ueditoravue-plugin-ueditor:avue富文本编辑器(2)wangeditorwangEditor3.vue-monoplasty-slide-verify滑动验证码vue-monoplasty-slid
Vue组件（三）-内置组件component、transition、 transition-group、keep-alive、slot 牧云流 VUE Javascript 前端进阶之路 vue.js javascript 前端
component组件动态绑定组件,根据数据不同更换不同的组件,component通过属性is的值可以渲染不同的组件。下面的例子是一个简单的切换编辑器的组件，只在演示component组件的用法富文本编辑器Markdown编辑器Vue部分components:{MarkdownEditor,TinymceEditor},data(){return{currentEditor:'TinymceEdi
vue项目中引用富文本编辑器vue-quill-editor eb59226db9be
1.安装依赖npminstallvue-quill-editor--save2.使用（1）引入import{quillEditor}from"vue-quill-editor";import{Quill}from"vue-quill-editor";import"quill/dist/quill.core.css";//importstylesimport"quill/dist/quill.sno
推荐好用的vue插件02 v-md-editor富文本编辑器 longbao_1 前端 vue.js github javascript
一、介绍v-md-editor是基于Vue开发的markdown编辑器组件二、安装与注册即支持vue2.0的项目也支持vue3.0的项目，不过两种版本的安装版本不同-[Demo](https://code-farmer-i.github.io/vue-markdown-editor/examples/base-editor.html)-[Documentation](https://code-fa
tinymce富文本编辑器报Refused to apply style from ‘/skin.min.css‘ because its MIME type (‘text/html‘)的问题心灵的制造商 css html 前端
这里写自定义目录标题Tinymce报错误问题错误如下图解决的方法参考文档Tinymce报错误问题使用tinymce富文本编辑器报Refusedtoapplystylefrom‘/skin.min.css’becauseitsMIMEtype(‘text/html’)isnotasupportedstylesheetMIMEtype,andstrictMIMEcheckingisenabled.大致
(十二)ATP应用测试平台——关于vue中Vue-Quill-Editor、Mavon-Editor、Tinymce等多种富文本编辑器的集成使用厉害哥哥吖 #JS ATP应用测试平台 #vue vue.js html5
前言本节我们主要介绍几种在vue项目中使用较为广泛的富文本编辑器，其中主要包括Vue-Quill-Editor、mavon-editor以及tinymce等的集成及使用。源代码依然托管在我们的ATP应用测试平台中，源码地址：https://gitee.com/northcangap/atp，仅供参考使用。富文本编辑器实现效果如下：正文Vue-Quill-Editor①npm安装Vue-Quill-
Java整合TinyMCE开发博客文章富文本编辑器（二）：代码高亮水瓶座的鬼才 java java js web
自己搭建了个小博客，本文与这篇文章同步：http://spzgczyj.top/blog/article.html?articleId=298一、项目需求：在前面的图片上传完成后，我又遇到了一个问题，就是我搞博客，肯定要给代码示例，但是我发现，tinymce编辑代码的时候，选中代码把格式选为代码，不但编辑的时候问题很大，加载到文章详情页还会出现各种样式崩的情况。最后在翻了翻timymce的英文文档
富文本编辑器CKEditor4简单使用-05（开发自定义插件入门） @素素~ 富文本编辑器 creditor4自定义插件
富文本编辑器CKEditor4简单使用-05（开发自定义插件入门）1.CKEditor4插件入门1.1关于CKEditor4插件的简单安装与使用1.2参考2.开发自定义插件——当前时间插件2.1创建插件文件目录结构2.2编写插件原代码2.2.1编写代码框架2.2.2创建编辑器命令2.2.3创建插件工具栏按钮2.2.3.1简单说明2.2.3.2关于命名+实现代码2.2.3.3关于工具栏组中的位置2.
wangEditor v4的简单使用墨轩尘工具 javascript
当前文档是wangEditorv4版本的。wangEditorv5已经正式发布，可参考文档。v5发布之后，v4将不再开发新功能。介绍EnglishdocumentationwangEditor4——轻量级web富文本编辑器，配置方便，使用简单。官网：www.wangeditor.com文档：www.wangeditor.com/v4源码：github.com/wangeditor-team/wan
CKEditor5导入并解析word功能的集成，实现word转html 启扶农 word html javascript 前端
概述说起富文本编辑器，我们大都遇到过，甚至使用过，这种所见即所得的书写方式，以及它灵活的排版，让我们的创作更加流畅和美观。其实你可以把它理解成是把word等软件的功能转成在浏览器里面使用，这样就能通过其他的一些手段进行管理，并融入到相应系统中。但是由于实现方式和语言等的不同，存在着一些出入。比如我现在正在使用的，也就是此刻我写这篇文章的工具，就是一个富文本编辑器。其实富文本编辑器有很多种，它们的功
前端玩Word：Word文档解析成浏览器认识的HTML 凌览1 前端 word html
前言领导跟富文本编辑器杠上啦，领导有一个类似于某雀导入Word文档，解析内容后渲染到编辑器编辑的需求。某雀功能效果如下：怎么搞定呢？自己写一个解析器？本文分享Word文件转换成浏览器认识的HTML实战经验。什么是Word文档Word是微软公司开发的一个文字处理器应用程序，它是Office软件中的一个组件。使用MicrosoftOfficeWord可创建和编辑信件、报告、网页或电子邮件中的文本和图形
PHP激光推送，移动端消息通知程序小院 PHP php javascript 前端
PHP激光推送，移动端消息通知composerrequirejpush/jpush以下是整理好的方式：/***极光推送*过滤html和特殊字符，主要是针对富文本编辑器里产生的HTML和特殊字符*@param$modelarray*@returntrue*/publicfunctionmsg_push($model){$code=$model['code'];//用户别名$img=$model['i
十分钟学会用springboot制作微信小程序富文本编辑器 Java斌十分钟学会Java java基础 spring boot java 微信小程序富文本编辑器
1.1富文本模型设计在构建富文本编辑器系统时，首先需要设计一个合适的富文本模型。CREATE TABLE IF NOT EXISTS rich_texts ( id INT PRIMARY KEY AUTO_INCREMENT, title VARCHAR(255), content TEXT, created_at TIMESTAMP DEFAULT CURRENT_TI
Scintilla教程（1）：入门介绍 breakthrough_01 Scintilla c++
Scintilla概述Scintilla是一个富文本编辑器控件，支持GTK、QT、Cocoa等多种UI框架。其功能接口的调用主要以消息传递的方式执行，比如载入文本文件，可以使用消息SCI_SETTEXT(,constchar*text)该消息的作用是将Scintilla控件所显示的文本替换为消息体里面的text文本。对于消息的具体传递过程，不同的平台（GTK、QT、Cocoa等）对应不同的调用方法
sql统计相同项个数并按名次显示朱辉辉33 java oracle
现在有如下这样一个表： A表 ID Name time ------------------------------ 0001 aaa 2006-11-18 0002 ccc 2006-11-18 0003 eee 2006-11-18 0004 aaa 2006-11-18 0005 eee 2006-11-18 0004 aaa 2006-11-18 0002 ccc 20
Android+Jquery Mobile学习系列-目录白糖_ JQuery Mobile
最近在研究学习基于Android的移动应用开发，准备给家里人做一个应用程序用用。向公司手机移动团队咨询了下，觉得使用Android的WebView上手最快，因为WebView等于是一个内置浏览器，可以基于html页面开发，不用去学习Android自带的七七八八的控件。然后加上Jquery mobile的样式渲染和事件等，就能非常方便的做动态应用了。从现在起，往后一段时间，我打算
如何给线程池命名 daysinsun 线程池
在系统运行后，在线程快照里总是看到线程池的名字为pool-xx，这样导致很不好定位，怎么给线程池一个有意义的名字呢。参照ThreadPoolExecutor类的ThreadFactory，自己实现ThreadFactory接口，重写newThread方法即可。参考代码如下： public class Named
IE 中"HTML Parsing Error:Unable to modify the parent container element before the 周凡杨 html 解析 error readyState
错误： IE 中"HTML Parsing Error:Unable to modify the parent container element before the child element is closed" 现象：同事之间几个IE 测试情况下，有的报这个错，有的不报。经查询资料后，可归纳以下原因。
java上传 g21121 java
我们在做web项目中通常会遇到上传文件的情况，用struts等框架的会直接用的自带的标签和组件，今天说的是利用servlet来完成上传。我们这里利用到commons-fileupload组件，相关jar包可以取apache官网下载：http://commons.apache.org/ 下面是servlet的代码： //定义一个磁盘文件工厂 DiskFileItemFactory fact
SpringMVC配置学习 510888780 spring mvc
spring MVC配置详解现在主流的Web MVC框架除了Struts这个主力外，其次就是Spring MVC了，因此这也是作为一名程序员需要掌握的主流框架，框架选择多了，应对多变的需求和业务时，可实行的方案自然就多了。不过要想灵活运用Spring MVC来应对大多数的Web开发，就必须要掌握它的配置及原理。　　一、Spring MVC环境搭建：（Spring 2.5.6 + Hi
spring mvc-jfreeChart 柱图(1) 布衣凌宇 jfreechart
第一步：下载jfreeChart包，注意是jfreeChart文件lib目录下的，jcommon-1.0.23.jar和jfreechart-1.0.19.jar两个包即可；第二步：配置web.xml; web.xml代码如下 <servlet> <servlet-name>jfreechart</servlet-nam
我的spring学习笔记13-容器扩展点之PropertyPlaceholderConfigurer aijuans Spring3
PropertyPlaceholderConfigurer是个bean工厂后置处理器的实现，也就是BeanFactoryPostProcessor接口的一个实现。关于BeanFactoryPostProcessor和BeanPostProcessor类似。我会在其他地方介绍。PropertyPlaceholderConfigurer可以将上下文（配置文件）中的属性值放在另一个单独的标准java P
java 线程池使用 Runnable&Callable&Future antlove java thread Runnable callable future
1. 创建线程池 ExecutorService executorService = Executors.newCachedThreadPool(); 2. 执行一次线程，调用Runnable接口实现 Future<?> future = executorService.submit(new DefaultRunnable()); System.out.prin
XML语法元素结构的总结百合不是茶 xml 树结构
1.XML介绍1969年 gml (主要目的是要在不同的机器进行通信的数据规范)1985年 sgml standard generralized markup language1993年 html(www网)1998年 xml extensible markup language
改变eclipse编码格式 bijian1013 eclipse 编码格式
1.改变整个工作空间的编码格式改变整个工作空间的编码格式，这样以后新建的文件也是新设置的编码格式。 Eclipse->window->preferences->General->workspace-
javascript中return的设计缺陷 bijian1013 JavaScript AngularJS
代码1： <script> var gisService = (function(window) { return { name:function () { alert(1); } }; })(this); gisService.name(); &l
【持久化框架MyBatis3八】Spring集成MyBatis3 bit1129 Mybatis3
pom.xml配置 Maven的pom中主要包括： MyBatis MyBatis-Spring Spring MySQL-Connector-Java Druid applicationContext.xml配置 <?xml version="1.0" encoding="UTF-8"?> &
java web项目启动时自动加载自定义properties文件 bitray java Web 监听器相对路径
创建一个类 public class ContextInitListener implements ServletContextListener 使得该类成为一个监听器。用于监听整个容器生命周期的，主要是初始化和销毁的。类创建后要在web.xml配置文件中增加一个简单的监听器配置，即刚才我们定义的类。 <listener> <des
用nginx区分文件大小做出不同响应 ronin47
昨晚和前21v的同事聊天，说到我离职后一些技术上的更新。其中有个给某大客户(游戏下载类)的特殊需求设计，因为文件大小差距很大——估计是大版本和补丁的区别——又走的是同一个域名，而squid在响应比较大的文件时，尤其是初次下载的时候，性能比较差，所以拆成两组服务器，squid服务于较小的文件，通过pull方式从peer层获取，nginx服务于较大的文件，通过push方式由peer层分发同步。外部发布
java-67-扑克牌的顺子.从扑克牌中随机抽5张牌，判断是不是一个顺子，即这5张牌是不是连续的.2-10为数字本身，A为1，J为11，Q为12，K为13，而大 bylijinnan java
package com.ljn.base; import java.util.Arrays; import java.util.Random; public class ContinuousPoker { /** * Q67 扑克牌的顺子从扑克牌中随机抽5张牌，判断是不是一个顺子，即这5张牌是不是连续的。 * 2-10为数字本身，A为1，J为1
翟鸿燊老师语录 ccii 翟鸿燊
一、国学应用智慧TAT之亮剑精神A 1. 角色就是人格就像你一回家的时候，你一进屋里面，你已经是儿子，是姑娘啦，给老爸老妈倒怀水吧，你还觉得你是老总呢？还拿派呢？就像今天一样，你们往这儿一坐，你们之间是什么，同学，是朋友。还有下属最忌讳的就是领导向他询问情况的时候，什么我不知道，我不清楚，该你知道的你凭什么不知道
[光速与宇宙]进行光速飞行的一些问题 comsci 问题
在人类整体进入宇宙时代，即将开展深空宇宙探索之前，我有几个猜想想告诉大家仅仅是猜想。。。未经官方证实 1：要在宇宙中进行光速飞行，必须首先获得宇宙中的航行通行证，而这个航行通行证并不是我们平常认为的那种带钢印的证书，是什么呢？下面我来告诉
oracle undo解析 cwqcwqmax9 oracle
oracle undo解析2012-09-24 09:02:01 我来说两句作者：虫师收藏我要投稿 Undo是干嘛用的？ &nb
java中各种集合的详细介绍 dashuaifu java 集合
一，java中各种集合的关系图 Collection 接口的接口对象的集合 ├ List 子接口 &n
卸载windows服务的方法 dcj3sjt126com windows service
卸载Windows服务的方法在Windows中，有一类程序称为服务，在操作系统内核加载完成后就开始加载。这里程序往往运行在操作系统的底层，因此资源占用比较大、执行效率比较高，比较有代表性的就是杀毒软件。但是一旦因为特殊原因不能正确卸载这些程序了，其加载在Windows内的服务就不容易删除了。即便是删除注册表中的相应项目，虽然不启动了，但是系统中仍然存在此项服务，只是没有加载而已。如果安装其他
Warning: The Copy Bundle Resources build phase contains this target's Info.plist dcj3sjt126com ios xcode
http://developer.apple.com/iphone/library/qa/qa2009/qa1649.html Excerpt: You are getting this warning because you probably added your Info.plist file to your Copy Bundle
2014之C++学习笔记（一） Etwo C++Etwo Etwo iterator 迭代器
已经有很长一段时间没有写博客了，可能大家已经淡忘了Etwo这个人的存在，这一年多以来，本人从事了AS的相关开发工作，但最近一段时间，AS在天朝的没落，相信有很多码农也都清楚，现在的页游基本上达到饱和，手机上的游戏基本被unity3D与cocos占据，AS基本没有容身之处。so。。。最近我并不打算直接转型
js跨越获取数据问题记录 haifengwuch jsonp json Ajax
js的跨越问题，普通的ajax无法获取服务器返回的值。第一种解决方案，通过getson，后台配合方式，实现。 Java后台代码： protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String ca
蓝色jQuery导航条 ini JavaScript html jquery Web html5
效果体验：http://keleyi.com/keleyi/phtml/jqtexiao/39.htmHTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery鼠标悬停上下滑动导航条 - 柯乐义<
linux部署jdk,tomcat,mysql kerryg jdk tomcat linux mysql
1、安装java环境jdk: 一般系统都会默认自带的JDK,但是不太好用，都会卸载了，然后重新安装。 1.1）、卸载：（rpm -qa :查询已经安装哪些软件包； rmp -q 软件包：查询指定包是否已
DOMContentLoaded VS onload VS onreadystatechange mutongwu jquery js
1. DOMContentLoaded 在页面html、script、style加载完毕即可触发，无需等待所有资源（image/iframe）加载完毕。（IE9+） 2. onload是最早支持的事件，要求所有资源加载完毕触发。 3. onreadystatechange 开始在IE引入，后来其它浏览器也有一定的实现。涉及以下 document , applet, embed, fra
sql批量插入数据 qifeifei 批量插入
hi，自己在做工程的时候，遇到批量插入数据的数据修复场景。我的思路是在插入前准备一个临时表，临时表的整理就看当时的选择条件了，临时表就是要插入的数据集，最后再批量插入到数据库中。 WITH tempT AS ( SELECT item_id AS combo_id, item_id, now() AS create_date FROM a
log4j打印日志文件如何实现相对路径到项目工程下 thinkfreer Web log4j 应用服务器日志
最近为了实现统计一个网站的访问量，记录用户的登录信息，以方便站长实时了解自己网站的访问情况，选择了Apache 的log4j,但是在选择相对路径那块卡主了，X度了好多方法(其实大多都是一样的内用，还一个字都不差的)，都没有能解决问题，无奈搞了2天终于解决了，与大家分享一下需求：用户登录该网站时，把用户的登录名,ip,时间。统计到一个txt文档里，以方便其他系统调用此txt。项目名
linux下mysql-5.6.23.tar.gz安装与配置笑我痴狂 mysql linux unix
1.卸载系统默认的mysql [root@localhost ~]# rpm -qa | grep mysql mysql-libs-5.1.66-2.el6_3.x86_64 mysql-devel-5.1.66-2.el6_3.x86_64 mysql-5.1.66-2.el6_3.x86_64 [root@localhost ~]# rpm -e mysql-libs-5.1

富文本编辑器bootstrap-wysiwyg

你可能感兴趣的:(富文本编辑器bootstrap-wysiwyg)