我正在学习Bootstrap,并希望有一个所见即所得的编辑器。我找到了bootstrap-wysiwyg并希望使用它。
http://mindmup.github.io/bootstrap-wysiwyg/
但是,在提交表单时,我无法弄清楚如何在服务器端获取格式化文本。
我发现了如何做到这一点。这是怎么回事。
需要隐藏的输入或textarea字段。此字段可以将name属性设置为对象字段的名称。它的名字必须是服务器端所期望的。
使用JQuery将表单提交事件处理程序附加到包含wysiwyg编辑器的表单。处理程序从wysiwyg编辑器获取文本并将其设置为隐藏字段的值。
希望这有助于其他人。
<textarea class="textarea" name="mytext" placeholder="Enter text ..." style="width: 810px; height: 200px"></textarea>
使用val()
$('.textarea').wysihtml5();
$('.textarea').val();
http://jsfiddle.net/suhailvs/vNPAJ/3/
你可以把它作为帖子
request.POST['mytext']
这是一个老线程,但也许这个技巧将有助于其他人。
正如courious1所提到的,我们需要在表单上创建一个隐藏的textarea(例如:id = hidden-editor)。并使用下面的javascript将#editor中的值传递给我们的#seed-编辑器:
//-- submit button clicked
$('#submit-btn').click(function(){
$('#hidden-editor').html(
$("#editor").html()
);
});
我终于想出了这个解决方案。没有设法使onclick工作...但实时修改是方便的。谢谢你的想法。
$('#editor').bind("DOMSubtreeModified",function(){
$('#you_hidden_textarea').html(
$("#editor").html()
);
});
以下是如何获得bootstrap-wysiwyg的编辑内容
在这里将id设置为下面的div我使用了编辑器作为id,我也设置了一个保存按钮。
<div id="editor">
Go ahead…
</div>
<a class="btn" data-edit="bold" id="saveBtn" title="Save"><i class="icon-save"></i></a>
然后
$('#editor').wysiwyg();
$('#saveBtn').on('click',function(){
console.log($('#editor').html());
})
希望这将有助于其他人