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. ASP.NET 5 (vNext) 理解和概述

    概述 ASP.NET 5 (又称为vNext) 是自ASP.NET产生15年以来一次革命性的更新, 我们可以从以下几点来理解其概貌和意义: ASP.NET 5是开源的 ASP.NET 5开发的WebA ...

  2. Unable to locate secure storage module异常的解决方案

    org.eclipse.equinox.security.storage.StorageException: Unable to locate secure storage module 该异常同样是 ...

  3. Windows Phone App的dump 文件分析

    前言 我们在发布了自己的App以后,Windows Phone的Error Report机制会帮助我们收集程序的崩溃信息并发送到微软的服务器上,这可以辅助开发者提高App的稳定性. 那么如何利用这些d ...

  4. Unsafe与CAS

    Unsafe 简单讲一下这个类.Java无法直接访问底层操作系统,而是通过本地(native)方法来访问.不过尽管如此,JVM还是开了一个后门,JDK中有一个类Unsafe,它提供了硬件级别的原子操作 ...

  5. 学习Scala02 基本类型

    scala中有9大基本类型: Byte .Short .Int .Long. Char .String .Float. Double .Boolean 与java的基本类型看起来基本是一致的,但实际上 ...

  6. openseadragon.js与deep zoom java实现艺术品图片展示

    openseadragon.js 是一款用来做图像缩放的插件,它可以用来做图片展示,做展示的插件很多,也很优秀,但大多数都解决不了图片尺寸过大的问题. 艺术品图像展示就是最简单的例子,展示此类图片一般 ...

  7. Ajax跨域访问XML数据的另一种方式——使用YQL查询语句

    XML数据默认是不能在客户端通过Ajax跨域请求读取的,一般的做法是在服务器上写一个简单的代理程序,将远程XML的数据先读到本地服务器,然后客户端再从本地服务器通过Ajax来请求.由于我们不能对数据源 ...

  8. 翻译：AKKA笔记 - Actor消息 -1（一）

    从第一篇Akka笔记的介绍中,我们是从很高的高度去观察Akka工具箱中的Actors.在这篇笔记的第二篇,我们会看一下Actors中的消息部分.而且延续上一次的例子,我们还会使用同样的学生与老师的例子 ...

  9. Atitit ACID解决方案2PC(两阶段提交)  跨越多个数据库实例的ACID保证

    Atitit ACID解决方案2PC(两阶段提交)  跨越多个数据库实例的ACID保证 1.1. ACID解决方案1 1.2. 数据库厂商在很久以前就认识到数据库分区的必要性,并引入了一种称为2PC( ...

  10. Tomcat源码解读系列（一）——server.xml文件的配置

    Tomcat是J2EE开发人员最常用到的开发工具,在Java Web应用的调试开发和实际部署中,我们都可以看到Tomcat的影子.大多数时候,我们可以将Tomcat当做一个黑盒来看待,只需要将编写的J ...