所見即所得編輯器不適合Modal

我使用引導程序來創建一個網站，然後我瀏覽了一個與Bootstrap兼容的所見即所得編輯器的網絡，並且我發現了一個我非常喜歡的here。所以我試圖將它合併到我的模式窗口中，但它不像它應該的那樣工作。所見即所得編輯器不適合Modal

當我按活動說明標籤，它看起來像這樣：

這就像它忽略了模態的邊界完全。

我不太明白這種行爲。造型：

#editor { 
    max-height: 250px; 
    height: 150px; 
    background-color: white; 
    border-collapse: separate; 
    border: 1px solid rgb(204, 204, 204); 
    padding: 4px; 
    /*box-sizing: content-box; */ 
    -webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset; 
    box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset; 
    border-top-right-radius: 3px; border-bottom-right-radius: 3px; 
    border-bottom-left-radius: 3px; border-top-left-radius: 3px; 
    overflow: scroll; 
    outline: none; 
} 

div[data-role="editor-toolbar"] { 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

.dropdown-menu a { 
    cursor: pointer; 
}

的JavaScript：

/* http://github.com/mindmup/bootstrap-wysiwyg */ 
/*global jQuery, $, FileReader*/ 
/*jslint browser:true*/ 
(function ($) { 
    'use strict'; 
    var readFileIntoDataUrl = function (fileInfo) { 
     var loader = $.Deferred(), 
      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(); 
    }; 
    $.fn.cleanHtml = function() { 
     var html = $(this).html(); 
     return html && html.replace(/(<br>|\s|<div><br><\/div>|&nbsp;)*$/, ''); 
    }; 
    $.fn.wysiwyg = function (userOptions) { 
     var editor = this, 
      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(); 
      }, 
      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(); 
         } 
        }); 
       }); 
      }, 
      getCurrentRange = function() { 
       var sel = window.getSelection(); 
       if (sel.getRangeAt && sel.rangeCount) { 
        return sel.getRangeAt(0); 
       } 
      }, 
      saveSelection = function() { 
       selectedRange = getCurrentRange(); 
      }, 
      restoreSelection = function() { 
       var selection = window.getSelection(); 
       if (selectedRange) { 
        try { 
         selection.removeAllRanges(); 
        } catch (ex) { 
         document.body.createTextRange().select(); 
         document.selection.empty(); 
        } 

        selection.addRange(selectedRange); 
       } 
      }, 
      insertFiles = function (files) { 
       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); 
         }); 
        } else { 
         options.fileUploadError("unsupported-file-type", fileInfo.type); 
        } 
       }); 
      }, 
      markSelection = function (input, color) { 
       restoreSelection(); 
       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($(this).data(options.commandRole)); 
        saveSelection(); 
       }); 
       toolbar.find('[data-toggle=dropdown]').click(restoreSelection); 

       toolbar.find('input[type=text][data-' + options.commandRole + ']').on('webkitspeechchange change', function() { 
        var newValue = this.value; /* ugly but prevents fake double-calls due to selection restoration */ 
        this.value = ''; 
        restoreSelection(); 
        if (newValue) { 
         editor.focus(); 
         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); 
        } 
        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); 
         } 
        }); 
      }; 
     options = $.extend({}, $.fn.wysiwyg.defaults, userOptions); 
     toolbarBtnSelector = 'a[data-' + options.commandRole + '],button[data-' + options.commandRole + '],input[type=button][data-' + options.commandRole + ']'; 
     bindHotkeys(options.hotKeys); 
     if (options.dragAndDropImages) { 
      initFileDrops(); 
     } 
     bindToolbar($(options.toolbarSelector), options); 
     editor.attr('contenteditable', true) 
      .on('mouseup keyup mouseout', function() { 
       saveSelection(); 
       updateToolbar(); 
      }); 
     $(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: { 
      '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));

的HTML：

<div class="form-group"> 
    <!-- WYSIWYG Editor Start --> 
    <div class="form-control"> 
     <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor"> 
      <div class="btn-group"> 
       <a class="btn dropdown-toggle" data-toggle="dropdown" title data-original-title="Font"> 
        <span class="fa fa-font">A</span> 
        <b class="caret"></b> 
       </a> 
       <ul class="dropdown-menu" id="font-dropdown"> 
        <li> 
         <a data-edit="fontName Serif" style="font-family:'Serif'">Serif</a> 
        </li> 
        <!-- other fonts...omitted to short the amount of text to read --> 
       </ul> 
      </div> 
      <div class="btn-group"> 
       <a class="btn dropdown-toggle" data-toggle="dropdown" 
        title="" data-original-title="Font Size"> 
        <span class="fa fa-text-height"></span>&nbsp;<b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li> 
         <a data-edit="fontSize 5"><font size="5">Huge</font></a> 
        </li> 
        <li> 
         <a data-edit="fontSize 3"><font size="3">Normal</font></a> 
        </li> 
        <li> 
         <a data-edit="fontSize 1"><font size="1">Small</font></a> 
        </li> 
       </ul> 
      </div> 
      <div class="btn-group"> 
       <a class="btn" data-edit="bold" title="" data-original-title="Bold (Ctrl/Cmd+B)"><span class="fa fa-bold"></span></a> 
       <a class="btn" data-edit="italic" title="" data-original-title="Italic (Ctrl/Cmd+I)"><span class="fa fa-italic"></span></a> 
       <a class="btn" data-edit="strikethrough" title="" data-original-title="Strikethrough"><span class="fa fa-strikethrough"></span></a> 
       <a class="btn" data-edit="underline" title="" data-original-title="Underline (Ctrl/Cmd+U)"><span class="fa fa-underline"></span></a> 
      </div> 
      <div class="btn-group"> 
       <a class="btn" data-edit="insertunorderedlist" title="" data-original-title="Bullet list"><span class="fa fa-list"></span></a> 
       <a class="btn" data-edit="insertorderedlist" title="" data-original-title="Number list"><span class="fa fa-list-ol"></span></a> 
       <!-- TODO: Find an Indent Left Icon --> 
       <a class="btn" data-edit="outdent" title="" data-original-title="Reduce indent (Shift+Tab)"><span class="fa fa-arrow-left"></span></a> 
       <a class="btn" data-edit="indent" title="" data-original-title="Indent (Tab)"><span class="fa fa-indent"></span></a> 
      </div> 
      <div class="btn-group"> 
       <a class="btn btn-info" data-edit="justifyleft" title="" data-original-title="Align Left (Ctrl/Cmd+L)"><span class="fa fa-align-left"></span></a> 
       <a class="btn" data-edit="justifycenter" title="" data-original-title="Center (Ctrl/Cmd+E)"><span class="fa fa-align-center"></span></a> 
       <a class="btn" data-edit="justifyright" title="" data-original-title="Align Right (Ctrl/Cmd+R)"><span class="fa fa-align-right"></span></a> 
       <a class="btn" data-edit="justifyfull" title="" data-original-title="Justify (Ctrl/Cmd+J)"><span class="fa fa-align-justify"></span></a> 
      </div> 
      <div class="btn-group"> 
       <a class="btn dropdown-toggle" data-toggle="dropdown" title="" data-original-title="Hyperlink"><span class="fa fa-link"></span></a> 
       <div class="dropdown-menu input-append"> 
        <input class="span2" placeholder="URL" type="text" data-edit="createLink"> 
        <button class="btn" type="button">Add</button> 
       </div> 
       <a class="btn" data-edit="unlink" title="" data-original-title="Remove Hyperlink"><span class="fa fa-cut"></span></a> 
      </div> 
      <div class="btn-group"> 
       <a class="btn" title="" id="pictureBtn" data-original-title="Insert picture (or just drag &amp; drop)"><span class="fa fa-picture-o"></span></a> 
       <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" style="opacity: 0; position: absolute; top: 0px; left: 0px; width: 37px; height: 30px;"> 
      </div> 
      <div class="btn-group"> 
       <a class="btn" data-edit="undo" title="" data-original-title="Undo (Ctrl/Cmd+Z)"><span class="fa fa-undo"></span></a> 
       <a class="btn" data-edit="redo" title="" data-original-title="Redo (Ctrl/Cmd+Y)"><span class="fa fa-repeat"></span></a> 
      </div> 
     </div> 
     <div id="editor" contenteditable="true"></div> 
    </div> 
    <!-- WYSIWYG Editor End --> 
</div>

編輯

我固定的地方出現了錯誤選項卡上的溢出問題。看起來HTML在活動摘要和描述選項卡上都有一個「活動」類。

來源

2015-11-20 OmniOwl

什麼類型的模式您使用的是？ –

@ 3.14159265358 ...他使用Bootstrap模式。 –

我使用在Bootstrap類中找到的'modal-dialog modal-lg'。 – OmniOwl

好吧我自己修復它。我切換了這個元素：

<div class="form-control">

對於這一點：

<div class="form-group">

來源

2015-11-20 09:32:01 OmniOwl

所見即所得編輯器不適合Modal

回答

相關問題