Question

我正在寻找一个简单的解决方案来构建工具栏以插入纺织品标记。

不需要解析器，我只错过要插入的工具栏/按钮。就像bbcode的quicktags一样。

是否有纺织品编辑器/工具栏或通用js类？

插入标记，例如＆＃34; *＆＃34;围绕选定的文字
Toogle标记（如果在

通过一些示例和提示，我可以尝试自己构建它。

我知道MarkitUp，但想使用一个简单的简单工具栏。也许像这里使用的东西......

Answer 1

找到插入标记的解决方案。应该这样做！

谷歌发现的基本示例 JSFiddle demo

我整合了一个JSFiddle演示，其中包含一个contenteditable div和简单插入B-tag＆＃34;按钮＆＃34;。

＆＃13;

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');
        }
    });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

（简单）纺织工具栏？

1 个答案: