Asp.Net MVC ckeditor插件多图片上传

实现这个功能遇到很多坑,在网上也找了很多资料,但是网上的多而杂,所以就总结下。
下载网盘ckeditor:
链接:https://pan.baidu.com/s/1U-mztsiIdkdNHUGyoHjSBw
提取码:7uyj
效果图:
在这里插入图片描述
Html代码:

  <div class="noticeContent">
            @*纯文本编辑控件*@
            <textarea id="editor" name="NoticeContent" class="form-control"></textarea>
 </div>
   <script src="~/Content/ckeditor/ckeditor.js"></script>
   var imgs = [];
    var CKEDITOR;
    CKEDITOR.replace('editor', {  //编辑器设置
        language: 'zh-cn', // 语言: 中文,默认是英文
        allowedContent: true, //关闭标签过滤
        removePlugins: 'elementspath', // 编辑器下面不显示元素路径
        resize_enabled: true, // 是否允许拖动改变编辑器的大小

    });

Controllers代码:

 [HttpPost]
        public string SaveDetailImg(HttpPostedFileBase files)//富文本编辑器上传图片
        {
            try
            {
                if (files != null)
                {
                    //返回后缀。 upload.FileName获取文件的全名
                    string fileExtension = Path.GetExtension(files.FileName);
                    //将字符串转换为小写形式地副本
                    fileExtension = fileExtension.ToLower();
                    //判断上传的附件格式
                    if ("(.gif)|(.jpg)|(.bmp)|(.jpeg)|(.png)".Contains(fileExtension))
                    {
                        //检查目录是否存在,不存在就创建
                        if (!Directory.Exists(Server.MapPath("~/Document/Notice/")))
                        {
                            //在项目所在的位置添加它的子目录
                            Directory.CreateDirectory(Server.MapPath("~/Document/Notice/"));
                        }

                        //拼接文件名====当前日期+全球唯一标识符+后缀(目的是区分上传的图片)
                        string fileName = DateTime.Now.ToString("yyyy-MM-dd") + "-" + Guid.NewGuid() + fileExtension;
                        //获取物理路径===也就是绝对路径
                        string filePath = Server.MapPath("~/Document/Notice/") + fileName;
                        //把文件保存到物理路径当中
                        files.SaveAs(filePath);

                        //由于可能用户保存数据时,不想保存数据那么我们的数据就是垃圾数据,
                        //因此我们先把我们的数据上传到临时表中,借用session保存上传的数据。避免垃圾数据保存

                        //获取上传的临时文件表(未保存的)
                        List<string> tempFile = new List<string>();
                        if (Session["tempEditorFile"] != null)
                        {
                            tempFile = Session["tempEditorFile"] as List<string>;
                        }
                        //未保存公告的临时文件
                        tempFile.Add(fileName);
                        //保存到session
                        Session["tempEditorFile"] = tempFile;

                        string url = "/Document/Notice/" + fileName;


                        return "true," + url;

                    }
                  
                }
            }
            catch (Exception)
            {

                throw;
            }
            return "";
           
        }

还需要改一下插件的调用:
plugins=>multiimg=>dialogs=>image.html
在这里插入图片描述
有可能图片不显示该里面的路径,拼接根目录下的文件夹
plugins=>multiimg=>dialogs=>multiimg.js
在这里插入图片描述
利用时间写了一个demo:
https://download.csdn.net/download/wwq0813/11193598

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,你需要安装 `@ckeditor/ckeditor5-vue` 和 `@ckeditor/ckeditor5-build-classic` 两个依赖包。 ``` npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic ``` 然后在你的 Vue 组件中引入 CKEditor 组件: ```vue <template> <div> <ckeditor :editor="editor" v-model="content" :config="editorConfig"></ckeditor> </div> </template> <script> import ClassicEditor from '@ckeditor/ckeditor5-build-classic' import CKEditor from '@ckeditor/ckeditor5-vue' export default { components: { ckeditor: CKEditor.component }, data() { return { content: '', editorConfig: { // 配置项 }, editor: ClassicEditor } } } </script> ``` 在上面的代码中,我们引入了 `ClassicEditor`,它是一个预先配置好的编辑器,包含了常用的插件,如加粗、斜体、链接等。我们也可以自定义 `editorConfig`,来配置编辑器。 下面是一个常用的配置项示例: ```js editorConfig: { toolbar: { items: [ 'bold', 'italic', 'link', '|', 'bulletedList', 'numberedList', '|', 'imageUpload', 'blockQuote', 'insertTable', 'undo', 'redo' ] }, image: { toolbar: [ 'imageTextAlternative', '|', 'imageStyle:full', 'imageStyle:side', '|', 'imageResize', '|', 'imageUpload', 'imageUpload', 'imageUpload', 'imageUpload' ], styles: [ 'full', 'side' ] }, language: 'zh-cn', table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'tableCellProperties', 'tableProperties' ] }, licenseKey: '', simpleUpload: { uploadUrl: '/your/upload/url', headers: { 'X-CSRF-TOKEN': 'CSRF-Token' } } } ``` 上面的配置中,我们开启了图片上传功能,并且添加了表格插入、图片上传、撤销、重做等常用功能。同时也设置了语言为中文。 如果需要添加额外的插件,可以使用 `@ckeditor/ckeditor5-*` 的包名,比如添加字数统计插件: ``` npm install --save @ckeditor/ckeditor5-word-count ``` 然后在 `editorConfig` 中添加: ```js import WordCount from '@ckeditor/ckeditor5-word-count/src/wordcount'; editorConfig: { plugins: [WordCount], toolbar: [ 'wordCount' ] } ``` 这样就可以在编辑器中添加字数统计功能了。 我们也可以自定义上传图片的方法,需要在配置项中添加 `simpleUpload` 选项: ```js editorConfig: { simpleUpload: { uploadUrl: '/your/upload/url', headers: { 'X-CSRF-TOKEN': 'CSRF-Token' }, // 自定义上传方法 async upload(file) { // 这里写上传逻辑 const formData = new FormData(); formData.append('file', file); const response = await axios.post('/your/upload/url', formData, { headers: { 'Content-Type': 'multipart/form-data', 'X-CSRF-TOKEN': 'CSRF-Token' } }); return { default: response.data.url }; } } } ``` 在上面的代码中,我们使用了 axios 发送了一个 `multipart/form-data` 的请求,然后返回上传的图片地址。 希望以上内容能够帮到你。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值