(Простая) текстильная панель инструментов?

-1

Я ищу простое решение для создания панели инструментов для вставки текстильной разметки.(Простая) текстильная панель инструментов?

Отсутствует синтаксический анализатор, я пропускаю только панель инструментов/кнопок для вставки. Подобно quicktags для bbcode.

Есть ли текстильный редактор/панель инструментов или универсальный класс js?

Вставка разметка, как «*» вокруг выделенного текста
Toogle разметки (удалить, если вставлено перед

С некоторыми примерами и намеками я мог бы попытаться построить его сам.

Я знаю, MarkitUp, но хотел бы использовать минимальную и простую панель инструментов. Возможно, что-то вроде использования здесь ...

источник

2014-12-27 pwFoo

Найдено решение для вставки разметки. Должен это сделать! – pwFoo

Нашли решение для вставки метки вверх. Должен это сделать!

Базовый пример найден с помощью Google 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

(Простая) текстильная панель инструментов?

ответ

Смежные вопросы