KindEditor富文本怎么嵌入到.NET MVC B/S开发框架

KindEditorhtml富文本怎么嵌入到.NET MVC B/S开发框架,该应用哪些JS文件和CSS文件,还有怎么通过javascript脚本给它赋值?知道了原来是如此简单!

引入KindEditor JS脚本
为TextArea创建富文本框
JS脚本为文本字段赋值


引言

以前有很多客户在问我们的web开发框架是否支持html输入格式的文本框,在B/S开发框架中是支持该类富文本框的,小编写的这些文字都是在开发框架中的富文本中编辑的。那么今天小编带大家来一探KindEditor富文本的究竟。

引入KindEditor JS脚本

 @Html.RenderEditorScripts()

浏览器渲染到html文件后是这样的:

<script src="/content/kindeditor/kindeditor-min.js"></script>
<script src="/content/kindeditor/lang/zh_CN.js"></script>

为TextArea创建富文本框

var editor = null;
KindEditor.ready(function (K) {
    editor = K.create('textarea[name="ArticleContent"]', {
	allowFileManager: true,
	width: "100%",
	height:500,
	afterBlur: function () { this.sync(); }
    });
});

上段JS代码为Name='ArticleContent'的字段绑定KindEditor富文本框,数据模型中ArticleContent字段是string类型,数据库数据类型可为varcher、nvarchar、text等字符文本类型。

绑定后在浏览器F12查看元素代码,看到渲染出来的代码如图:

element code

对应B/S开发框架中View层代码如下:

        <div class="col-md-10">
            @Html.TextAreaFor(model => model.ArticleContent, new { @class = "form-control" })
            @Html.ResourceValidationMessageFor(model => model.ArticleContent, "", new { @class = "text-danger" })
        </div>

JS脚本为文本字段赋值


到此为止一个MVC框架的字段富文本绑定完成,已经能正常的增删改查ArticleContent字段的值了。如果我们需要通过JavaScript脚本动态的为该字段赋值,我们该怎么办?知道的其实很简单,我们只需要通过富文本的html函数赋值即可。

editor.html(fldata);//fldata为我们需要动态赋值的html内容

总结

KindEditorhtml富文本怎么嵌入到.NET MVC B/S开发框架,该应用哪些JS文件和CSS文件,还有怎么通过javascript脚本给它赋值?知道了原来是如此简单!


网站&系统开发技术学习交流群:463167176

本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动,共创和谐网络环境。
转载请注明:文章转载自:华晨软件-云微开发平台 » KindEditor富文本怎么嵌入到.NET MVC B/S开发框架
本文标题:KindEditor富文本怎么嵌入到.NET MVC B/S开发框架
本文地址:http://www.hocode.com/OrgTec/UI/0013.html

相关文章: web框架UI系列--MVC常用控件讲解

电话
电话 18718672256

扫一扫
二维码