(Simple) textile toolbar?

Question

(Simple) textile toolbar?

199 Views Asked by pwFoo At 27 December 2014 at 20:57

I'm searching for a simple solution to build a toolbar to insert textile markup.

No parser is needed, I only miss a toolbar / buttons to insert. Like quicktags for bbcode.

Is there a textile editor / toolbar or a universal js class?

Insert markup like "*" around selected text
Toogle markup (remove if inserted before

With some examples and hints I could try to build it myself.

I know MarkitUp, but would like to use a minimal and simple toolbar. Maybe something like used here...

Original Q&A

There are 1 best solutions below

**pwFoo** · Answer 1 · 2014-12-28T20:54:11.157000

Found a solution to insert markup. Should do it!

Basic example found with google JSFiddle demo

I put together a JSFiddle demo with a contenteditable div and simple insert B-tag "button".

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>

(Simple) textile toolbar?

There are 1 best solutions below

Related Questions in EDITOR

Related Questions in TOOLBAR

Related Questions in TEXTILE

Trending Questions

Popular # Hahtags

Popular Questions