简介
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>
- 此时运行工程,浏览器中将呈现初始化后的 ueditor ,如下图
- 若 浏览器中提示 xxx.js 无法找到,报404 ,检查script 引入路径是否有误。
代码
https://github.com/Naylor55/UeditorWithAspDotNetCore
技术交流
- 邮箱:cnaylor@163.com
- QQ群:1158377441