前后端分离.Netcore+Vue百度富文本UEditor使用

一、前言

我们在开发的过程中，都避免不了使用富文本的情况。比如发布公告，制作文章列表等等。市面上富文本的开发技术有很多，这里不再一一举例，感兴趣的可以留言或者翻阅相关资料。今天我们来看一下百度富文本UEditor的在前后端分离vue+.netcore中的使用！

二、展示效果

三、准备工作

下载百度富文本包：链接: https://pan.baidu.com/s/1t4umixdqw6otz7X4uAIFcg  提取码: e8ex

前端vue处理：

   npm i vue-ueditor-wrap@3.x -S

   npm install vue-quill-editor

2.把下载好的包放在项目目录下 /public下

3.在main.js里面注册

import VueUeditorWrap from 'vue-ueditor-wrap';

app.use(VueUeditorWrap);//引用百度富文本

四、Vue中处理

注意：如果是在弹框中引用，需要设置遮盖层的优先级，可以添加z-index=1000;

<div>
        <h2 style="padding-left: 20px;">富文本操作</h2>
        <vue-ueditor-wrap v-model="msg" :config="config" style="padding-left: 20px;"></vue-ueditor-wrap>
        <div>
            <div v-html="msg" class="html"></div>
        </div>
    </div>
    
    export default {
        data() {
            return {
                msg: "",
                config: {
                    autoHeightEnabled: true,
                    autoHeightEnabled: false,
                    initialFrameHeight: 260,
                    initialFrameWidth: 1280,
                    UEDITOR_HOME_URL: "/UEditor/", // 访问 UEditor 静态资源的根路径
                    //serverUrl: 'https://localhost:12345/api/UEditor', // 服务端接口
                    serverUrl: this.http.ipAddress+'api/UEditor', // 服务端接口（配置图片）
//this.http.ipAddress为我们服务器端口，可以在http.js全局配置，是开发版本还是发布版本
                    enableAutoSave: true, // 开启从草稿箱恢复功能需要手动设置固定的 editorId，否则组件会默认随机一个，如果页面刷新，下次渲染的时候 editorId 会重新随机，导致无法加载草稿箱数据
                },
            }
        }

五、后端处理

1.安装nuget包UEditorNetCore

2.在Program.cs添加中间件注入builder.Services.AddUEditorService();

或者在Startup.cs添加中间件注入services.AddUEditorService();

3.添加控制器（用于访问图片资源）

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using UEditorNetCore;

namespace projectManager.WebApi.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class UEditorController : ControllerBase
    {
        private readonly UEditorService _ue;
        public UEditorController(UEditorService ue)
        {
            _ue = ue;
        }
        [HttpGet, HttpPost]//注意请求体
        public void Do()
        {
            _ue.DoAction(HttpContext);
        }
    }
}

4.在与appsettings.json同级的目录中添加config.json文件；文件链接在上方

{
  "imageActionName": "uploadimage",
  "imageFieldName": "upfile",
  "imageMaxSize": 2048000,
  "imageAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp" ],
  "imageCompressEnable": true,
  "imageCompressBorder": 1600,
  "imageInsertAlign": "none",
  "imageUrlPrefix": "https://localhost:44342/",//图片访问路径前缀
  "imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",//图片格式
  "videoActionName": "uploadvideo",
  "videoFieldName": "upfile",
  "videoPathFormat": "upload/{yyyy}{mm}{dd}/{time}{rand:6}",
  "videoUrlPrefix": "",
  "videoMaxSize": 102400000,
  "videoAllowFiles": [ ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid" ],
  "fileActionName": "uploadfile",
  "fileFieldName": "upfile",
  "filePathFormat": "upload/file/{yyyy}{mm}{dd}/{time}{rand:6}",
  "fileMaxSize": 102400000,
  "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",
    ".crx"
  ]
}

注意："imageUrlPrefix": "https://localhost:12345/"是我们的图片保存路径，默认只写端口的情况，图片保存在wwwroot文件中，也就是和appsettings.json同级的文件。也可以按照自己的需求存放到相关位置。

六、图片错位处理 

修改public下我们复制的文件ueditor.all.js或ueditor.all.min.js（视后台编辑器引入文件进行修改）

大部分的情况下只需要改动ueditor.all.min.js

查找：attachTo: function (targetObj) {}函数

 attachTo: function (targetObj) {
                var me = this,
                    target = me.target = targetObj,
                    resizer = this.resizer,
                    imgPos = domUtils.getXY(target),
                    iframePos = domUtils.getXY(me.editor.iframe),
                    editorPos = domUtils.getXY(resizer.parentNode);

                domUtils.setStyles(resizer, {
                    'width': target.width + 'px',
                    'height': target.height + 'px',
                    'left': iframePos.x + imgPos.x - (me.editor.document.body.scrollLeft||me.editor.document.documentElement.scrollLeft||0) - editorPos.x - parseInt(resizer.style.borderLeftWidth) + 'px',
                    'top': iframePos.y + imgPos.y - (me.editor.document.body.scrollTop||me.editor.document.documentElement.scrollTop||0) - editorPos.y - parseInt(resizer.style.borderTopWidth) + 'px'
                });
            }

七、最后

我是csdn博主还有一点酷，感谢您的细心观看，如果有什么问题，请在下方留言，期待与您的互动。