ueditor 集成 .net core + vue

一个恶心的项目,因为前后端分离的身份验证还没想清楚，直接就开搞了，直接.net core里添加客户端库

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "element-ui@2.15.3",
      "destination": "wwwroot/lib/element-ui/",
      "files": [
        "index.js",
        "theme-chalk/index.css",
        "theme-chalk/index.min.css",
        "theme-chalk/fonts/element-icons.ttf",
        "theme-chalk/fonts/element-icons.woff",
        "index.min.js",
        "locale/zh-CN.min.js",
        "locale/zh-CN.js"
      ]
    },
    {
      "library": "vue@2.6.14",
      "destination": "wwwroot/lib/vue/",
      "files": [
        "vue.js",
        "vue.min.js"
      ]
    }
]
}

其他，UI框架也就看看，没在项目运用，弄好环境就开干了。

把文件搞到

安装包

配置文件丢到根目录

 

  "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
  "imageFieldName": "upfile", /* 提交的图片表单名称 */
  "imageMaxSize": 2048000, /* 上传大小限制，单位B */
  "imageAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp" ], /* 上传图片格式显示 */
  "imageCompressEnable": true, /* 是否压缩图片,默认是true */
  "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
  "imageInsertAlign": "none", /* 插入的图片浮动方式 */
  "imageUrlPrefix": "/", /* 图片访问路径前缀 */
  "imagePathFormat": "wwwroot/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

基本只需要改

 "imageUrlPrefix": "/", /* 图片访问路径前缀 */
  "imagePathFormat": "wwwroot/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

要传文件到wwwroot下，然后用网站相对目录upload/image/{yyyy}{mm}{dd}/{time}{rand:6}来访问

创建UEditorController

using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using PropertyAnalysis.WebSite.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using UEditor.Core;


public class UEditorController : Controller
    {
        private readonly UEditorService _ueditorService;
        public UEditorController(UEditorService ueditorService) {

            _ueditorService = ueditorService;
        }

        //如果是API，可以按MVC的方式特别指定一下API的URI
        [HttpGet, HttpPost]
        public ContentResult Upload()
        {
            var response = _ueditorService.UploadAndGetResponse(HttpContext);
            return Content(response.Result, response.ContentType);
        }
    }

访问路径为/UEditor/Upload 修改到下面的服务器统一请求接口路径 serverUrl

var URL = window.UEDITOR_HOME_URL || getUEBasePath();

    /**
     * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
     */
    window.UEDITOR_CONFIG = {

        //为编辑器实例添加一个路径，这个不能被注释
        UEDITOR_HOME_URL: URL

        // 服务器统一请求接口路径
        , serverUrl: "/UEditor/Upload"

打开下面的js，这里没有引用mini

因为要修改下返回路径，根据关键字找到这个

// plugins/simpleupload.js
/**
 * @description
 * 简单上传:点击按钮,直接选择文件上传
 * @author Jinqn
 * @date 2014-03-31
 */
UE.plugin.register('simpleupload', function (){
    var me = this,
        isLoaded = false,
        containerBtn;

向下拉一点，找到callback方法

function callback(){
                    try{
                        var link, json, loader,
                            body = (iframe.contentDocument || iframe.contentWindow.document).body,
                            result = body.innerText || body.textContent || '';
                        json = (new Function("return " + result))();
                        link = me.options.imageUrlPrefix + json.url.replace("wwwroot/","");
                        if(json.state == 'SUCCESS' && json.url) {
                            loader = me.document.getElementById(loadingId);
                            loader.setAttribute('src', link);
                            loader.setAttribute('_src', link);
                            loader.setAttribute('title', json.title || '');
                            loader.setAttribute('alt', json.original || '');
                            loader.removeAttribute('id');
                            domUtils.removeClasses(loader, 'loadingclass');
                        } else {
                            showErrorLoader && showErrorLoader(json.state);
                        }
                    }catch(er){
                        showErrorLoader && showErrorLoader(me.getLang('simpleupload.loadError'));
                    }
                    form.reset();
                    domUtils.un(iframe, 'load', callback);
                }

.replace("wwwroot/","") 替换目录，因为之前设置上传目录的时候，加了wwwroot/，才能上传到静态文件的正确的目录，网上有些是在Startup里改了静态文件的目录，这么改了之后，之前很多东西都要调整，麻烦。所以返回目录的时候，这个就替换掉就能正常访问相对路径了。

Startup 注册

services.AddUEditorService(configFileRelativePath: "ueditor.json", isCacheConfig: false);//,basePath: "/upload"

找个页面
 

data(){

//编辑器
 editor: null,

}

methods: {
    //编辑器方法
    getUEContent() { // 获取内容方法
        return this.editor.getContent()
    }
}

指定点放入

<script id="ueditor" name="ueditor" type="text/plain"></script>

由于是放在弹出层的，在弹出层打开的时候再创建，如果在mounted()创建，无法显示，

添加监听，是为了修改数据的时候给他赋值，直接this.editor.setContent(this.Data.contents)这样用是会报错的。

this.$nextTick(() => {
                    //初始化
                    if (this.editor == null) {
                        this.editor = window.UE.getEditor("ueditor", {

                        });
                        //监听内容变更
                        this.editor.ready(() => {
                            this.editor.setContent(this.Data.contents)
                            this.editor.addListener("contentChange", () => {
                                this.Data.contents = this.editor.getContent()
                            })
                        })

                    }

                })

在关闭弹出层事件和取消按钮事件要增加一个事件：editor = null;不然赋值上会出问题。

 <el-dialog width="80%" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" @@close='dialogFormVisible = false; editor = null;'>

<el-button size="mini" @@click="dialogFormVisible = false; editor = null;">取消</el-button>

内容真的很少，过程很艰辛。。。

遇到编辑器选择字体、字号中文乱码

 

用记事本将ueditor/lang/zh-cn/zh-cn.js打开，然后保存为ANSI就可以了