.net core + angular 项目中使用ueditor遇到的问题

前言

这是两个问题, 1、angular中使用ueditor 2、.net core 中使用ueditor

.net core 中使用ueditor

在.net core中使用ueditor 主要是解决.net core中后台服务编写的问题。 使用UEditor.Core 或者UEditorNetCore都可以解决此问题。但是使用过程中可能会出现以下问题。

使用方法

1、安装nuget包 UEditor.Core 和UEditorNetCore 都可以使用,唯一的不同是api封装时有不同。不过也可也下载源码自行修改。 2、修改startup.cs 在ConfigureServices方法中添加如下内容

  //第一个参数为配置文件路径,默认为项目目录下config.json
  //第二个参数为是否缓存配置文件,默认false
services.AddUEditorService("config.json", true);

3、添加配置文件 从ueditor官网中下载的内容取出config.json文件添加进项目,就是上一步配置的路径及文件名。 以asp版本为例,

image.png

image.png

各个版本的这个文件应该可以通用。

image.png

配置文件中的说明已经很清楚了。

4、添加api UEditor.Core中如下添加

    [Route("api/[controller]/[action]")]
    public class UEditorController : WeilaiCCMUControllerBase
    {
        private UEditorService ue;
        public UEditorController(UEditorService ue)
        {
            this.ue = ue;
        }
        [HttpGet, HttpPost]
        public ContentResult Do()
        {
            var response =  ue.UploadAndGetResponse(HttpContext);
            return Content(response.Result, response.ContentType);
        }
    }

UEditorNetCore 中如下添加

[Route("api/[controller]")] //配置路由
public class UEditorController : Controller
{
    private UEditorService ue;
    public UEditorController(UEditorService ue)
    {
        this.ue = ue;
    }

    public void Do()
    {
        ue.DoAction(HttpContext);
    }
}

常见问题

1、一般情况下, 在.net core 项目中,前台能访问的静态文件必须在wwwroot目录下面。解决的思路如下:

  • 修改配置, 把文件上传到wwwroot目录下面。修改代码,返回的相对路径不包含wwwroot路径。
  • 在startup.cs 文件Configure方法里添加如下设置。 如果跟目录下没有upload会报错,此方法的作用就是让跟目录下upload内静态文件可以访问。
            app.UseStaticFiles(new StaticFileOptions
            {
                FileProvider = new PhysicalFileProvider(
       Path.Combine(Directory.GetCurrentDirectory(), "upload")),
                RequestPath = "/upload",
                OnPrepareResponse = ctx =>
                {
                    ctx.Context.Response.Headers.Append("Cache-Control", "public,max-age=36000");
                }
            });

angular中使用ueditor

使用ngx-ueditor 基本可以解决问题。

具体参看官网:https://cipchk.github.io/ngx-ueditor

使用方法

1、安装npm 包

npm install ngx-ueditor 

2、添加模块 将ueditor官网下载的内容拷贝到工程目录下

image.png

import { UEditorModule } from 'ngx-ueditor'
        UEditorModule.forRoot({
            // 指定ueditor.js路径目录
            path: 'assets/uediter/',
            // 默认全局配置项
            options: {
                themePath: 'assets/uediter/themes/'
            }
        }),

3、使用

修改上面拷贝文件中的配置文件ueditor.config.js

image.png

html中

                        <ueditor [(ngModel)]="product.description"
                          [config]="{ initialFrameHeight: 300 }"
                          [loadingTip]="'加载中……'"></ueditor>

常见问题

1、在前后台分离的项目中,会出现部分功能不支持跨域功能而无法使用的(例如单文件上传)。解决思路如下,修改ueditor.all.js源码。修改单文件上传方法,改为post提交。

image.png

单文件上传的方法修改如下:

            utils.loadFile(document, {
                src: me.options.UEDITOR_HOME_URL + "third-party/jquery-1.10.2.min.js",
                tag: "script",
                type: "text/javascript",
                defer: "defer"
            });
            domUtils.on(input, 'change', function () {
                if (!input.value) return;
                var loadingId = 'loading_' + (+new Date()).toString(36);
                var imageActionUrl = me.getActionUrl(me.getOpt('imageActionName'));
                var allowFiles = me.getOpt('imageAllowFiles');

                me.focus();
                me.execCommand('inserthtml', '<img class="loadingclass" id="' + loadingId + '" src="' + me.options.themePath + me.options.theme + '/images/spacer.gif" title="' + (me.getLang('simpleupload.loading') || '') + '" >');

                /!* 判断后端配置是否没有加载成功 *!/
                if (!me.getOpt('imageActionName')) {
                    errorHandler(me.getLang('autoupload.errorLoadConfig'));
                    return;
                }
                // 判断文件格式是否错误
                var filename = input.value,
                    fileext = filename ? filename.substr(filename.lastIndexOf('.')) : '';
                if (!fileext || (allowFiles && (allowFiles.join('') + '.').indexOf(fileext.toLowerCase() + '.') == -1)) {
                    showErrorLoader(me.getLang('simpleupload.exceedTypeError'));
                    return;
                }

                var params = utils.serializeParam(me.queryCommandValue('serverparam')) || '';
                var action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?' : '&') + params);
                var formData = new FormData();
                formData.append("upfile", form[0].files[0]);
                $.ajax({
                    url: action,
                    type: 'POST',
                    cache: false,
                    data: formData,
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        console.log("data:", data)
                        // data = JSON.parse(data);
                        var link, loader,
                            body = (iframe.contentDocument || iframe.contentWindow.document).body,
                            result = body.innerText || body.textContent || '';
                        var opt = me.options;
                        link = opt.imageUrlPrefix + data.url;

                        if (data.state == 'SUCCESS' && data.url) {
                            loader = me.document.getElementById(loadingId);
                            loader.setAttribute('src', link);
                            loader.setAttribute('_src', link);
                            loader.setAttribute('title', data.title || '');
                            loader.setAttribute('alt', data.original || '');
                            loader.removeAttribute('id');
                            domUtils.removeClasses(loader, 'loadingclass');
                        } else {
                            showErrorLoader && showErrorLoader(data.state);
                        }
                        form.reset();
                    }
                });
                function showErrorLoader(title) {
                    if (loadingId) {
                        var loader = me.document.getElementById(loadingId);
                        loader && domUtils.remove(loader);
                        me.fireEvent('showmessage', {
                            'id': loadingId,
                            'content': title,
                            'type': 'error',
                            'timeout': 4000
                        });
                    }
                }
            });

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏温安适的blog

redis中的lua

5946
来自专栏飞雪无情的博客

Go语言经典库使用分析(三)| Gorilla Handlers 详细介绍

在我们编写web服务端程序的时候,我们可能会对一些甚至全部的Http Request统一处理,比如我们记录每个访问的Request,对提交的Form表单进行映射...

1231
来自专栏IT可乐

Redis详解(八)------ 主从复制

  前面介绍Redis,我们都在一台服务器上进行操作的,也就是说读和写以及备份操作都是在一台Redis服务器上进行的,那么随着项目访问量的增加,对Redis服务...

930
来自专栏白驹过隙

Redis - Keepalived + redis 主备热备切换

49311
来自专栏技术博文

curl参数

目录 1. 介绍 2. curl扩展的安装 3. curl_init 4. curl_setopt 5. cur...

3835
来自专栏bluesummer

利用Zookeeper实现分布式锁及服务注册中心

对于Zookeeper的定义以及原理,网上已经有很多的优秀文章对其进行了详细的介绍,所以本文不再进行这方面的阐述。 本文主要介绍一些基本的准备工作以及zooke...

3825
来自专栏木头编程 - moTzxx

Redis 的安装与拓展操作指导(Windows+Linux)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

1542
来自专栏GreenLeaves

WCF系列教程之初识WCF

本随笔参考自WCF编程系列(一)初识WCF,纯属读书笔记,加深记忆。 1、简介:Windows Communication Foundation(WCF)是微软...

2358
来自专栏散尽浮华

进程管理利器-supervisor部署记录

一、简单介绍 supervisor是用来管理进程的一个工具,止于为什么要用supervisor,是因为相对于linux传统的进程管理方式来说,它有很多的优势: ...

3978
来自专栏阿炬.NET

Wojilu学习笔记 (02)

2895

扫码关注云+社区

领取腾讯云代金券