引导程序所见即所得：如何在服务器端获取格式化文本？答案

【问题标题】：bootstrap wysiwyg: how to get the formatted text on the server side?引导程序所见即所得：如何在服务器端获取格式化文本？
【发布时间】：2013-07-25 04:28:17
【问题描述】：

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

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

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

【问题讨论】：

标签： twitter-bootstrap wysiwyg

【解决方案1】：

<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']

【讨论】：

suhail，这当然很有帮助。您的示例与 bootstrap-wysiwyg 插件有什么关系？谢谢！
很抱歉，我没有正确回答您的问题。你检查过jsfiddle（jsfiddle.net/suhailvs/vNPAJ/3）？？？它与 bootstrap-wysiwyg 插件一起使用。
当您发帖时，我确实查看了您在 jsfiddle 中的设置。我在您的外部资源中没有看到任何指向 bootstrap-wysiwyg 插件的链接。我们在谈论同一个插件mindmup.github.io/bootstrap-wysiwyg？
github.com/mindmup/bootstrap-wysiwyg 在 GITHUB 中有 210-watch、2879-stars、417-forks。但是github.com/jhollingworth/bootstrap-wysihtml5 有 205-watch、3048-star、532-fork。看起来 jhollingworth 可能会更好。 mindmup 版本很小。但您需要编写 html，还需要包含 fontawesome、jquery 热键。我更新了小提琴jsfiddle.net/suhailvs/vNPAJ/4
感谢新的 jsfiddle 设置。您知道在服务器端直接获取格式化文本的任何方法吗？我已经有了一个设置（类似于你的新示例），但它是一个 DIV 元素，而不是 textarea 或 input。

【解决方案2】：

我发现了如何做到这一点。方法如下。

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

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

希望这对其他人有所帮助。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

在此处设置 id 为以下 div 我已使用 editor 作为 id，并且还设置了一个保存按钮。

<div id="editor">
      Go ahead&hellip;
    </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());

      })

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

【讨论】：