（簡單）紡織工具欄？

-1

我正在尋找一個簡單的解決方案來構建一個工具欄來插入紡織品標記。（簡單）紡織工具欄？

不需要解析器，我只想念插入的工具欄/按鈕。就像bbcode的quicktags一樣。

是否有紡織編輯器/工具欄或通用js類？

插入標記，如「*」在選擇的文本
的toogle標記（刪除，如果之前

一些例子和提示我可以嘗試建立它自己插入。

我知道MarkitUp，但希望使用一個最小化和簡單的工具欄。也許這裏使用的東西...

來源

2014-12-27 pwFoo

找到了解決插入標記。應該這樣做！ – pwFoo 2014-12-28 20:38:52

找到一個解決方案，插入標記向上。應該這樣做！

與谷歌 JSFiddle demo

我放在一起的jsfiddle演示了CONTENTEDITABLE股利和簡單的插入B-標籤「按鈕」找到基本的例子。

var selected = ''; 
 
var before = '<b>'; 
 
var after = '</b>'; 
 

 
function getSelectionText() { 
 
    var text = ""; 
 
    if (window.getSelection) { 
 
     text = window.getSelection().toString(); 
 
    } else if (document.selection && document.selection.type != "Control") { 
 
     text = document.selection.createRange().text; 
 
    } 
 
    return text; 
 
} 
 

 
function insert(element, selection, before, after) { 
 
    $(element).html($(element).html().replace(selection, before+selection+after)); 
 
} 
 

 
$(document).ready(function(){ 
 
    $('.editable').bind('mouseup touchend', function (e){ 
 
     selected = getSelectionText(); 
 
    }); 
 
    
 
    $('#insertB').click(function(e) { 
 
     insert('.editable', selected, before, after); 
 
     $('.editable').focus(); 
 
    }); 
 
    
 
    $('#toggleEditor').click(function() { 
 
     var editable = $('.editable'); 
 

 
     if (editable.attr('contenteditable') == 'false') { 
 
      editable.attr('contenteditable','true').addClass('wysiwyg').focus(); 
 
     } 
 
     else { 
 
      editable.attr('contenteditable','false').removeClass('wysiwyg'); 
 
     } 
 
    }); 
 
});

.editable { 
 
    border: dashed black 2px; 
 
    padding: 10px; 
 
    margin-bottom: 20px; 
 
    
 
} 
 

 
.wysiwyg { 
 
    border: solid red 2px; 
 
} 
 

 
span { 
 
    padding: 5px; 
 
    border: solid black 1px; 
 
    margin-right: 20px; 
 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> 
 
<body > 
 
    <div class="editable" contenteditable=false> 
 
     Just a simple text...   
 
    </div> 
 

 
    <span id="insertB">insert Bold</span><span id="toggleEditor">Toggle editor</span> 
 
</body>

來源

2014-12-28 20:54:11 pwFoo

（簡單）紡織工具欄？

回答

相關問題