2017-08-08 84 views
1

我試圖將下劃線按鈕添加到編輯器中,但不起作用。如何將下劃線按鈕添加到trumbow編輯器中?

這是trumbowyg編輯代碼:

https://jsfiddle.net/rbyjgpjg/

/* =========================================================== 
 
* trumbowyg.cleanpaste.js v1.0 
 
* Font Clean paste plugin for Trumbowyg 
 
* http://alex-d.github.com/Trumbowyg 
 
* =========================================================== 
 
* Author : Eric Radin 
 
*/ 
 

 
/** 
 
* This plugin will perform a "cleaning" on any paste, in particular 
 
* it will clean pasted content of microsoft word document tags and classes. 
 
*/ 
 
(function($) { 
 
    'use strict'; 
 

 
    function reverse(sentString) { 
 
    var theString = ''; 
 
    for (var i = sentString.length - 1; i >= 0; i -= 1) { 
 
     theString += sentString.charAt(i); 
 
    } 
 
    return theString; 
 
    } 
 

 
    function checkValidTags(snippet) { 
 
    var theString = snippet; 
 

 
    // Replace uppercase element names with lowercase 
 
    theString = theString.replace(/<[^> ]*/g, function(match) { 
 
     return match.toLowerCase(); 
 
    }); 
 

 
    // Replace uppercase attribute names with lowercase 
 
    theString = theString.replace(/<[^>]*>/g, function(match) { 
 
     match = match.replace(/ [^=]+=/g, function(match2) { 
 
     return match2.toLowerCase(); 
 
     }); 
 
     return match; 
 
    }); 
 

 
    // Put quotes around unquoted attributes 
 
    theString = theString.replace(/<[^>]*>/g, function(match) { 
 
     match = match.replace(/([^=]+=)([^"][^ >]*)/g, '$1\"$2\"'); 
 
     return match; 
 
    }); 
 

 
    return theString; 
 
    } 
 

 
    function cleanIt(htmlBefore, htmlAfter) { 
 
    var matchedHead = ''; 
 
    var matchedTail = ''; 
 
    var afterStart; 
 
    var afterFinish; 
 
    var newSnippet; 
 

 
    // we need to extract the inserted block 
 
    for (afterStart = 0; htmlAfter.charAt(afterStart) === htmlBefore.charAt(afterStart); afterStart += 1) { 
 
     matchedHead += htmlAfter.charAt(afterStart); 
 
    } 
 

 
    // If afterStart is inside a HTML tag, move to opening brace of tag 
 
    for (var i = afterStart; i >= 0; i -= 1) { 
 
     if (htmlBefore.charAt(i) === '<') { 
 
     afterStart = i; 
 
     matchedHead = htmlBefore.substring(0, afterStart); 
 
     break; 
 
     } else if (htmlBefore.charAt(i) === '>') { 
 
     break; 
 
     } 
 
    } 
 

 
    // now reverse string and work from the end in 
 
    htmlAfter = reverse(htmlAfter); 
 
    htmlBefore = reverse(htmlBefore); 
 

 
    // Find end of both strings that matches 
 
    for (afterFinish = 0; htmlAfter.charAt(afterFinish) === htmlBefore.charAt(afterFinish); afterFinish += 1) { 
 
     matchedTail += htmlAfter.charAt(afterFinish); 
 
    } 
 

 
    // If afterFinish is inside a HTML tag, move to closing brace of tag 
 
    for (var j = afterFinish; j >= 0; j -= 1) { 
 
     if (htmlBefore.charAt(j) === '>') { 
 
     afterFinish = j; 
 
     matchedTail = htmlBefore.substring(0, afterFinish); 
 
     break; 
 
     } else if (htmlBefore.charAt(j) === '<') { 
 
     break; 
 
     } 
 
    } 
 

 
    matchedTail = reverse(matchedTail); 
 

 
    // If there's no difference in pasted content 
 
    if (afterStart === (htmlAfter.length - afterFinish)) { 
 
     return false; 
 
    } 
 

 
    htmlAfter = reverse(htmlAfter); 
 
    newSnippet = htmlAfter.substring(afterStart, htmlAfter.length - afterFinish); 
 

 
    // first make sure all tags and attributes are made valid 
 
    newSnippet = checkValidTags(newSnippet); 
 

 
    // Replace opening bold tags with strong 
 
    newSnippet = newSnippet.replace(/<b(\s+|>)/g, '<strong$1'); 
 
    // Replace closing bold tags with closing strong 
 
    newSnippet = newSnippet.replace(/<\/b(\s+|>)/g, '</strong$1'); 
 

 
    // Replace italic tags with em 
 
    newSnippet = newSnippet.replace(/<i(\s+|>)/g, '<em$1'); 
 
    // Replace closing italic tags with closing em 
 
    newSnippet = newSnippet.replace(/<\/i(\s+|>)/g, '</em$1'); 
 

 
    // strip out comments -cgCraft 
 
    newSnippet = newSnippet.replace(/<!(?:--[\s\S]*?--\s*)?>\s*/g, ''); 
 

 
    // strip out &nbsp; -cgCraft 
 
    newSnippet = newSnippet.replace(/&nbsp;/gi, ' '); 
 
    // strip out extra spaces -cgCraft 
 
    newSnippet = newSnippet.replace(/ <\//gi, '</'); 
 

 
    while (newSnippet.indexOf(' ') !== -1) { 
 
     var anArray = newSnippet.split(' '); 
 
     newSnippet = anArray.join(' '); 
 
    } 
 

 
    // strip &nbsp; -cgCraft 
 
    newSnippet = newSnippet.replace(/^\s*|\s*$/g, ''); 
 

 
    // Strip out unaccepted attributes 
 
    newSnippet = newSnippet.replace(/<[^>]*>/g, function(match) { 
 
     match = match.replace(/ ([^=]+)="[^"]*"/g, function(match2, attributeName) { 
 
     if (['alt', 'href', 'src', 'title'].indexOf(attributeName) !== -1) { 
 
      return match2; 
 
     } 
 
     return ''; 
 
     }); 
 
     return match; 
 
    }); 
 

 
    // Final cleanout for MS Word crud 
 
    newSnippet = newSnippet.replace(/<\?xml[^>]*>/g, ''); 
 
    newSnippet = newSnippet.replace(/<[^ >]+:[^>]*>/g, ''); 
 
    newSnippet = newSnippet.replace(/<\/[^ >]+:[^>]*>/g, ''); 
 

 
    // remove unwanted tags 
 
    newSnippet = newSnippet.replace(/<(div|span|style|meta|link){1}.*?>/gi, ''); 
 

 
    htmlAfter = matchedHead + newSnippet + matchedTail; 
 
    return htmlAfter; 
 
    } 
 

 
    // clean editor 
 
    // this will clean the inserted contents 
 
    // it does a compare, before and after paste to determine the 
 
    // pasted contents 
 
    $.extend(true, $.trumbowyg, { 
 
    plugins: { 
 
     cleanPaste: { 
 
     init: function(trumbowyg) { 
 
      trumbowyg.pasteHandlers.push(function() { 
 
      try { 
 
       var contentBefore = trumbowyg.$ed.html(); 
 
       setTimeout(function() { 
 
       var contentAfter = trumbowyg.$ed.html(); 
 
       contentAfter = cleanIt(contentBefore, contentAfter); 
 
       trumbowyg.$ed.html(contentAfter); 
 
       }, 0); 
 
      } catch (c) {} 
 
      }); 
 
     } 
 
     } 
 
    } 
 
    }); 
 
})(jQuery); 
 

 

 

 
$('#editor1').trumbowyg();
body { 
 
    background-color: white; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script src="https://cdn.rawgit.com/Alex-D/Trumbowyg/v2.5.1/dist/trumbowyg.min.js"></script> 
 
<link href="https://cdn.rawgit.com/Alex-D/Trumbowyg/v2.5.1/dist/ui/trumbowyg.min.css" rel="stylesheet" /> 
 

 
<textarea id="editor1">This is a test. Copy some large piece of text and 'paste' it after this line. The cursor will reset to the first character.</textarea>

我試圖編輯,但找不到如何修改。

我可以請一些建議嗎?

回答

0

這是一個工作片段。基本上我已採取(從here)的默認按鈕配置:

[ 
    ['viewHTML'], 
    ['formatting'], 
    'btnGrp-semantic', 
    ['superscript', 'subscript'], 
    ['link'], 
    ['insertImage'], 
    'btnGrp-justify', 
    'btnGrp-lists', 
    ['horizontalRule'], 
    ['removeformat'], 
    ['fullscreen'] 
] 

然後,我已經更新第三元素btn-semantic['bold', 'italic', 'underline', 'strikethrough']。因此,所有四個按鈕返回,而不是默認三:['bold', 'italic', 'strikethrough']

/* =========================================================== 
 
* trumbowyg.cleanpaste.js v1.0 
 
* Font Clean paste plugin for Trumbowyg 
 
* http://alex-d.github.com/Trumbowyg 
 
* =========================================================== 
 
* Author : Eric Radin 
 
*/ 
 

 
/** 
 
* This plugin will perform a "cleaning" on any paste, in particular 
 
* it will clean pasted content of microsoft word document tags and classes. 
 
*/ 
 
(function($) { 
 
    'use strict'; 
 

 
    function reverse(sentString) { 
 
    var theString = ''; 
 
    for (var i = sentString.length - 1; i >= 0; i -= 1) { 
 
     theString += sentString.charAt(i); 
 
    } 
 
    return theString; 
 
    } 
 

 
    function checkValidTags(snippet) { 
 
    var theString = snippet; 
 

 
    // Replace uppercase element names with lowercase 
 
    theString = theString.replace(/<[^> ]*/g, function(match) { 
 
     return match.toLowerCase(); 
 
    }); 
 

 
    // Replace uppercase attribute names with lowercase 
 
    theString = theString.replace(/<[^>]*>/g, function(match) { 
 
     match = match.replace(/ [^=]+=/g, function(match2) { 
 
     return match2.toLowerCase(); 
 
     }); 
 
     return match; 
 
    }); 
 

 
    // Put quotes around unquoted attributes 
 
    theString = theString.replace(/<[^>]*>/g, function(match) { 
 
     match = match.replace(/([^=]+=)([^"][^ >]*)/g, '$1\"$2\"'); 
 
     return match; 
 
    }); 
 

 
    return theString; 
 
    } 
 

 
    function cleanIt(htmlBefore, htmlAfter) { 
 
    var matchedHead = ''; 
 
    var matchedTail = ''; 
 
    var afterStart; 
 
    var afterFinish; 
 
    var newSnippet; 
 

 
    // we need to extract the inserted block 
 
    for (afterStart = 0; htmlAfter.charAt(afterStart) === htmlBefore.charAt(afterStart); afterStart += 1) { 
 
     matchedHead += htmlAfter.charAt(afterStart); 
 
    } 
 

 
    // If afterStart is inside a HTML tag, move to opening brace of tag 
 
    for (var i = afterStart; i >= 0; i -= 1) { 
 
     if (htmlBefore.charAt(i) === '<') { 
 
     afterStart = i; 
 
     matchedHead = htmlBefore.substring(0, afterStart); 
 
     break; 
 
     } else if (htmlBefore.charAt(i) === '>') { 
 
     break; 
 
     } 
 
    } 
 

 
    // now reverse string and work from the end in 
 
    htmlAfter = reverse(htmlAfter); 
 
    htmlBefore = reverse(htmlBefore); 
 

 
    // Find end of both strings that matches 
 
    for (afterFinish = 0; htmlAfter.charAt(afterFinish) === htmlBefore.charAt(afterFinish); afterFinish += 1) { 
 
     matchedTail += htmlAfter.charAt(afterFinish); 
 
    } 
 

 
    // If afterFinish is inside a HTML tag, move to closing brace of tag 
 
    for (var j = afterFinish; j >= 0; j -= 1) { 
 
     if (htmlBefore.charAt(j) === '>') { 
 
     afterFinish = j; 
 
     matchedTail = htmlBefore.substring(0, afterFinish); 
 
     break; 
 
     } else if (htmlBefore.charAt(j) === '<') { 
 
     break; 
 
     } 
 
    } 
 

 
    matchedTail = reverse(matchedTail); 
 

 
    // If there's no difference in pasted content 
 
    if (afterStart === (htmlAfter.length - afterFinish)) { 
 
     return false; 
 
    } 
 

 
    htmlAfter = reverse(htmlAfter); 
 
    newSnippet = htmlAfter.substring(afterStart, htmlAfter.length - afterFinish); 
 

 
    // first make sure all tags and attributes are made valid 
 
    newSnippet = checkValidTags(newSnippet); 
 

 
    // Replace opening bold tags with strong 
 
    newSnippet = newSnippet.replace(/<b(\s+|>)/g, '<strong$1'); 
 
    // Replace closing bold tags with closing strong 
 
    newSnippet = newSnippet.replace(/<\/b(\s+|>)/g, '</strong$1'); 
 

 
    // Replace italic tags with em 
 
    newSnippet = newSnippet.replace(/<i(\s+|>)/g, '<em$1'); 
 
    // Replace closing italic tags with closing em 
 
    newSnippet = newSnippet.replace(/<\/i(\s+|>)/g, '</em$1'); 
 

 
    // strip out comments -cgCraft 
 
    newSnippet = newSnippet.replace(/<!(?:--[\s\S]*?--\s*)?>\s*/g, ''); 
 

 
    // strip out &nbsp; -cgCraft 
 
    newSnippet = newSnippet.replace(/&nbsp;/gi, ' '); 
 
    // strip out extra spaces -cgCraft 
 
    newSnippet = newSnippet.replace(/ <\//gi, '</'); 
 

 
    while (newSnippet.indexOf(' ') !== -1) { 
 
     var anArray = newSnippet.split(' '); 
 
     newSnippet = anArray.join(' '); 
 
    } 
 

 
    // strip &nbsp; -cgCraft 
 
    newSnippet = newSnippet.replace(/^\s*|\s*$/g, ''); 
 

 
    // Strip out unaccepted attributes 
 
    newSnippet = newSnippet.replace(/<[^>]*>/g, function(match) { 
 
     match = match.replace(/ ([^=]+)="[^"]*"/g, function(match2, attributeName) { 
 
     if (['alt', 'href', 'src', 'title'].indexOf(attributeName) !== -1) { 
 
      return match2; 
 
     } 
 
     return ''; 
 
     }); 
 
     return match; 
 
    }); 
 

 
    // Final cleanout for MS Word crud 
 
    newSnippet = newSnippet.replace(/<\?xml[^>]*>/g, ''); 
 
    newSnippet = newSnippet.replace(/<[^ >]+:[^>]*>/g, ''); 
 
    newSnippet = newSnippet.replace(/<\/[^ >]+:[^>]*>/g, ''); 
 

 
    // remove unwanted tags 
 
    newSnippet = newSnippet.replace(/<(div|span|style|meta|link){1}.*?>/gi, ''); 
 

 
    htmlAfter = matchedHead + newSnippet + matchedTail; 
 
    return htmlAfter; 
 
    } 
 

 
    // clean editor 
 
    // this will clean the inserted contents 
 
    // it does a compare, before and after paste to determine the 
 
    // pasted contents 
 
    $.extend(true, $.trumbowyg, { 
 
    plugins: { 
 
     cleanPaste: { 
 
     init: function(trumbowyg) { 
 
      trumbowyg.pasteHandlers.push(function() { 
 
      try { 
 
       var contentBefore = trumbowyg.$ed.html(); 
 
       setTimeout(function() { 
 
       var contentAfter = trumbowyg.$ed.html(); 
 
       contentAfter = cleanIt(contentBefore, contentAfter); 
 
       trumbowyg.$ed.html(contentAfter); 
 
       }, 0); 
 
      } catch (c) {} 
 
      }); 
 
     } 
 
     } 
 
    } 
 
    }); 
 
})(jQuery); 
 

 

 

 
$('#editor1').trumbowyg({ 
 
    btns: 
 
    [ 
 
     ['viewHTML'], 
 
     ['formatting'], 
 
     ['bold', 'italic', 'underline', 'strikethrough'], 
 
     ['superscript', 'subscript'], 
 
     ['link'], 
 
     ['insertImage'], 
 
     'btnGrp-justify', 
 
     'btnGrp-lists', 
 
     ['horizontalRule'], 
 
     ['removeformat'], 
 
     ['fullscreen'] 
 
    ] 
 
});
body { 
 
    background-color: white; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script src="https://cdn.rawgit.com/Alex-D/Trumbowyg/v2.5.1/dist/trumbowyg.min.js"></script> 
 
<link href="https://cdn.rawgit.com/Alex-D/Trumbowyg/v2.5.1/dist/ui/trumbowyg.min.css" rel="stylesheet" /> 
 

 
<textarea id="editor1">This is a test. Copy some large piece of text and 'paste' it after this line. The cursor will reset to the first character.</textarea>

相關問題