@{
    CurrentUser user = new CurrentUser();
    string table = Request.QueryString["table"];
    int tableId = ViewBag.TableId;
    IEnumerable<dynamic> fieldData = Html.GetFieldList((string)ViewBag.Table, "Add", user, PageAdmin.Common.FromEnum.Guest);
}
<script type="text/javascript" src="/incs/jquery/jquery3.3.1.min.js"></script>
<!-- 主题文件 -->
<link rel="stylesheet" href="/incs/codemirror/theme/3024-night.css">
<!-- 引入CodeMirror核心文件 -->
<link href="/incs/codemirror/lib/codemirror.css" rel="stylesheet" type="text/css">
<link href="/incs/codemirror/addon/display/fullscreen.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/incs/codemirror/lib/codemirror.js"></script>

<!-- 因为HTML混合语言依赖Javascript、XML、CSS语言支持，所以都要引入 -->
<script type="text/javascript" src="/incs/codemirror/mode/javascript/javascript.js"></script>
<script type="text/javascript" src="/incs/codemirror/mode/xml/xml.js"></script>
<script type="text/javascript" src="/incs/codemirror/mode/css/css.js"></script>
<script type="text/javascript" src="/incs/codemirror/mode/htmlmixed/htmlmixed.js"></script>

<!--groovy代码高亮-->
<script src="/incs/codemirror/mode/groovy/groovy.js"></script>

<!-- 下面分别为显示行数、括号匹配和全屏插件 -->
<script type="text/javascript" src="/incs/codemirror/addon/selection/active-line.js"></script>
<script type="text/javascript" src="/incs/codemirror/addon/edit/matchbrackets.js"></script>
<script type="text/javascript" src="/incs/codemirror/addon/display/fullscreen.js"></script>
<style>
    .CodeMirror {
        border: 1px solid #999;
        font-size: 14px;
        line-height: 1.5;
    }
</style>
<div class="main" id="main">
    <div>
        <div class="controls" style="padding-bottom:10px">
            <span class="help-block">以下表单代码可用于前端投稿，复制html到模板页面中做成模板页即可</span>
        </div>
        <textarea id="content" name="content">
        
    <!--需要先引用以下js文件，并保证每个页面只引用一次,多余脚本代码请自行优化或删除-->
        <link rel="stylesheet" href="/Incs/elementUi/2.13/element-ui.css" />
        <script src="~/Incs/vue/2.6.11/vue.min.js?v=4.0.10" type="text/javascript"></script>
        <script src="/Incs/elementUi/2.13/element-ui.js" type="text/javascript"></script>
        <script src="/FrameUi/1.0/basic.js" type="text/javascript"></script>
        <script src="/FrameUi/1.0/ui.js" type="text/javascript"></script>
        <script src="/FrameUi/1.0/vueExtend.js" type="text/javascript"></script>
        <script src="/FrameUi/1.0/validateForm.js" type="text/javascript"></script>
        <script src="~/Incs/UEditor/ueditor.config.js" type="text/javascript"></script>
        <script src="~/Incs/UEditor/ueditor.all.min.js" type="text/javascript"></script>
        <style>
            .el-form-item__content .edui-default {
                line-height: 20px;
            }

            .el-upload-hide-btn .el-upload {
                display: none !important
            }

            .el-form input[type="file"] {
                display: none !important;
            }
</style>
        <div id="@(table)Form">
        <el-form label-width="150px" label-position="left">
        <el-form-item label="所属栏目*">
        <ui-cascader v-model="formData.ColumnId" placeholder="请选择栏目" :options="@("@")Html.GetColumnTreeJson(@tableId,null,PageAdmin.Common.FromEnum.Guest)" :props="{ expandTrigger: 'hover',multiple:false }" v-validate="{data:formData.ColumnId,dataType:'*',min:1,nullMsg:'请选择栏目!'}"></ui-cascader>
        <span class="help-block"></span>
                        </el-form-item>
                        @{
                            string beforeSubmitJs = "";
                            var data = new ViewDataDictionary();
                            data.Add("from", PageAdmin.Common.FromEnum.Guest);
                            data.Add("fieldPrefix", "formData");
                            if (fieldData != null)
                            {
                                foreach (var row in fieldData)
                                {
                                    beforeSubmitJs += row.BeforeSubmitJs;
                                    Html.RenderPartial("~/Areas/E/Views/CustomForm/FormPartial.cshtml", (object)row, data);
                                }
                            }
                        }
        <el-form-item label="验证码*">
        <el-input v-model.trim="formData.verificationCode" maxlength="50" placeholder="验证码" v-validate="{data:formData.verificationCode,dataType:'*',nullMsg:'请填写验证码!'}">
        <template slot="append">
        <div style="width:100px"><ui-verification-code-image ref="verificationCodeImg" change src="/E/VerificationCode/?width=100&height=30"></ui-verification-code-image></div>
                                </template>
                            </el-input>
                        </el-form-item>
        <el-form-item>
        <el-button type="primary" size="small" v-on:click="postSubmit">提交</el-button>
                        </el-form-item>
                    </el-form>
                </div>
        <script type="text/javascript">
            var @(table)FormData =@Html.RawModel((string)Model ?? "{}");
            @(table)FormData.Guid = guid();
            @(table)FormData.verificationCode = "";
            new Vue({
                              el: "#@(table)Form",
                              data:{
                                  formData:@(table)FormData
                              },
                              created: function () {

                                  this.formData.Guid = guid();
                                  this.formData.verificationCode = "";
                              },
                              methods: {
                                  postSubmit: function () {
                                       var _this = this;
                                       var validated = this.validateForm({tipsStyle:0,beforeSubmit: function () { return _this.beforeSubmitExecute() }});//表单验证
                                        if (validated)
                                        {
                                            this.submit({ url: "/e/InfoData/Add?table=@table", data: _this.formData, showSuccessMsg: false, failCallback: _this.failSubmit, success: _this.submitSuccess});
                                        }
                                  },
                                  beforeSubmitExecute:function(){
                                      @Html.Raw(beforeSubmitJs)
                                      return true;
                                   },
                                  failSubmit:function ()
                                  {
                                      var _this = this;
                                      if (_this.$refs.verificationCodeImg != undefined) {
                                          _this.$refs.verificationCodeImg.change();//改变验证码。
                                      }
                                  },
                                  submitSuccess:function ()
                                  {
                                      var _this = this;
                                      //回调内容，以下内容可根据需求自行修改。
                                      _this.formData.Guid = guid();//在有附属表的情况下，多次提交必须更新Guid属性值，否则附属表数据会混乱
                                      //重置验证码
                                      if (_this.$refs.verificationCodeImg != undefined) {
                                          _this.$refs.verificationCodeImg.change();//改变验证码。
                                      }
                                      alert("提交成功,感谢您的支持!")
                                      location.href = location.href;
                                  }
                              },
                        });

                </script>
        </textarea>
    </div>
    <div class="footer-submit-bar" style="padding-left:12px">
        <button type="button" class="el-button el-button--default" onclick="closeSelf()"><!----><!----><span>关闭</span></button>
    </div>
</div>
<script type="text/javascript">
    var notRead = "@ViewBag.NotRead";
    var formData = { name: "@Request.QueryString["name"]", path: "@Request.QueryString["path"]", content: "" };
    var winHeight = $(window).height();
    if (notRead == "true") {
        $("#content").val("您好，此文件格式被禁止编辑！");
        $("#btnPost").attr("disabled", "disabled");
    }
    var mixedMode = {
        name: "htmlmixed",
        scriptTypes: [{
            matches: /\/x-handlebars-template|\/x-mustache/i,
            mode: null
        },
        {
            matches: /(text|application)\/(x-)?vb(a|script)/i,
            mode: "vbscript"
        },
        {
            matches: /(text|application)\/(x-)?vb(a|script)/i,
            mode: "vbscript"
        }]
    };
    var editor = CodeMirror.fromTextArea(document.getElementById("content"), {
        mode: mixedMode,
        lineNumbers: true,     // 显示行数
        selectionPointer: true, //选择指针
        indentUnit: 4,         // 缩进单位为4
        styleActiveLine: true, // 当前行背景高亮
        matchBrackets: true,   // 括号匹配
        mode: 'htmlmixed',     // HMTL混合模式
        lineWrapping: false,    // 自动换行
    });
    editor.setOption("extraKeys", {
        // Tab键换成4个空格
        Tab: function (cm) {
            var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
            cm.replaceSelection(spaces);
        },
        // F11键切换全屏
        "F11": function (cm) {
            cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        },
        // Esc键退出全屏
        "Esc": function (cm) {
            if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
        }
    });
    editor.setSize('100%', (winHeight - 130) + "px");
    var $editorBgBtn = $("#EditorBgBtn");
    var codeEditorBg = getLocalStorage("CodeEditorBg");
    function SetTheme() {
        var $this = $editorBgBtn;
        if ($this.prop("checked")) {
            editor.setOption("theme", "3024-night");
            SetLocalStorage("CodeEditorBg", "black");
        }
        else {
            editor.setOption("theme", "default");
            SetLocalStorage("CodeEditorBg", "default");
        }
    }
    $editorBgBtn.on("click", function () {
        SetTheme();
    });
    if (codeEditorBg == "black") {
        $editorBgBtn.prop("checked", true);
        SetTheme();
    }

    function setValue() {
        formData.content = editor.getValue();
    }

</script>