期货大赛项目|八,ueditor的应用

本文介绍如何配置和使用百度开发的UEditor富文本编辑器,包括环境搭建、参数配置及基本操作。

百度开发的富文本编辑器还是很不错的,可以已经不维护了

下载ueditor1_4_3_3-utf8-net放到项目中

找到net文件夹下config.json

修改以下两行

    "imageUrlPrefix": "/Content/vendors/ueditor1_4_3_3-utf8-net/utf8-net/net/", /* 图片访问路径前缀 */
    "imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
imageUrlPrefix一定要找到自己放到的目录的net文件夹下
imagePathFormat就随意了

引入JS和CSS
    <script src="~/Content/vendors/ueditor1_4_3_3-utf8-net/utf8-net/ueditor.config.js"></script>
    <script src="~/Content/vendors/ueditor1_4_3_3-utf8-net/utf8-net/ueditor.all.js"></script>
    <script src="~/Content/vendors/ueditor1_4_3_3-utf8-net/utf8-net/lang/zh-cn/zh-cn.js"></script>
    <script src="~/Content/vendors/ueditor1_4_3_3-utf8-net/utf8-net/ueditor.parse.js"></script>

html

 <script id="container" name="content" type="text/plain">
                    </script>

完整页面

@using System.Web.Optimization
@{
    ViewBag.Title = "Index";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}
@section css{
    @Styles.Render("~/Content/vendors/ueditor1_4_3_3-utf8-net/utf8-net/themes/ueditorCss")

}
<!-- page content -->
<div class="right_col" role="main">
    <div class="">
        <div class="page-title">
            <div class="title_left">
                <h3>内容编辑</h3>
            </div>
        </div>
        <div class="clearfix"></div>

        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>大赛规则<small>编辑的内容将显示在前端的大赛规则中</small></h2>

                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    @* <div id="editor"> *@
                    @* </div> *@
                    <script id="container" name="content" type="text/plain">
                    </script>
                    <div class="ln_solid"></div>
                    <div class="form-group">
                        <button id="save" type="button" class="btn btn-success">保存</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<!-- /page content -->
@section scripts{
    <script src="~/Content/vendors/ueditor1_4_3_3-utf8-net/utf8-net/ueditor.config.js"></script>
    <script src="~/Content/vendors/ueditor1_4_3_3-utf8-net/utf8-net/ueditor.all.js"></script>
    <script src="~/Content/vendors/ueditor1_4_3_3-utf8-net/utf8-net/lang/zh-cn/zh-cn.js"></script>
    <script src="~/Content/vendors/ueditor1_4_3_3-utf8-net/utf8-net/ueditor.parse.js"></script>
    <script src="~/Scripts/Admin/GameIntro/index.js"></script>
}
View Code

ue初始化

var ue = UE.getEditor("container", {
    initialFrameHeight: 300
});

获取ue值

var content;
    ue.ready(function () {
        content = ue.getContent();
    });

设置ue值

 ue.ready(function() {
                    ue.setContent(data.data);
                });

 

转载于:https://www.cnblogs.com/tanfuchao/p/9210190.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值