百度编辑器editor的使用

时间：2024-03-04 13:55:11

一.首先下载ueditor的文件

链接：https://pan.baidu.com/s/16fGsenCJHyxptYEToczyVA
提取码：zvyj
复制这段内容后打开百度网盘手机App，操作更方便哦

 

在项目里创建一个Libs的文件夹,把整个文件拉入里面

引用脚本

<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Content/jquery.unobtrusive-ajax.js"></script>
<!-- 配置文件 -->
<script type="text/javascript" src="/Libs/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/Libs/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script src="~/Libs/ueditor/lang/zh-cn/zh-cn.js"></script>

代码:

    @Html.BeginForm("进入帖子", "WuDi")
        {
        <textarea id="editor" name="editor"></textarea> //实例化百度编辑器
        <input type="submit" id="btnBaidu" value="提交" />
        }


<script>
    var ue = UE.getEditor("editor", {
        toolbars: [
            [\'redo\', \'snapscreen\', \'bold\', \'horizontal\', \'cleardoc\',
                \'fontfamily\', \'forecolor\', \'fontsize\', \'simpleupload\', \'insertimage\'
                , \'emotion\', \'map\', \'insertvideo\', \'attachment\']
        ], 
        iframeCssUrl: \'/ueditor/utf8-jsp/themes/iframe.css\',// 引入css
        autoHeightEnabled: false,
        autoFloatEnabled: true,
        initialFrameWidth: 700,
        initialFrameHeight: 150
    });
  
</script>

 

效果图:

 

找到config.json,修改路径,图片就会显示在百度编辑器的编辑框里

效果图:

然后点击提交,就可以把文本框的输入的文本以及图片传到后台

后台代码:

        [HttpPost]
        [ValidateInput(false)]  //这个必写,不写会报错
        public ActionResult Index(FormCollection fc)
        {
            string content = fc["editor"];

             //下面就是把content保存到数据库操作,不详细些;
            return View();
        }

 

效果图:

显示在页面上,就先把数据从数据库拿过来,然后把值输出就可以显示对应的文本以及图片

@Html.Raw(@item.PingLun_nei)  括号里面是存放保存图片及文本的字段名字;

相关文章