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

而UMeditor则是UEditor删减版.

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

效果图:

普通方式:

<!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:

<!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

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函数中
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

[JS] 使用RequireJS引用UMeditor的更多相关文章

  1. JavaScript进阶(二)在一个JS文件中引用另一个JS文件

    在一个JS文件中引用另一个JS文件       转载地址:http://blog.csdn.net/zndxlxm/article/details/7875787 方法一 在调用文件的顶部加入下例代码 ...

  2. js script中引用其他script

    在需要引用目标js中引用其他js依赖项 可以使用这个方法直接在js顶部加入这一行即可 document.write("<script type='text/javascript' sr ...

  3. js 参数的 引用与值传递

    js中arr的赋值不影响原数组,赋值和引用的区别 1.赋值 var a = 1; var b = a;   //赋的是a的复制值 b ++; alert(a);   //"1"   ...

  4. JS中关于JS文件的引用以及问题

    问题描述:          由于JSP中JS函数比较多,因此打算新建一个JS文件在JSP中引用JS文件,现在出现如下问题,JS如何引用时正确的,JS引用之后出现乱码如何解决? 问题解决: (1)JS ...

  5. Js- 在一个JS文件中引用另一个JS文件

    在调用文件的顶部加入下例代码: document.write(”<script language=javascript src=’/js/import.js’></script> ...

  6. 用浅/深拷贝、和HTML5方法解决js对象的引用的问题

    先来看一个例子 例一: var a=[1,2,3]; var b=a; b.push(4); alert(b);//1,2,3,4 alert(a);//1,2,3,4 var a=[1,2,3]; ...

  7. 使用Fiddler改变线上js文件的引用路径

    一般的项目开发都是先在本地环境开发,测试环境中完成测试,最后再提交到线上环境. 但是由于版本构建工具有时出现bug或者一些缓存的因素导致测试环境代码可能和线上不一样,这是多么蓝瘦的事情.此处说的是在原 ...

  8. 网站项目所有js css无法引用问题解决方案

    网站页面中的所有js css引用失效,路径确保正确,但是浏览器就是报找不到引用.仔细查找发现问题所在: 报错信息很详细了,就是.NET Framework 版本不同导致.同时也提供了两个解决方案:将. ...

  9. 莫名其妙的js脚本文件引用不到

    今天遇到一个很奇怪的问题,在页面中引用的脚本文件,引用路径没有问题,而且在很多浏览器中都测试没有问题,包括Win8 Modren UI下的IE11也同样没有问题,唯独Win8桌面版的IE11无法引用. ...

随机推荐

  1. 修改nw.js的exe文件使其请求管理员权限

    修改nw.js的exe文件使其请求管理员权限 默认情况下,nw.js发布的nw.exe文件请求的是普通权限,当我们的应用需要访问一些特殊目录或者注册表等,就需要程序启动的时候以管理员权限运行.那么此时 ...

  2. 作业八—Alpha阶段项目总结

    一.项目的预期目标: 我们的图书管理系统之前的目标是做出可以让读者和管理员采用不同的搜索方式,并且时要做到读者和管理者两种不同的方式的!但是我们目前做到了部分搜索方式和管理员界面,主要原因是该项目如果 ...

  3. java提高篇(七)-----关键字static

    一. static代表着什么 在Java中并不存在全局变量的概念,但是我们可以通过static来实现一个“伪全局”的概念,在Java中static表示“全局”或者“静态”的意思,用来修饰成员变量和成员 ...

  4. 根据BOM和已存在的文件生成文件列表

    在BOM中记录中有物料编码,物料名称,物料规格等,而且依据BOM已经生成了相应的文件,如采购规格书,检验规格书等,这个时候需要获得这些文件的标题,并且生成一个列表,可以使用下面的VBA代码,具体代码如 ...

  5. iOS——自定义Segue实现总结

    在阅读了iOS 8自定义动画转场上手指南后,刚开始不理解,后来慢慢消化了,现在总结如下: 1. 自定义Segue关键在于继承UIStoryboardSegue并重写perform方法 2. 动画可以在 ...

  6. Java枚举类型getClass和getDeclaringClass区别(未完待续)

    Java中的枚举类型有getClass()和getDeclaringClass()两个方法,在通常情况下这两个方法返回的类型一样,在某些场景下会有不同的表现 参照 http://stackoverfl ...

  7. Java-集合练习题1

    第一题 (Map)利用Map,完成下面的功能: 从命令行读入一个字符串,表示一个年份,输出该年的世界杯冠军是哪支球队.如果该 年没有举办世界杯,则输出:没有举办世界杯. 附:世界杯冠军以及对应的夺冠年 ...

  8. Redis学习笔记~StackExchange.Redis实现分布式Session

    回到目录 对于多WEB的环境现在已经是必须的了,很难想像一台WEB服务器面对百万并发的响应,所以,我们需要多台WEB服务器集群合作,来缓解这种高并发,高吞吐的场景,而对于多WEB的场景又会有个问题出现 ...

  9. 1121冬至！！！巩固HTML基础第一堂

    今天只是把以前的知识巩固了一下.温故而知新,说的一点没错: 又新明白了一种居中对齐方法: 水平居中:align left(左侧对齐),center(居中对齐) 垂直居中:ralign top(上对齐) ...

  10. WPF入门教程系列一——基础

    一. 前言   最近在学习WPF,学习WPF首先上的是微软的MSDN,然后再搜索了一下网络有关WPF的学习资料.为了温故而知新把学习过程记录下来,以备后查.这篇主要讲WPF的开发基础,介绍了如何使用V ...