ueditor插件下载和安装使用说明

AspDotNetCoreMVC集成Ueditor：前端富文本编辑器的实战教程

原创已于 2022-05-08 13:30:30 修改 · 4.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #visualstudio #编辑器

于 2022-05-08 13:27:30 首次发布

简介

UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。

下载

推荐直接在github上下载，release发布页地址：https://github.com/fex-team/ueditor/releases

下载文件说明，以v1.4.3.3举例：

ueditor1_4_3_3-gbk-asp.zip：包含asp示例并以gbk编码
ueditor1_4_3_3-gbk-jsp.zip：包含jsp示例并以gbk编码
ueditor1_4_3_3-gbk-net.zip：包含DotNet示例并以gbk编码
ueditor1_4_3_3-gbk-php.zip：包含php示例并以gbk编码
ueditor1_4_3_3-utf8-asp.zip：包含asp示例并以utf-8编码
ueditor1_4_3_3-utf8-jsp.zip：包含jsp示例并以utf-8编码
ueditor1_4_3_3-utf8-net.zip：包含DotNet示例并以utf-8编码
ueditor1_4_3_3-utf8-php.zip：包含php示例并以utf-8编码

安装

本文以 ueditor1_4_3_3-utf8-net.zip 版本说明安装使用步骤

说明

官网每发布一个版本都提供了多种类型可供选择，asp，jsp，dotnet，php。无论选择哪一种版本，其实里面的前端js代码都是一样的，区别只是后端示例代码不同
推荐使用utf-8版本，因为现在的软件工程基本都是utf-8的编码，很多的ide也都默认utf-8，如 VisualStudio 。
DotNet 类型的对于传统DotNetFramework 和 DotNetCore都是适用的，其实等你下载下来查看里面的C# 代码会发现，官方仅提供了一个例子，真正项目中落地大概率需要改造这个例子。

示例

以 AspDotNetCore MVC 工程为例说明

先创建一个 AspDotNetCore MVC 的工程，创建完毕，工程目录结构如下：

以下目录结构为windows资源管理器视图，可能和VS中稍有差异

│  appsettings.Development.json
│  appsettings.json
│  Program.cs
│  tree.txt
│  WebApplication2.csproj
│  WebApplication2.sln
│              
├─Controllers
│      HomeController.cs
│      
├─Models
│      ErrorViewModel.cs
├─Properties
│      launchSettings.json
│      
├─Views
│  │  _ViewImports.cshtml
│  │  _ViewStart.cshtml
│  │  
│  ├─Home
│  │      Index.cshtml
│  │      Privacy.cshtml
│  │      
│  └─Shared
│          Error.cshtml
│          _Layout.cshtml
│          _Layout.cshtml.css
│          _ValidationScriptsPartial.cshtml
│          
└─wwwroot

在 wwwroot 文件夹下面新建一个文件夹 ueditor1_4_3_3-utf8-net ，存放 ueditor 插件文件，我们直接将下载下来的zip解压后的内容全部复制进去。
在 index.cshtml 文件中编写初始化 ueditor 代码

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>

    </br>
    </br>
    <div>
        <!-- 加载编辑器的容器 -->
        <script id="container" name="content" type="text/plain">
            这里写你的初始化内容
        </script>
        <!-- 配置文件 -->
        <script type="text/javascript" src="~/ueditor1_4_3_3-utf8-net/ueditor.config.js"></script>

        <!-- 编辑器源码文件 -->
        <script type="text/javascript" src="~/ueditor1_4_3_3-utf8-net/ueditor.all.js"></script>
        <script type="text/javascript" src="~/ueditor1_4_3_3-utf8-net/lang/zh-cn/zh-cn.js"></script>

        <!-- 实例化编辑器 -->
        <script type="text/javascript">
            var ue = UE.getEditor('container');
        </script>
    </div>
</div>

在这里插入图片描述