简单的实时WYSYWIG编辑器（Jquery中的文本框）

Question

我知道这不是一个严格的编程问题，但我认为SO是最好的网站来提问，所以请不要降低我的投票。无论如何，我正在尝试创建一个非常简单的文本框编辑器，允许更改字体颜色和大小，并且应该实时可见。到目前为止，我已经使用JQuery创建了一个实时更新的div，但是我不知道完成其余部分的最佳方法。是否有任何工具能帮助我？我不想使用任何高级的所见即所得编辑器，因为实施起来会很困难。或者它是最明智的解决方案吗？请给予任何建议。

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

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

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

- Vonder

Answer 1

你不能只是使用一个contenteditable的div来实现这个吗？

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

在表单提交时，将contenteditable的内容添加到一个隐藏字段中。

- PeeHaa

---

从未听说过，但我会看一下。 - Vonder

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 );
});

- Amin Eshaq

---

哇，这太棒了，正是我在寻找的！太好了！我还发现了这个可编辑内容的东西，但可能不受某些浏览器的支持。非常感谢！ - Vonder

能否将其存储在MySQL中并保留所有设置（颜色等）？ - Vonder

使用所见即所得编辑器，您可以将代码存储在MySQL中，并稍后检索它。但是，在这里，我认为会有问题，因为它不会创建任何代码，它只会改变网站上的外观。 - Vonder