2016-09-07 57 views
0

當使用froala 2.3.4時,我發現一些問題,它剝離了一堆有效代碼,如<script><style>標籤,自定義html標籤(虛構的像<foo>)以及通常重新格式化代碼來美化它。在javascript中編寫JavaScript的froala源代碼視圖,然後切換回可視模式,導致javascript執行

經過一番玩弄,我得到了它的工作,以至於(迄今爲止)代碼保持相對原封不動,然而在測試<script>塊時,我注意到從代碼視圖切換回來時,它實際上執行了代碼,我只是在CodeMirror 5.8.12盒子裏面寫道(見截圖)

froala codemirror

這裏是我使用的初始化Code​​Mirror代碼和froala:

function completeAfter(cm, pred) { 
    var cur = cm.getCursor(); 
    if (!pred || pred()) setTimeout(function() { 
     if (!cm.state.completionActive) 
      var doc = cm.getDoc(); 
      var POS = doc.getCursor(); 
      var mode = CodeMirror.innerMode(cm.getMode(), cm.getTokenAt(POS).state).mode.name; 
      // console.log(mode); 
      if (mode == 'xml') { //html depends on xml 
       CodeMirror.showHint(cm, CodeMirror.hint.html); 
      } else if (mode == 'javascript') { 
       CodeMirror.showHint(cm, CodeMirror.hint.javascript); 
      } else if (mode == 'css') { 
       CodeMirror.showHint(cm, CodeMirror.hint.css); 
      } 
    }, 100); 
    return CodeMirror.Pass; 
} 

function completeIfAfterLt(cm) { 
    return completeAfter(cm, function() { 
     var cur = cm.getCursor(); 
     return cm.getRange(CodeMirror.Pos(cur.line, cur.ch - 1), cur) == "<"; 
    }); 
} 

function completeIfInTag(cm) { 
    return completeAfter(cm, function() { 
     var tok = cm.getTokenAt(cm.getCursor()); 
     if (tok.type == "string" && (!/['"]/.test(tok.string.charAt(tok.string.length - 1)) || tok.string.length == 1)) return false; 
     var inner = CodeMirror.innerMode(cm.getMode(), tok.state).state; 
     return inner.tagName; 
    }); 
} 

var codeHeight = 'calc(100vh - 96px)'; 
if((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1) { 
    codeHeight = '-o-' + codeHeight; 
} else if(navigator.userAgent.indexOf("Chrome") != -1) { 
    codeHeight = '-webkit-' + codeHeight; 
} else if(navigator.userAgent.indexOf("Safari") != -1) { 
    codeHeight = '-webkit-' + codeHeight; 
} else if(navigator.userAgent.indexOf("Firefox") != -1) { 
    codeHeight = '-moz-' + codeHeight; 
} 

$('.code').froalaEditor({ 
    theme: 'dark', 
    height: codeHeight, 
    htmlAllowedTags: ['.*'], 
    htmlRemoveTags: [''], 
    htmlAllowedAttrs: ['.*'], 
    htmlAllowedEmptyTags: ['*'], 
    codeMirrorOptions: { 
    mode: "htmlmixed", 
    lineNumbers: true, 
    autoCloseTags: true, 
    autoCloseBrackets: true, 
    foldGutter: true, 
    styleActiveLine: true, 
    theme: 'icecoder', 
    gutters: ["CodeMirror-foldgutter", "CodeMirror-linenumbers"], 
    autocomplete: true, 
    extraKeys: { 
     "'<'": completeAfter, 
     "'/'": completeIfAfterLt, 
     "' '": completeIfInTag, 
     "'='": completeIfInTag, 
     "'.'": completeAfter, 
     "'{'": completeAfter, 
     "':'": completeAfter, 
     "Ctrl-Space": "autocomplete" 
    } 
    } 
}); 

對於CodeM irror,我有以下插件/等從codemirror minification helper捆綁爲codemirror-extras.js {codemirror.js沒有被選擇爲,因爲它這樣做時使用從縮小輔助以下模塊所以它是保持分開打破包的一部分}:

Modes: 
- css.js 
- htmlembedded.js 
- htmlmixed.js 
- javascript.js 
- smarty.js 
- xml.js 
Add-ons: 
- active-line.js 
- brace-fold.js 
- closebrackets.js 
- closetag.js 
- comment-fold.js 
- css-hint.js 
- css-lint.js 
- dialog.js 
- foldcode.js 
- foldgutter.js 
- html-hint.js 
- html-lint.js 
- indent-fold.js 
- javascript-hint.js 
- matchbrackets.js 
- matchtags.js 
- overlay.js 
- search.js 
- searchcursor.js 
- show-hint.js 
- sql-hint.js 
- xml-fold.js 
- xml-hint.js 

當所述選項卡的查看器是froala中的CodeMirror 5.8.12執行時,通過切換「查看源代碼」(}按鈕切換回來,同時還可以確保在「查看源代碼」所述調整不會破壞froala和CodeMirror之間的連續性?

回答

0

在summernote.js搜索的行:

$editable.html(dom.html($note) || dom.emptyPara); 

,取而代之的是:

var str = dom.html($note) || dom.emptyPara; 
str = str.replace('<script>', '<scriptfalse>'); 
str = str.replace('<script ', '<scriptfalse '); 
str = str.replace('</script>', '</scriptfalse>'); 
$editable.html(str); 

而且還搜索行:

$note.val(context.invoke('code')); 

將其替換爲:

var str = context.invoke('code'); 
str = str.replace('<scriptfalse>', '<script>'); 
str = str.replace('<scriptfalse ', '<script '); 
str = str.replace('</scriptfalse>', '</script>'); 
$note.val(str);