Question

我知道这不是一个严格的编程问题，但我认为无论如何SO是最好的网站，所以请不要投票给我:)无论如何，我试图创建一个非常简单的文本框编辑器，允许更改字体颜色和大小。这应该是实时可见的。到目前为止，我已经在JQuery中实时更新了div，但是我不知道剩下的最好的方法是什么。有没有什么可以帮助我。我不想使用任何高级WYSIWYG编辑器，因为实现起来会太困难。或者它是最明智的解决方案？有什么建议吗？

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

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

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

Answer 1

难道你不能只使用一个有意义的div吗？

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

并在表单提交上将contenteditable的内容添加到隐藏字段。

Answer 2

这可能不是您正在寻找的，但只是想向您展示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 );
});

简单的实时WYSIWYG编辑器，用于Jquery中的文本框

2 个答案: