WYSIWYG Где можно ограничить текст / высоту - PullRequest
Новая
       15

WYSIWYG Где можно ограничить текст / высоту

0 голосов
/ 01 октября 2011

Хорошо, поэтому я попробовал tinyMCE.

После неудачи и большого количества исследований о том, как ограничить содержание редакторов, я ищу другие альтернативы.

Этонужен для WYSIWYG:

  • Возможность иметь следующие функции / кнопки: полужирный, курсив, подчеркивание, список быков, элементы управления таблицей
  • Возможность ограничения ввода.Если я установлю для редактора ширину 300 x 500 высотой, а вы наберете больше, чем высота, он НЕ должен применять скроллер, и вы не сможете писать больше.
  • Возможность установить несколько редакторов на одной странице

Какой редактор WYSIWYG может удовлетворить мои потребности?

Ответы [ 2 ]

0 голосов
/ 05 октября 2011

Редактор TinyMCE или ck должен соответствовать вашим потребностям.

Что касается вопроса прокрутки, попробуйте использовать jquery и событие нажатия клавиши, чтобы проверить длину содержимого в div, содержащем редактор.Вы также можете комбинировать это со счетчиком символов на экране для динамического отображения количества символов, оставленных пользователем. 

charCount = $(this).val().length;
0 голосов
/ 01 октября 2011

Простой подход состоит в том, чтобы использовать элемент div и поместить содержимое редактора в этот div.DIV должен был установить ширину (с использованием CSS). 

<div class="calculation_preview"></div>

И CSS должно быть что-то вроде: 

div.calculation_preview {
   width: 200px;
   visibility: hidden;
   position: absolute;
   top: 0px;
   left:0px;
}

После каждого нажатия клавиши, вы можете измерить высотуdiv (используя функцию offsetHeight на div).Если он слишком высокий, удалите последний введенный пользователем символ.

Чтобы восстановить предыдущее содержимое, вы можете объявить переменную javascript, например: 

var savedContent = "";

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

// Get current editor content:
var content = tinyMCE.activeEditor.getContent({format : 'raw'});
// Measure the new height of the content:
var measurer = document.getElementById("calculation_preview");
measurer.innerHTML = content;
if(measurer.offsetHeight > 100) {
   // Content is too big.. restore previous:
   tinyMCE.activeEditor.setContent(savedContent, {format : 'raw'});
} else {
   // Content height is ok .. save to variable:
   savedContent = content;
}
...