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. [.NET领域驱动设计实战系列]专题六：DDD实践案例：网上书店订单功能的实现

    一.引言 上一专题已经为网上书店实现了购物车的功能了,在这一专题中,将继续对网上书店案例进行完善,本专题将对网上书店订单功能的实现进行介绍,现在废话不多说了,让我们来一起看看订单功能是如何实现的吧. ...

  2. 渣渣小本求职复习之路每天一博客系列——数据库基础（MySQL）（5）

    前情回顾:昨天学习了MySQL中索引的设计与使用,还了解了一些常见的SQL注入攻击的手段以及防范方法,一般来说,在面试的时候如果不是要求比较高,基本就够用了. 今天碰见一个拿了TP-LINK的offe ...

  3. Unity 热更新实例一、C#Light 和UI系统使用实例

    接下来我会运用热更新的机制,逐步制作一些例子来阐释脚本系统如何和Unity结合. 脚本不限于使用C#Lite,但是C#Lite会有一些便利之处,请往下看. 结合机制也不限于这一种,但是C#Lite的设 ...

  4. Android消息机制

    每一个Android应用在启动的时候都会创建一个线程,这个线程被称为主线程或者UI线程,Android应用的所有操作默认都会运行在这个线程中. 但是当我们想要进行数据请求,图片下载,或者其他耗时操作时 ...

  5. Android开发学习之路-自定义ListView（继承BaseAdapter）

    大三学生一个,喜欢编程,喜欢谷歌,喜欢Android,所以选择的方向自然是Android应用开发,开博第一篇,希望以后会有更多的进步. 最近在做一个记账App的时候,需要一个Activity来显示每个 ...

  6. salesforce 零基础学习（四十二）简单文件上传下载

    项目中,常常需要用到文件的上传和下载,上传和下载功能实际上是对Document对象进行insert和查询操作.本篇演示简单的文件上传和下载,理论上文件上传后应该将ID作为操作表的字段存储,这里只演示文 ...

  7. salesforce 零基础学习（二十一）workflow Q&A

    有一篇内容专门写了workflow,后来用到的时候心生疑问,不知道小伙伴有没有和我想法一样的,workflow具体内容原来已经说过,不在过多叙述,只说一下运行条件. 那就是:当满足运行条件时,执行相关 ...

  8. KnockoutJS 3.X API 第五章 高级应用(4) 自定义处理逻辑

    在典型的Knockout应用程序中,DOM元素是动态添加和删除的,例如使用模板绑定或通过控制流绑定(if,ifnot,with和foreach). 当创建自定义绑定时,通常需要添加清除逻辑,当Knoc ...

  9. 部署到IIS报错：HTTP错误500.19，错误代码0x800700d

    title=部署到IIS报错:HTTP错误500.19,错误代码0x800700d.   用vs直接运行网站没问题,部署到IIS就报错,由此可知应该是IIS中不支持网站相关配置. 查找发现在web.c ...

  10. LigerUI Tree

    <!DOCTYPE html> <%@ page language="java" contentType="text/html; charset=utf ...