Jquery中文本框的简单实时所见即所得编辑器答案

【问题标题】：Simple real time WYSYWIG editor for text box in JqueryJquery中文本框的简单实时所见即所得编辑器
【发布时间】：2011-06-30 22:49:23
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript jquery editor wysiwyg

【解决方案1】：

你不能为此使用一个可内容编辑的 div 吗？

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

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

【讨论】：

没听说过，我去看看

【解决方案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 );
});

【讨论】：

哇，这太棒了，正是我想要的。好的！我也发现了这个 contenteditable 的东西，但是某些浏览器可能不支持它。非常感谢！
是否可以将所有设置（颜色等）存储在mysql中？
使用 wysywig 编辑器，您可以将代码存储在 mysql 中并稍后检索，我认为这将是一个问题，因为它不会创建任何代码，它只会改变网站上的外观。