Ueditor使用以及遇到的問題

時間 2019-11-25

標籤 ueditor 使用以及遇到問題简体版

原文原文鏈接

原來用的是Kindeditor這個編輯器，但好久沒更新了,最新版是13年更新的。如今要換成百度的Ueditor，javascript

在這裏記錄Ueditor的使用流程和遇到的問題。html

1、下載

1.Ueditor官網前端

這裏有三個版本:1.UBuilder:能夠自定義選擇自已須要的功能，而後會下載對應的文件。java

2.開發版:功能多,適合寫文章，排版。web

3.Mini版，基本功能，適合作一些回覆評論之類的。json

根據本身使用的語言下載對應版本,我下載的是.Net版本，UTF-8版。瀏覽器

2、使用(環境爲MVC4,.net4.5)

下載下來有兩個文件夾，只要utf8-net文件夾,_MACOSX是解壓多出來的。編輯器

1.在項目上建一個Plug文件夾,把utf8-net拖到Plug文件夾下,把utf8-net文件夾更名爲Ueditorpost

2.建一個控制器:UeditorDemo => 建actione:Index =>添加Index視圖。ui

3.這時打開管網,上面有一個文檔,打開文檔能夠看到。

根據文檔,咱們把index.cshtml寫成

<title>UeditorDemo</title>
    <!-- 配置文件 -->
   <script src="~/Plug/Ueditor/ueditor.config.js"></script>
    <!-- 編輯器源碼文件 -->
    <script src="~/Plug/Ueditor/ueditor.all.min.js"></script>
   <!-- 實例化編輯器 -->
    <script type="text/javascript">
        window.onload = function () {
            var ue = UE.getEditor('container');
        }
    </script>
</head>
<body>
    <!-- 加載編輯器的容器 -->
    <script id="container" name="content" type="text/plain">
        這裏寫你的初始化內容
    </script>
    
</body>

而後運行，遇到了錯誤

解決:把Ueditor->net->bin下的文件全刪了。

再次運行，再遇到錯誤

解決: 把Ueditor->net->config.json第一句刪註釋刪除(下面圈出部分)。

再次運行,成功獲得想要的頁面

3、後臺獲取數據:

前端顯示已經沒問題了，而後到後臺獲取數據看行不行。

1.修改index.cshtml代碼，添加一個form表單，讓數據能夠提交到後臺

修改後變成:

  <title>UeditorDemo</title>
    <!-- 配置文件 -->
   <script src="~/Plug/Ueditor/ueditor.config.js"></script>
    <!-- 編輯器源碼文件 -->
    <script src="~/Plug/Ueditor/ueditor.all.min.js"></script>
   <!-- 實例化編輯器 -->
    <script type="text/javascript">
        window.onload = function () {
            //initialFrameWidth這個參數是寬跟當前窗口自動改變大小
            var ue = UE.getEditor('container', { initialFrameWidth: null });

        }
    </script>
</head>
<body>
    <form action="/UeditorDemo/Index" method="post">
    <!-- 加載編輯器的容器 -->
    <script id="container" name="content" style="max-width:800px; type="text/plain">
        這裏寫你的初始化內容
    </script>
        <input type="submit" value="提交" />
    </form> 
</body>

2.控制器添加一個action,接收前端頁面傳來的數據,由於.net默認不容許傳html表簽到後臺的，因此要在控制器前加一個特性[ValidateInput(false)]

[ValidateInput(false)]
        [HttpPost]
        public ActionResult Index(FormCollection fc)
        {
            return Content(fc["content"]);
        }

3.運行，成功輸出前端的內容