百度編輯器添加實現添加圖片功能


我總結了百度編輯器八步走,按照這八步就可是實現圖片簡單的小視頻上傳

第一步:在html頁面中寫入

<!--百度編輯器-->
                <div class="bd">
                    <script id="editor" type="text/plain" style="width:100%; height:230px;overflow:auto">
                    </script>
                </div>

百度編輯器的寬度高度簡單樣式可以自己設置

第二步:根據所需在網上下載百度ueditor(搜一下名字就可以找到)下載下來后引用關於ueditor的js,

    <script src="~/lib/ueditor/ueditor.config.js"></script>
    <script src="~/lib/ueditor/ueditor.all.min.js"></script>
    <script src="~/lib/ueditor/lang/zh-cn/zh-cn.js"></script>

第三步:在編寫javascript創建百度編輯器

//創建編輯器
        function createEditor() {
            UE.getEditor('editor');
            UE.getEditor('editor').addListener('ready', function (editor) {
                //加載內容
            });
        }

第四步:這是前台完成的操作,在NuGet中下載

 

第五步:在后台statup的ConfigureServices方法中注入

 services.AddUEditorService()
               .Add("test", context =>
               {
                   context.Response.WriteAsync("from test action");
               })
               .Add("test2", context =>
               {
                   context.Response.WriteAsync("from test2 action");
               }
               );
            services.AddMvc();

簡單的百度編輯添加數據已經可以實現了。

第六步:添加圖片需要改變ueditor.config.js中的服務器統一請求端口路徑

serverUrl: URL + "net/controller.ashx"

改為

serverUrl: "/api/UEditor"

第七步:然后在創建UEditorControllers.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using UEditorNetCore;

// For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860

namespace ProductReleaseSystem.Controllers
{
    [Route("api/[controller]")]
    public class UEditorController : Controller
    {
        private UEditorService ue;
        // GET: /<controller>/
        public UEditorController(UEditorService ue)
        {
            this.ue = ue;
        }
        public void Do()
        {
            ue.DoAction(HttpContext);
        }
    }
}

第八步:最后再添加一個config.json文件就可以實現上傳文件,其實寫到了這里你也可以看到也可以上傳一些小型的視頻,可以在config.json中設置上傳的大小。

/* 前后端通信相關的配置,注釋只允許使用多行方式 */
{
  /* 上傳圖片配置項 */
  "imageActionName": "uploadimage", /* 執行上傳圖片的action名稱 */
  "imageFieldName": "upfile", /* 提交的圖片表單名稱 */
  "imageMaxSize": 20480000, /* 上傳大小限制,單位B */
  "imageAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp" ], /* 上傳圖片格式顯示 */
  "imageCompressEnable": true, /* 是否壓縮圖片,默認是true */
  "imageCompressBorder": 1600, /* 圖片壓縮最長邊限制 */
  "imageInsertAlign": "none", /* 插入的圖片浮動方式 */
  "imageUrlPrefix": "/", /* 圖片訪問路徑前綴 */
  "imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
  /* {filename} 會替換成原文件名,配置這項需要注意中文亂碼問題 */
  /* {rand:6} 會替換成隨機數,后面的數字是隨機數的位數 */
  /* {time} 會替換成時間戳 */
  /* {yyyy} 會替換成四位年份 */
  /* {yy} 會替換成兩位年份 */
  /* {mm} 會替換成兩位月份 */
  /* {dd} 會替換成兩位日期 */
  /* {hh} 會替換成兩位小時 */
  /* {ii} 會替換成兩位分鍾 */
  /* {ss} 會替換成兩位秒 */
  /* 非法字符 \ : * ? " < > | */
  /* 具請體看線上文檔: fex.baidu.com/ueditor/#use-format_upload_filename */

  /* 塗鴉圖片上傳配置項 */
  "scrawlActionName": "uploadscrawl", /* 執行上傳塗鴉的action名稱 */
  "scrawlFieldName": "upfile", /* 提交的圖片表單名稱 */
  "scrawlPathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
  "scrawlMaxSize": 2048000, /* 上傳大小限制,單位B */
  "scrawlUrlPrefix": "/", /* 圖片訪問路徑前綴 */
  "scrawlInsertAlign": "none",

  /* 截圖工具上傳 */
  "snapscreenActionName": "uploadimage", /* 執行上傳截圖的action名稱 */
  "snapscreenPathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
  "snapscreenUrlPrefix": "/", /* 圖片訪問路徑前綴 */
  "snapscreenInsertAlign": "none", /* 插入的圖片浮動方式 */

  /* 抓取遠程圖片配置 */
  "catcherLocalDomain": [ "127.0.0.1", "localhost", "img.baidu.com" ],
  "catcherActionName": "catchimage", /* 執行抓取遠程圖片的action名稱 */
  "catcherFieldName": "source", /* 提交的圖片列表表單名稱 */
  "catcherPathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
  "catcherUrlPrefix": "/", /* 圖片訪問路徑前綴 */
  "catcherMaxSize": 2048000, /* 上傳大小限制,單位B */
  "catcherAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp" ], /* 抓取圖片格式顯示 */

  /* 上傳視頻配置 */
  "videoActionName": "uploadvideo", /* 執行上傳視頻的action名稱 */
  "videoFieldName": "upfile", /* 提交的視頻表單名稱 */
  "videoPathFormat": "upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
  "videoUrlPrefix": "/", /* 視頻訪問路徑前綴 */
  "videoMaxSize": 102400000, /* 上傳大小限制,單位B,默認100MB */
  "videoAllowFiles": [
    ".flv",
    ".swf",
    ".mkv",
    ".avi",
    ".rm",
    ".rmvb",
    ".mpeg",
    ".mpg",
    ".ogg",
    ".ogv",
    ".mov",
    ".wmv",
    ".mp4",
    ".webm",
    ".mp3",
    ".wav",
    ".mid"
  ], /* 上傳視頻格式顯示 */

  /* 上傳文件配置 */
  "fileActionName": "uploadfile", /* controller里,執行上傳視頻的action名稱 */
  "fileFieldName": "upfile", /* 提交的文件表單名稱 */
  "filePathFormat": "upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
  "fileUrlPrefix": "/", /* 文件訪問路徑前綴 */
  "fileMaxSize": 51200000, /* 上傳大小限制,單位B,默認50MB */
  "fileAllowFiles": [
    ".png",
    ".jpg",
    ".jpeg",
    ".gif",
    ".bmp",
    ".flv",
    ".swf",
    ".mkv",
    ".avi",
    ".rm",
    ".rmvb",
    ".mpeg",
    ".mpg",
    ".ogg",
    ".ogv",
    ".mov",
    ".wmv",
    ".mp4",
    ".webm",
    ".mp3",
    ".wav",
    ".mid",
    ".rar",
    ".zip",
    ".tar",
    ".gz",
    ".7z",
    ".bz2",
    ".cab",
    ".iso",
    ".doc",
    ".docx",
    ".xls",
    ".xlsx",
    ".ppt",
    ".pptx",
    ".pdf",
    ".txt",
    ".md",
    ".xml"
  ], /* 上傳文件格式顯示 */

  /* 列出指定目錄下的圖片 */
  "imageManagerActionName": "listimage", /* 執行圖片管理的action名稱 */
  "imageManagerListPath": "upload/image", /* 指定要列出圖片的目錄 */
  "imageManagerListSize": 20, /* 每次列出文件數量 */
  "imageManagerUrlPrefix": "/", /* 圖片訪問路徑前綴 */
  "imageManagerInsertAlign": "none", /* 插入的圖片浮動方式 */
  "imageManagerAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp" ], /* 列出的文件類型 */

  /* 列出指定目錄下的文件 */
  "fileManagerActionName": "listfile", /* 執行文件管理的action名稱 */
  "fileManagerListPath": "upload/file", /* 指定要列出文件的目錄 */
  "fileManagerUrlPrefix": "/", /* 文件訪問路徑前綴 */
  "fileManagerListSize": 20, /* 每次列出文件數量 */
  "fileManagerAllowFiles": [
    ".png",
    ".jpg",
    ".jpeg",
    ".gif",
    ".bmp",
    ".flv",
    ".swf",
    ".mkv",
    ".avi",
    ".rm",
    ".rmvb",
    ".mpeg",
    ".mpg",
    ".ogg",
    ".ogv",
    ".mov",
    ".wmv",
    ".mp4",
    ".webm",
    ".mp3",
    ".wav",
    ".mid",
    ".rar",
    ".zip",
    ".tar",
    ".gz",
    ".7z",
    ".bz2",
    ".cab",
    ".iso",
    ".doc",
    ".docx",
    ".xls",
    ".xlsx",
    ".ppt",
    ".pptx",
    ".pdf",
    ".txt",
    ".md",
    ".xml"
  ] /* 列出的文件類型 */

}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM