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. Ubuntu Desktop开发生产环境搭建

    Ubuntu Desktop开发生产环境搭建 1   开发生产环境搭建 在本节内容开始前,先定义一下使用场合,没有哪种系统或者设备是万能的,都有它的优点和缺点,能够在具体的使用场景,根据自身的需求来取 ...

  2. JavaScript开发原生App模式能否突出重围？

    移动应用制作的第三方服务市场已经被瓜分得差不多了,对于刚起步的中小企业来说,这些公司的 IT 部门人员比较熟悉的是 Appcan ,但随着互联网公司对 App 开发的需求持续升温,也有不少后来的闯入者 ...

  3. angular中的MVVM模式

    在开始介绍angular原理之前,我们有必要先了解下mvvm模式在angular中运用.虽然在angular社区一直将angular统称为前端MVC框架,同时angular团队也称它为MVW(What ...

  4. C#Light V0.08A 执行字符串中的C#

    C#Lite第一批规划的功能已经全部完成 V0.08A 加入了var 表达式支持 完成了类型静态函数和静态成员的访问 之前已完成了非静态的 之所以还不进入beta是临时决定第一批就加入数组的功能. 项 ...

  5. XP之后Windows的一些变化

    看到很多Windows开发人员,尤其是C++程序员思维还是停留在XP操作系统,当然根据工作是否需要新知识 ,这本身没有错.但是实际上Vista之后的Win7, 再之后的Win8 ,Windows已经发 ...

  6. splice slice

    array的方法中,有这么两个方法, 很久之前接触flex的时候就知道了. 可是总是记不太清. splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目 slice() 方法可从已有的数 ...

  7. VUE 意淫笔记

    caihg Vue.js 递归组件实现树形菜单 最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: 1 2 3 4 5 6 7 8 9 i ...

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

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

  9. NodeJS系列~第一个小例子，实现了request.querystring功能

    返回目录 百度百科上: Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始,在Node中,Http是首要的.Node为创建http服务器作了优化,所以在网上 ...

  10. [数据库事务与锁]详解八:底理解数据库事务乐观锁的一种实现方式——CAS

    注明: 本文转载自http://www.hollischuang.com/archives/1537 在深入理解乐观锁与悲观锁一文中我们介绍过锁.本文在这篇文章的基础上,深入分析一下乐观锁的实现机制, ...