如何使用文本编辑器设置大文本区域？ [英] How to set up large text area with text editor?

问题描述

我刚开始学习Bootstrap和ASP.Net MVC，有点卡住了。



这是我的看法：



@model Vrtic_2546.Models.Dogadjanja



@ {

ViewBag.Title =Create;

布局=〜/ Views / Shared / _Layout.cshtml;

}



< h2>创建< / h2>





@using（Html.BeginForm（））

{

@ Html.AntiForgeryToken（）



< div class =form-horizo​​ntal>

< h4> ; Dogadjanja< / h4>

< hr />

@ Html.ValidationSummary（true，，new {@class =text-danger}）

< div class =form-group>

@ Html.LabelFor（model => model.KorisnikID，KorisnikID，htmlAttributes：new {@ class =control-label col-md-2}）

< div class =col-md-10>

@ Html.DropDown列表（KorisnikID，null，htmlAttributes：new {@class =form-control}）

@ Html.ValidationMessageFor（model => model.KorisnikID，，new {@class =text-danger}）

< / div>

< / div>



< div class =form-group>

@ Html.LabelFor（model => model.Naziv，htmlAttributes：new {@class =control-label col-md-2}）

< div class =col-md-10>

@ Html.EditorFor（model = > model.Naziv，new {htmlAttributes = new {@class =form-control}}）

@ Html.ValidationMessageFor（model => model.Naziv，，new {@ class =text-danger}）

< / div>

< / div>



< div class =form-group>

@ Html.LabelFor（model => model.Opis，htmlAttributes：new {@class =control-label col-md-2 }）

< div class =col-md-10>

@ Html.TextAreaFor（model => model.Opis，new {rows = ，cols =， style =width：90％;身高：90px;}}

@ Html.ValidationMessageFor（model => model.Opis，，new {@class =text-danger}）

< / div>

< / div>



< div class =form-group>

@ Html.LabelFor（model => model.Datum，htmlAttributes：new {@class =control-label col-md-2}）

< div class = col-md-10>

@ Html.EditorFor（model => model.Datum，new {htmlAttributes = new {@class =form-control}}）

@ Html.ValidationMessageFor（model => model.Datum，，new {@class =text-danger}）

< / div>

< / div>



< div class =form-group>

@ Html.LabelFor（ model => model.Text，htmlAttributes：new {@class =control-label col-md-2}）

< div class =col-md-10>

@ Html.TextAreaFor（model => model.Text，new {rows =5，cols =56，style =}）

@ Html.ValidationMessageFor（model => model.Text，，new { @class =text-danger}）

< / div>

< / div>

< / div>



< div class =form-group>

< div class =col-lg-offset-2 col- md-10>

& lt; input type =submitvalue =Createclass =btn btn-default/>

< / div>

< / div>



}



< ; div>

@ Html.ActionLink（返回列表，索引）

< / div>



@section脚本{

@ Scripts.Render（〜/ bundles / jqueryval）

}



这就是它呈现的方式：

图片



所以，我需要设置大的文本文本区域使用文本编辑器，仍然保持左侧对齐。



我尝试过：



我尝试了几个Bootstrap类（col-lg10..etc），定义了行和列，行确实应用但列没有。我不确定问题出在哪里，无法掌握，所以任何帮助都会非常感激。

解决方案

制作< textarea> 更高只是增加行参数的情况。



至于扩大范围：首先将 @class =form-control添加到属性中。这会占用父元素的整个宽度，就像其他控件一样：

 <   div     class   =  form-group >  
 @ Html.LabelFor（model => model.Text，htmlAttributes：new {@class =control-label col-md-2}）
 <   div     class   =  col-md-10 >  
 @ Html.TextAreaFor（model => model.Text，new {rows =10，cols =56，@ class =form-control}）
 @ Html.ValidationMessageFor（model = > model.Text，，new {@class =text-danger }）
 <   / div  > ;  
 <   / div  >  

然后，如果你想让它填满整行的宽度，你需要删除 col - * 声明，并将其移出 form-horizo​​ntal 容器：

 <   / div  >  <！ -     form-horizo​​ntal    - >   
 <   div  >  
 <  二v     class   =  form-group >  
 @ Html.LabelFor（model => model.Text，htmlAttributes：new {@class =control-label}）
 <   div  >  
 @ Html.TextAreaFor（model => model.Text，new {rows =10，cols =56， @class =form-control}）
 @ Html.ValidationMessageFor（model => model.Text，，new {@class =text-danger}）
 <   / div  >  
 <   / div  >  
 <   / div  >  

I'm just started learning Bootstrap and ASP.Net MVC, a got little stuck.

This is my view:

@model Vrtic_2546.Models.Dogadjanja

@{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Create</h2>


@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
<h4>Dogadjanja</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.KorisnikID, "KorisnikID", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("KorisnikID", null, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.KorisnikID, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.Naziv, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Naziv, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Naziv, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.Opis, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextAreaFor(model => model.Opis, new { rows = "", cols = "", style = "width: 90%; height: 90px;" })
@Html.ValidationMessageFor(model => model.Opis, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.Datum, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Datum, new {htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Datum, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.Text, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextAreaFor(model => model.Text, new { rows = "5", cols = "56", style = "" })
@Html.ValidationMessageFor(model => model.Text, "", new { @class = "text-danger" })
</div>
</div>
</div>

<div class="form-group">
<div class="col-lg-offset-2 col-md-10">
&lt;input type="submit" value="Create" class="btn btn-default" />
</div>
</div>

}

<div>
@Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}

And this is how it renders:
Picture

So, I need set up large "Text" textarea with text editor, a still keep it aligned from the left side.

What I have tried:

I tried few Bootstrap classes(col-lg10..etc), defined rows and columns, rows do get applied but columns don't. I'm not sure where is the problem is, can't grasp it, so any kind of help would be greatly appreciated.

解决方案

Making the <textarea> taller is simply a case of increasing the rows parameter.

As to making it wider: start by adding @class = "form-control" to the attributes. That will make it take up the full width of the parent element, as the other controls do:

<div class="form-group">
    @Html.LabelFor(model => model.Text, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.TextAreaFor(model => model.Text, new { rows = "10", cols = "56", @class = "form-control" })
        @Html.ValidationMessageFor(model => model.Text, "", new { @class = "text-danger" })
    </div>
</div>

Then, if you want it to fill the entire width of the row, you'll need to remove the col-* declarations, and move it outside of the form-horizontal container:

</div> <!-- form-horizontal -->
<div>
    <div class="form-group">
        @Html.LabelFor(model => model.Text, htmlAttributes: new { @class = "control-label" })
        <div>
            @Html.TextAreaFor(model => model.Text, new { rows = "10", cols = "56", @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Text, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

这篇关于如何使用文本编辑器设置大文本区域？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！