Простой редактор в реальном времени для текстового поля в Jquery - PullRequest
Новая
       9

Простой редактор в реальном времени для текстового поля в Jquery

4 голосов
/ 01 июля 2011

Я знаю, что это не совсем вопрос программирования, но я думаю, что SO - лучший сайт, чтобы спросить его, так что, пожалуйста, не голосуйте за меня :) В любом случае, я пытаюсь создать очень простой текстовый редактор, который позволяет изменить цвет и размер шрифта. Это должно быть видно в режиме реального времени. До сих пор я создал div, обновляемый в реальном времени в JQuery, однако я не знаю, как лучше всего делать остальное. Есть ли что-нибудь, что может мне помочь. Я предпочитаю не использовать какой-либо из продвинутых редакторов WYSIWYG, потому что реализация будет слишком сложной. Или это самое разумное решение? Любой совет, пожалуйста? 

var div = $('#mydiv')[0];

$('input').bind('keyup change', function() {
    div.innerHTML = this.value;
});

<form>Text here:<input></form>

Ответы [ 2 ]

3 голосов
/ 01 июля 2011

Разве вы не можете просто использовать для этого contenteditable div?

http://blog.whatwg.org/the-road-to-html-5-contenteditable

И добавить содержимое contenteditable в скрытое поле в форме отправки.

2 голосов
/ 01 июля 2011

Это, вероятно, не совсем то, что вы ищете, но просто хотел показать вам это jsFiddle я сделал быстро

Надеюсь, это даст вам представление о том, что вы искали. 

<div id="mydiv"></div>

<select id="color">
    <option></option>
    <option>Red</option>
    <option>Blue</option>
</select>
<select id="size">
    <option></option>
    <option>10px</option>
    <option>20px</option>
</select>
<form>Text here:<input></form>

JS здесь 

var div = $('#mydiv')[0];

$('input').bind('keyup change', function() {
    div.innerHTML = this.value;
});

$('#color').change(function(){
    var colorSelected = $(this).val();
    $('#mydiv').css('color',colorSelected);
});
$('#size').change(function(){
    var sizeSelected = $(this).val();
    $('#mydiv').css('font-size',sizeSelected );
});
...