Флажки кнопки Twitter Bootstrap переключают проблему при создании текстового редактора - PullRequest
Новая
       37

Флажки кнопки Twitter Bootstrap переключают проблему при создании текстового редактора

4 голосов
/ 15 марта 2012

Я бы хотел сделать простой текстовый редактор, чтобы люди могли сделать шрифт жирным, курсивом или подчеркнутым. Я немного озадачен тем, как использовать «активный» класс на кнопках начальной загрузки Twitter для переключения функций, таких как добавление различных стилей шрифта к словам в текстовой области.

Вот мой HTML: 

<span class="btn-group" data-toggle="buttons-checkbox">
  <button class="btn btn-bold">Bold</button>
  <button class="btn btn-italics">Italics</button>
  <button class="btn btn-underline">Underline</button>
</span>    

<textarea></textarea>

вот мой JS: 

        $('.btn').click(function(){         
          if($('.btn-bold').hasClass('active')){                
            $('.btn-bold').toggle(
                 function() {
                     $('textarea').val($('textarea').val()+"<span style='font-weight:bold'>");}, 
                 function() {                     
                     $('textarea').val($('textarea').val()+"</span>");
            }); //toggle
          } //if
        });  //click

Я думаю, мне нужно иметь такой код для каждого стиля шрифта: жирный, курсив, подчеркивание, которое я переключаю. Но, как вы видите, то, что я имею для простого выделения текста жирным шрифтом, довольно многословно (не говоря уже о том, что оно не работает), поэтому должен быть лучший способ. Любые мысли будут с благодарностью.

1 Ответ

3 голосов
/ 16 марта 2012

Лучшим способом редактирования контента будет использование атрибута contentEditable, поскольку он имеет отличную поддержку для всех браузеров и большой выбор команд (execCommand), которые можно выполнять для редактирования контента, больше информации здесь на execCommand.

Вот короткая демонстрация, которую я сделал о том, как это сделать:

Демо

Соответствующий код:

JS 

var current;
$(function() {
    $("div[contenteditable]").focus(function() {
        current = this;
    });

    // bold
    $('.btn-bold').click(function() {
        document.execCommand('bold', false, null);
        $(current).contents().focus();
    });

    //italics
    $('.btn-italics').click(function() {
        document.execCommand('italic', false, null);
        $(current).contents().focus();
    });

    //underline
    $('.btn-underline').click(function() {
        document.execCommand('underline', false, null);
        $(current).contents().focus();
    });
});
...