带有表单提交的htmlbox发布值答案

【问题标题】：htmlbox post value with form submit带有表单提交的htmlbox发布值
【发布时间】：2011-03-14 20:05:41
【问题描述】：

我正在使用 htmlbox jquery 插件，如果我在刚刚输入一些文本但未使用任何工具栏按钮时提交表单，则提交的是旧数据而不是新编辑的文本。当我首先点击工具栏按钮（例如使某些文本加粗）时，正在提交新文本。

我看到插件有 get_html 和 get_text 功能：我应该在提交之前先查询所见即所得的编辑器还是我还缺少其他东西？

插件网站上给出的示例使用自定义提交方法，我更喜欢没有一个控制器方法服务器端 (asp mvc) 仅用于发布一个文本字段，我更喜欢使用常规 <input type=submit ..> 发布完整表单

编辑：这是一种解决方法，但感觉不对

$('#form').submit(function() { (hb.val(hb.get_html())); });

【问题讨论】：

一种廉价的方法是模拟单击工具栏按钮。
在我看来，插件在对其采取行动之前并没有真正初始化自己。也许您缺少初始化选项？你什么时候初始化htmlbox？请发布您的代码...

标签： jquery html plugins post

【解决方案1】：

要使用 HtmlBox 的内置函数，请执行以下操作：将 htmlbox() 的返回值分配给一个变量，然后使用该变量调用 HtmlBox 的方法（例如 hb_full.get_html(); 或任何其他方法）。请参阅下面的代码示例。

<script type="text/javascript">
    var hb_full;
$(document).ready(function(){
        hb_full = $("#htmlbox_full").css("height", "300").css("width", "100%").htmlbox({
            toolbars: [
                [
                    // Cut, Copy, Paste
                    "separator", "cut", "copy", "paste",
                    // Undo, Redo
                    "separator", "undo", "redo",
                    // Bold, Italic, Underline, Strikethrough, Sup, Sub
                    "separator", "bold", "italic", "underline", "strike", "sup", "sub",
                    // Left, Right, Center, Justify
                    "separator", "justify", "left", "center", "right",
                    // Ordered List, Unordered List, Indent, Outdent
                    "separator", "ol", "ul", "indent", "outdent",
                    // Hyperlink, Remove Hyperlink, Image
                    "separator", "link", "unlink", "image"
                ],
                [
                    // Show code
                    "separator", "code",
                            // Formats, Font size, Font family, Font color, Font, Background
                    "separator", "formats", "fontsize", "fontfamily",
                    "separator", "fontcolor", "highlight",
                ],
                [
                    //Strip tags
                    "separator", "removeformat", "striptags", "hr", "paragraph",
                    // Styles, Source code syntax buttons
                    "separator", "quote", "styles", "syntax"
                ]
            ],
            about: true, // "false" to hide About button
            idir: "./img/HtmlBoxImg/",
            icons: "default", //all options: "default", "silk"
            skin: "blue"      //all options: "silver", "blue", "green", "red"
        });
    });

    function getHtmlFromEditor()
    {
        var HtmlFromEditor = hb_full.get_html();
        alert(HtmlFromEditor);
    }
    </script>

    <textarea id="htmlbox_full"></textarea>
<button onclick="getHtmlFromEditor();">Display HTML</button>

【讨论】：