[JS] 使用RequireJS引用UMeditor

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

而UMeditor则是UEditor删减版.

 

本文将通过RequireJS的方式来加载UMeditor.

 

效果图:

 

普通方式:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="Scripts/umeditor/themes/default/css/umeditor.css" rel="stylesheet" />
</head>
<body>
    <script type="text/plain" id="myEditor" style="width:500px;height:240px;">
        <p>Hello World</p>
    </script>
    <script src="Scripts/umeditor/third-party/jquery.min.js"></script>
    <script src="Scripts/umeditor/umeditor.config.js"></script>
    <script src="Scripts/umeditor/umeditor.min.js"></script>
    <script src="Scripts/umeditor/lang/zh-cn/zh-cn.js"></script>
    <script>
        var um = UM.getEditor('myEditor');
    </script>
</body>
</html>

 

RequireJS:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="scripts/require.js" data-main="scripts/main" defer async="true"></script>
</head>
<body>
    <script type="text/plain" id="myEditor" style="width:500px;height:240px;">
        <p>Hello World</p>
    </script>
</body>
</html>

 

来看看我们的main.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
require.config({
    baseUrl: 'scripts/umeditor/',
    paths: {
        'jquery': 'third-party/jquery.min',
        'um.zh': 'lang/zh-cn/zh-cn',
        'um': 'umeditor'
    },
    shim: {
        um: ['umeditor.config', 'jquery'],
        'um.zh': ['um']
    }
});
 
require(['../css!themes/default/css/umeditor.css', 'um.zh'], function () {
    var um = UM.getEditor('myEditor');
});

 

从html代码来看RequireJS简洁的多.

再来比较一下加载速度吧

 

普通:

 

RequireJS:

 

明显Require的DOM加载速度非常快.

 

UMeditor一些踩坑点:

  • 在config.js中需要配置HOME_URL,用来解决依赖js路径问题.

 

  • 在config.js中需要根据项目配置上传地址

 

  • 在UMeditor Doc中介绍editor.setContent()为写入内容.而这段代码一定需要放到ready函数中
?
1
2
3
4
5
6
7
8
9
10
var ue = UE.getContent();
//对编辑器的操作最好在编辑器ready之后再做
ue.ready(function() {
    //设置编辑器的内容
    ue.setContent('hello');
    //获取html内容，返回: <p>hello</p>
    var html = ue.getContent();
    //获取纯文本内容，返回: hello
    var txt = ue.getContentTxt();
});

 

  • 在上传图片的时候,需要返回特定的json格式.但返回的Content-Type不可以为application/json.

 

本例中,同时使用了RequireJS.css插件实现css的加载.

为方便大家,同时在Nuget上上传了Nuget包.

Install-Package umeditor

 

posted @   Never、C  阅读(1422)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
历史上的今天：
2015-07-27 [ASP.NET] 使用 ASP.NET SignalR 添加实时 Web
点击右上角即可分享
微信分享提示
SQL AI 助手