twitter-bootstrap bootstrap 所见即所得：如何在服务器端获取格式化文本？

bootstrap wysiwyg: how to get the formatted text on the server side?

提问by curious1

I am learning Bootstrap and would like to have a wysiwyg editor. I found bootstrap-wysiwygand want to use it.

我正在学习 Bootstrap 并且想要一个所见即所得的编辑器。我找到了bootstrap-wysiwyg并想使用它。

http://mindmup.github.io/bootstrap-wysiwyg/

http://mindmup.github.io/bootstrap-wysiwyg/

However, I cannot figure out how to get formatted text on the server-side when a form is submitted.

但是，我无法弄清楚提交表单时如何在服务器端获取格式化文本。

采纳答案by curious1

I found out how to do this. Here is how.

我发现了如何做到这一点。这是如何。

A hidden input or textarea field is needed. This field may have the name attribute set to the name of an object's field. Its name must be something the server-side expects.

需要隐藏的输入或文本区域字段。该字段的 name 属性可能设置为对象字段的名称。它的名称必须是服务器端期望的名称。

Use JQuery to attach a form submit event handler to the form containing the wysiwyg editor. The handler takes the text from the wysiwyg editor and set it as the hidden field's value.

使用 JQuery 将表单提交事件处理程序附加到包含所见即所得编辑器的表单。处理程序从所见即所得编辑器中获取文本并将其设置为隐藏字段的值。

Hope this helps to someone else.

希望这对其他人有帮助。

回答by suhailvs

<textarea class="textarea" name="mytext" placeholder="Enter text ..." style="width: 810px; height: 200px"></textarea>

use val()

使用 val()

$('.textarea').wysihtml5();

$('.textarea').val();

http://jsfiddle.net/suhailvs/vNPAJ/3/

http://jsfiddle.net/suhailvs/vNPAJ/3/

you can get it as post

你可以把它作为帖子

request.POST['mytext'] 

回答by Khairulnizam Dahari

This is an old thread, but maybe this tips will help others.

这是一个旧线程，但也许这个提示会对其他人有所帮助。

As per mentioned by courious1, we need to create a hidden textarea (eg: id=hidden-editor) on our form. and pass the value in #editor to our #hidden-editor using javascript below:

正如 courious1 所提到的，我们需要在我们的表单上创建一个隐藏的文本区域（例如：id=hidden-editor）。并使用下面的javascript将#editor中的值传递给我们的#hidden-editor：

//-- submit button clicked
$('#submit-btn').click(function(){
    $('#hidden-editor').html(
        $("#editor").html()
    );
});

回答by Pierre CHARLES

I finally came up with this solution. Didn't manage to make the onclick work... but the realtime modification is handy. Thanks for the ideas.

我终于想出了这个解决方案。没有设法使 onclick 工作......但实时修改很方便。谢谢你的想法。

$('#editor').bind("DOMSubtreeModified",function(){
                $('#you_hidden_textarea').html(
                        $("#editor").html()
                );
            });

回答by Nisal Edu

Following is how to get editor content of bootstrap-wysiwyg

以下是如何获取bootstrap-wysiwyg 的编辑器内容

Set id to following div in here I have used editoras id and I also set a save button.

在这里将 id 设置为以下 div 我使用了编辑器作为 id，我还设置了一个保存按钮。

<div id="editor">
      Go ahead&hellip;
    </div>

<a class="btn" data-edit="bold" id="saveBtn" title="Save"><i class="icon-save"></i></a>

Then

然后

$('#editor').wysiwyg();

$('#saveBtn').on('click',function(){        

       console.log($('#editor').html());

      })

Hope this will help someone else in future

希望这会在将来对其他人有所帮助