HtmlBox(jquery插件)在ajax调用中不起作用

HtmlBox (jquery Plugin) not working in ajax call

本文关键字:ajax 调用 不起作用 jquery 插件 HtmlBox      更新时间:2023-09-26

我使用的是带有MVC的.net框架4.0。

我在我的页面中包含了HTMLBox(jquery插件),因为我需要一个WYSWYG编辑器来控制文本区域。

我有一个名为Instruction的局部视图,其中我将Textarea控件声明为:

@Html.TextAreaFor(model => model.Instruction, new {@cols = 80, @rows = 10 })

在Ajax调用中,我在页面上填充这个Partial视图。像这样:

 function EditInstruction(progId) 
    {
            var getUserUrl = '@Url.Action("")';
            var courseType =  $('input:radio[name=CourseType]:checked').val();
            var acadYr = $("#AcadYear").val();
            var sem = $("#Sem").val();
            $.ajax({
                url: '@Url.Action("EditInstruction", "CustomizeInstructionsAndCheckList")',
                data: { progId: progId, acadYr: acadYr, sem: sem, courseType: courseType },
                cache: false,
                type: "get",
                // callback handler that will be called on success
                success: function (response, textStatus, jqXHR) {
               $("#PartailLoadForCheckList").html($(response));  
               callAjaxCallsForCascade(getUserUrl.toString());
               TextEditorForDisplay();

                },
                // callback handler that will be called on error
                error: function (jqXHR, textStatus, errorThrown) {
                },
                // callback handler that will be called on completion
                // which means, either on success or error
                complete: function () {
                }
            });
        }
 This is the code for TextEditorForDisplay(), where I initialize my HtmlBox
 function TextEditorForDisplay() {
        mybox = $("#Instruction").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",
        ]
        ],
        icons: 'default',
        skin: 'blue',
        success: function () { alert("Successfully posted"); },
        error: function () { alert("Error posting"); }
        });

    }
The problem I face is that, the HtmlBox works only when it is Loaded first and does not work for the subsequent ajax calls. 

这是我得到的错误:TypeError: d.iframe.contentWindow is null

有人能帮我吗?

感谢

TinyMCE.MVC

TinyMCE HTML文本编辑器的MVC部分编辑器模板

PM>安装软件包TinyMCE.MVC

[UIHint("tinymce_jquery_full"), AllowHtml]
public string Instruction { get; set; }