Команда Exec в ContentEditable div

Я пытался создать редактор WYSIWYG, используя contenteditable div. Я пытался вычеркнуть выделенный текст с помощью ExecCommand. Это похоже не работает должным образом. Я тестировал в IE. Вот код. Пожалуйста, помогите мне идентифицировать ошибку, если она есть в программе.Команда Exec в ContentEditable div

<html> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" 
    type="text/javascript"></script>     
    <style> 
    #rteToolBar span{ 
    cursor:pointer; 
    } 
    #rteToolBar span:hover{ 
    background:#3535ff; 
    } 
</style> 
</head>

<div id="rteWrapper" > 
    <div id="rteToolBar" style="border: thin solid black"> 
    <span role="BOLD" >B</span> 
<span role="ITAL">I</span> 
<span role="TABL">Table</span> 
    </div> 
    <div id="rte" contentEditable="true" style="border: thin solid red"> 
    asdfla sdf asdf asdfas 
fas <b>fasldf</b> asfdsadf<br/> 
asdfla sdf asdf asdfas 
fas fasldf asfdsadf 
</div>

var range,rte,caretoffset; 
    $(document).ready(function(){ 
    var rteWrapper = $('#rteWrapper'); 
    var toolBar = $('#rteToolBar'); 
     rte = $('#rte'); 
    $(toolBar).find('span').live('click',function(){ 
     rte.focus(); 
     var _this = $(this); 
     var role = _this.attr('role'); 

      switch(role){ 
      case 'BOLD': 
      var range1 = document.selection.createRange(); 

     range1.execCommand('bold',false,null); 
      break; 
      case 'ITAL': 
      break; 

      } 

    }); 
    }); 



</script>

источник

2013-03-14 Dushyanth

В IE, нажав пролет разрушает существующий выбор. К моменту возникновения события click выбор отсутствует.

Специфическое для IE решение - сделать ваши пролеты unselectable. Вы можете сделать это, добавив атрибут unselectable каждому:

<span role="ITAL" unselectable="on">I</span>

Другая возможность заключается в том, чтобы использовать mousedown событие вместо этого, но тогда ваш выбор будет все равно в конечном итоге уничтожены после выполнения вашей команды.

И, наконец, нет необходимости создавать TextRange и вызывать его метод execCommand(). Вместо этого вы можете позвонить document.execCommand(). Это сокращает код и делает его совместимым со всеми основными браузерами, а не только IE:

document.execCommand('bold', false, null);

источник

2013-03-14 09:21:42

Большое спасибо Tim.However я найти всё слово быть жирным шрифтом, даже если я выбрать часть word.One более вопрос что я запускаю это в IE, но ожидаю, что полужирным я не смогу получить другую команду Идентификаторы, такие как «IDM_CUT» execCommand, чтобы работать. Есть ли какая-то особая причина для этого? – Dushyanth

'IDM_CUT' не работает с интерфейсом JavaScript. Вместо этого есть команда 'Cut', но это не будет работать во многих браузерах (включая некоторые варианты/конфигурации IE, я думаю) из-за проблем с безопасностью. Страница MSDN: http://msdn.microsoft.com/en-us/library/hh801227%28v=vs.85%29.aspx. Что касается всего слова, выделенного жирным шрифтом, я никогда не видел этого раньше. У вас есть страница с примерами? –

Привет, Тим вот код http://jsfiddle.net/dushyanth/PrrRE/4/. Еще один вопрос, который у меня есть, заключается в том, что я могу вставлять таблицу в позицию каретки, но проблема в том, что я не могу перейти к следующей строке после таблицы. Я имею в виду после того, как таблица вставлена, и пользователь хочет написать кое-что ниже таблица, курсор не будет туда. Он всегда находится в последнем «td» таблицы. – Dushyanth

Команда Exec в ContentEditable div

ответ

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