首先吐槽下,百度的API太坑,谁让人家都是大牛呢。

说明:本文所涉猎代码均依托于seajs,本文所用ueditor版本为1.4.3.3 JSP UTF-8版

编辑器前端部署:

1、把ueditor引入到项目中,存放路径:static/common/js/we/piugins/

2、编写依赖文件(ueditor.js)并实例化编辑器

  1. define(function(require, exports, module) {
  2. require('./js/ueditor.config.js');
  3. require('./js/ueditor.all.min.js');
  4. require('./js/ueditor.parse.min.js');
  5. require('./themes/default/css/ueditor.min.css');
  6. var init = function(){
  7. setTimeout(function(){
  8. editor = UE.getEditor('ueditor');
  9. },1000)
  10. }
  11. return{
  12. init:init
  13. }
  14. })

3、配置依赖文件路径别名,配置文件路径:static/common/js/we/config.js

  1. 'ueditor':'we/plugins/ueditor/1.4.3/ueditor',

4、部署编辑器容器

  1. <textarea id="ueditor" class="ueditor" name="content">内容</textarea>

恭喜你,初次部署成功!

注意事项

1、改写静态资源根路径

场景描述:ueditor.config.js文件中有一个URL的变量,此变量是指编辑器资源文件的根路径是以编辑器实例化页面为当前路径,指向的是编辑器资源文件(即dialog等文件夹)的路径;

如果站点中有多个不在同一层级的页面需要实例化编辑器,且引用了同一UEditor的时候,此处的URL可能不适用于每个页面的编辑器。

  1. var URL = window.UEDITOR_HOME_URL || getUEBasePath();

解决方案:通过改写URLwindow.UEDITOR_HOME_URL值来指向静态文件根目录

  1. //静态服务器域名
  2. var server_sta = "http://static.uxuexi.com";
  3. //静态资源根目录
  4. window.UEDITOR_HOME_URL = server_sta + '/common/js/we/plugins/ueditor/1.4.3/';
  5. var URL = window.UEDITOR_HOME_URL || getUEBasePath();

2、改写后台请求路径

场景描述:ueditor.config.js文件中有一个window.UEDITOR_CONFIG全局对象,该对象有一个serverUrl属性,该属性值是服务器统一请求接口路径。根据前后端分离的原则我们需要改变接口路径

  1. window.UEDITOR_CONFIG = {
  2. //为编辑器实例添加一个路径,这个不能被注释
  3. UEDITOR_HOME_URL: URL
  4. // 服务器统一请求接口路径
  5. , serverUrl: server_url
  6. }

解决方案:新建一个变量来设定接口路径,然后通过变量传递来设定替换原有接口路径,这样写可以在封装或者替换路径时只专注于修改变量值

  1. //动态服务器域名
  2. var server_dyn = "http://www.xxx.com";
  3. //后台访问接口,可用于上传图片等
  4. var server_url = server_dyn + '/xxx.json';
  5. window.UEDITOR_CONFIG = {
  6. //为编辑器实例添加一个路径,这个不能被注释
  7. UEDITOR_HOME_URL: URL
  8. // 服务器统一请求接口路径
  9. , serverUrl: server_url
  10. }

3、对接请求规范

1、uploadimage(上传图片)

  1. //请求参数:
  2. GET {"action": "uploadimage"}
  3. POST "upfile": File Data

2、config

  1. //请求参数:
  2. GET {"action": "config"}
  3. POST "upfile": File Data

3、uploadvideo(上传视频)

  1. //请求参数:
  2. GET {"action": "uploadvideo"}
  3. POST "upfile": File Data

4、uploadfile(上传文件)

  1. //请求参数:
  2. GET {"action": "uploadfile"}
  3. POST "upfile": File Data

ueditor使用总结——前端篇.md的更多相关文章

  1. angular2之前端篇—1(node服务器分支)

    上一篇.net core和angular2之前端篇-1 使用的是dotnet模板.之所以用它,因为想用他写webapi,但是写道下一篇的时候遇到点问题,所以先写个分支测试一下.这次是用Node作为服务 ...

  2. 【原】让H5页面适配移动设备全家 - 前端篇 - PPT

    7月份在部门内给设计中心的同事们带来<让H5页面适配移动设备全家 - 设计师篇 - PPT>的分享,在视觉和交互稿上提出页面适配的建议及提升页面体验的好处,促进前端和设计双方更好的合作,同 ...

  3. 漫谈程序员(十一)老鸟程序员知道而新手不知道的小技巧之Web 前端篇

    老鸟程序员知道而新手不知道的小技巧 Web 前端篇 常充电!程序员只有一种死法:土死的. 函数不要超过50行. 不要一次性写太多来不及测的代码,而是要写一段调试一段. UI和编码要同步做. 多写注释方 ...

  4. web前端篇:CSS使用,样式表特征,选择器

    目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...

  5. Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  6. Vue + Element UI 实现权限管理系统 前端篇(十六):系统备份还原

    系统备份还原 在很多时候,我们需要系统数据进行备份还原.我们这里就使用MySql的备份还原命令实现系统备份还原的功能. 后台接口准备 系统备份还原是对数据库的备份还原,所以必须有后台接口的支持,我们准 ...

  7. Vue + Element UI 实现权限管理系统 前端篇(十):动态加载菜单

    动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的. 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单. 接口 ...

  8. SEO前端篇(二)关键词

    首先要SEO的关键词最好放在网站首页index,并且网站域名选用顶级域名,最好是.com.现在很多后缀的域名不能备案,选择域名的时候一定要慎重. 域名解析的主机IP最好选择站点资源少的区域,可以用 爱 ...

  9. 《OneForAll框架搭建之旅》前端篇:微前端架构设计(Vue)

    心之所向,勇往直前!记录开发过程中的那些小事,给自己加点经验值. 前言 作为一个.Net后端开发,在竞争愈加激烈的当下,掌握点前端配菜好像已经是家常便饭了. 刚好在工作的第5个年头,辞去小主管职务的我 ...

随机推荐

  1. BZOJ 1058

    服气!我果然就是个傻逼. 傻兮兮地感觉两个数之间的差距无需删除一些答案,妈个鸡就只加入了一些新的答案忘记了去掉无效的答案.我果然是傻逼,经验不足脑子笨... 这么水的题...不说了,说多了都是泪. 自 ...

  2. 【UGUI】Canvas和Rect Transform

    Canvas 1.所有的UI元件都需要放在Canvas里 2.UI元件的绘制顺序,与在 Hierarchy的顺序相同,在上面的元素会先被绘制,位于后续绘制元素的下面 3.可以选择3种不同的渲染模式: ...

  3. c++关键字之#define typedef const

    [#define] #define是预处理指令,在编译预处理时进行简单的替换,不作正确性检查. [typedef] typedef只是为了增加可读性而为标识符另起的新名称 在自己的作用域内给一个已经存 ...

  4. 32.C++不能被继承的类[C++ Final Class]

    [题目] 用C++设计一个不能被继承的类. [分析] 这是Adobe公司2007年校园招聘的最新笔试题.这道题除了考察应聘者的C++基本功底外,还能考察反应能力,是一道很好的题目. 在Java中定义了 ...

  5. centos下编译安装mysql5.5/5.6

    2013年11月16日 19:39:13 centos 6 mysql 5.5.28 我只说些我出错的地方: cmake后删除的方法是 xargs rm < install_manifest.t ...

  6. Java for LeetCode 079 Word Search

    Given a 2D board and a word, find if the word exists in the grid. The word can be constructed from l ...

  7. AngularJS学习笔记1

    简介 AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使 ...

  8. java call sap

    1.下载需要的jar,windows用dll,linux用so win下载地址     linux下载地址 win下载地址new 2.环境: windows -> sapjco3.dll放到wi ...

  9. (十)stm32中FSMC的使用(用于LCD)

    FSMC全称“静态存储器控制器”. 使用FSMC控制器后,可以把FSMC提供的FSMC_A[25:0]作为地址线,而把FSMC提供的FSMC_D[15:0]作为数据总线. (1)当存储数据设为8位时, ...

  10. Android之canvas详解

    首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, y ...