百度編輯器editor的使用

一.首先下載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)  括號里面是存放保存圖片及文本的字段名字;