Ueditor 专题

https://github.com/xwjie/SpringBootUeditor

 

提交表单
提交表单设置
按照部署编辑器的教程，完成编辑器加载

把容器放到form表单里面，设置好要提交的路径，如下面代码中的<form>标签

<!DOCTYPE HTML>
<html lang="en-US">

<head>
<meta charset="UTF-8">
<title>ueditor demo</title>
</head>

<body>
<form action="server.php" method="post">
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
这里写你的初始化内容
</script>
</form>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var editor = UE.getEditor('container');
</script>
</body>

</html>
上一篇: 1.4 目录介绍

 

 

UEditor

1.1 下载编辑器

git clone 仓库
npm install 安装依赖（如果没有安装 grunt , 请先在全局安装 grunt）
在终端执行 grunt default

$ npm install
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail o n node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible . Use 'npm ls graceful-fs' to find it in the tree.
npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\ node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! node v7.2.1
npm ERR! npm v3.10.10

npm ERR! shasum check failed for C:\Users\TANGCH~1\AppData\Local\Temp\npm-32152- e4fed653\registry.npmjs.org\underscore.string\-\underscore.string-2.3.3.tgz
npm ERR! Expected: 71c08bf6b428b1133f37e78fa3a21c82f7329b0d
npm ERR! Actual: 8d82a2fa42b2b76e72f8bb55b36212e17d8d5eda
npm ERR! From: https://registry.npmjs.org/underscore.string/-/underscore.str ing-2.3.3.tgz
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR! C:\github\editor\ueditor\npm-debug.log

 

MINGW64 /c/github/editor/ueditor (dev-1.5.0)
$ npm update minimatch@3.0.2
$ npm update -d
查看minimatch版本

$ npm -v minimatch
5.5.1

如果升级后依旧报错。就需要重装minimatch:

npm update minimatch
npm install -g npm@3

http://www.jb51.net/article/100594.htm

 

使用grunt打包源代码
随着 nodejs 和 grunt 的火爆，UEditor 采用了 grunt 来作为线下的合并打包工具，支持编码和后台语言指定。

支持版本
支持 UEditor 1.3.0+ 的版本

使用方法
线上下载ueditor
下载地址：ueditor，要下载"完整版 + 源码"
安装nodejs

下载 nodejs 并安装到本地
安装成功后，打开控制台，在控制台下输入
node -v
如果控制台输出nodejs的版本。那恭喜你，nodejs安装好了，可以使用ctrl+c退出node模式.
安装打包需要的grunt插件

以终端方式（windows用户用cmd）进入ueditor源码根目录，执行
npm install
这个命令会根据package.json文件，安装打包需要的grunt和grunt插件
安装结束后，会在ueditor目录下出现一个node_modules文件夹
执行打包命令

以终端方式（windows用户用cmd）进入ueditor源码根目录，执行
grunt
这个命令会根据Gruntfile.js执行打包打包的任务，运行过程 需要java环境 支持
命令完成后，ueditor目录下会出现dist/目录，里面有你要的打包好的ueditor文件夹，默认是utf8-php文件夹
打包其他版本
执行打包grunt命令时，可以传入编码和后台语言的参数

支持两种编码指定：--encode参数
utf8 (默认编码)
gbk
提供四种后台语言支持：--server参数

php (默认语言)
jsp
net (代表.net后台)
asp
例如:想要打包成编码是gbk，后台语言是asp版本，可执行命令:

grunt --encode=gbk --server=asp

http://fex.baidu.com/ueditor/#dev-bale_width_grunt

正确的初始化方式
UEditor为开发者提供了ready接口，他会在编辑器所有的初始化操作都结束时调用。保证你要做的操作能在一个完整的初始化环境中执行。

UE.getEditor('editor').ready(function() {
//this是当前创建的编辑器实例
this.setContent('内容')
}) UEditor的老用户会说，不是还有个addListener可以注册ready事件吗？
UE.getEditor('editor').addListener('ready', function() {
//this是当前创建的编辑器实例
this.setContent('内容')
}) 确实这样写也能达到效果，但这样创建有个小问题。如果的这段代码是用在第一次创建时就没有问题。但如果编辑器已经创建，你需要再次赋值，想使用同一段代码，这时，这里的事件ready是不会触发的。但你调用接口ready注入你的操作，这种方式，会判断如果你的编辑器已经初始化完成了，那ready将会自动加载注入的内容，如果还没有初始化结束，它会自己注册ready事件，当完成初始化后再掉起自己。所以建议开发者使用ready接口作为初始化时注入操作。

http://fex.baidu.com/ueditor/#qa-ready

 

 

 

 

如何自定义请求地址
本文档说明修改请求地址的方法。

应用场景
ueditor 1.4.2+ 推荐使用唯一的请求地址，通过GET参数action指定不同请求类型。 但很多用户都希望使用自己写好的上传地址，下面提供一种解决方法： 由于所有ueditor请求都通过editor对象的getActionUrl方法获取请求地址，可以直接通过复写这个方法实现，例子如下：

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
    if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
        return 'http://a.b.com/upload.php';
    } else if (action == 'uploadvideo') {
        return 'http://a.b.com/video.php';
    } else {
        return this._bkGetActionUrl.call(this, action);
    }
}

action类型以及说明
uploadimage：//执行上传图片或截图的action名称
uploadscrawl：//执行上传涂鸦的action名称
uploadvideo：//执行上传视频的action名称
uploadfile：//controller里,执行上传视频的action名称
catchimage：//执行抓取远程图片的action名称
listimage：//执行列出图片的action名称
listfile：//执行列出文件的action名称

http://fex.baidu.com/ueditor/#qa-customurl

如何阻止div标签自动转换为p标签
背景
刚开始使用UEditor的开发者，会发现一个现象，粘贴到编辑器中的内容如果带有div标签，待粘贴到编辑器之后，会发现粘贴到编辑器中的div已经被转换为p标签了。首先这不是一个bug,这是UEditor对于进入编辑器中的数据进行的过滤处理。在UEditor中表示段落的标签是p标签，很多的编辑操作都是基于p标签进行的处理。当然我们对div标签也做了兼容性的处理，如果你想保留div标签不让UEditor进行转换也是可以的。

阻止转换

    UE.getEditor('editorID', {
        allowDivTransToP: false
    })

http://fex.baidu.com/ueditor/#qa-allowDivToP

 

文档说明
支持版本：支持 UEditor 1.4.2+ 的版本

当前文档的例子是按照 php 后台介绍，其中的配置项以 图片上传 为例介绍，其他上传配置方法类似。

1 部署说明
UEditor 在静态服务器下，也可以正常加载到容器上，但是上传图片等后台相关的功能是不可以使用的，需要有后台语言支持才能正常使用。

1.1 选择后台语言
UEditor 提供了四种后台语言 php，asp，asp.net，jsp，你可以选择你熟悉的语言部署到你的服务器，本文后面以php为例子介绍。

当前文档介绍的是通用的后台配置方法，具体的配置，还需要移步各后台的使用说明：

php：PHP 使用说明
asp：ASP 使用说明
asp.net：AST.NET 使用说明
jsp：JSP 使用说明
1.2 配置 serverUrl 参数
UEditor 1.4.2+ 起，推荐使用统一的请求路径，在你部署好前端代码后，你需要修改 ueditor.config.js 里的 serverUrl 参数，改成 URL + 'php/controller.php'

上面的值php的配置值，其他语言请看对应的后台的使用说明。

1.3 检查是否正常加载后台配置项
UEditor 1.4.2+ 起，把前后端相关的配置项都放到后端文件 php/config.json 设置（配置介绍），在初始化时会向 serverUrl 发起获取后端配置的请求。

你可以测试你的网站下的路径 ueditor/php/controller.php?action=config 是否正常返回了json格式的后端配置内容，格式大致如下。如果这个请求出错，出现400、500等错误，编辑器上传相关的功能将不能正常使用。

 

{
    "imageUrl": "http://localhost/ueditor/php/controller.php?action=uploadimage",
    "imagePath": "/ueditor/php/",
    "imageFieldName": "upfile",
    "imageMaxSize": 2048,
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"]
    "其他配置项...": "其他配置值..."
}

http://fex.baidu.com/ueditor/#server-deploy

 

时间： 2024-09-29 08:45:46

Ueditor 专题的相关文章

ThinkPHP使用Ueditor的方法详解_php实例

本文实例讲述了ThinkPHP使用Ueditor的方法.分享给大家供大家参考,具体如下: 相信很多人现在还在用着FCkeditor,以前我也在用,可是后来发现百度的Ueditor之后,发现,Ueditor比Fckeditor更好看,操作性上也比Fckeditor好多了,所以还是尝试着使用ueditor,但是在ThinkPHP框架下使用ueditor还是遇到了一些问题,也花费了一些时间去解决这些问题,这样,在这里写一个关于ThinkPHP下使用ueditor的教程,给需要使用的人. 1.在网站的根

Swift语法专题十二——方法

Swift讲解专题十二--方法 一.引言         方法只是一个术语,其实就是将函数与特定的类型结合,类.结构体.枚举都可以定义方法,方法又分为实例方法和类型方法,类型方法类似于Objective-C中的类方法.Swift和Objective-C的一大不同是,Objective-C只有在类中可以定义方法. 二.实例方法基础         实例方法的语法和函数完全一致,其和具体类型的实例所关联,实例方法在调用时由类型的实例点语法进行调用来完成一些功能模块.示例如下: class Math

SEO优化人员是否知道标签与栏目、专题、关键词之间的区别

摘要: 相比网站的关键词我们对文章标签的关注实在太少,不知道作为SEO优化人员的你是否知道标签与栏目.专题.关键词之间的区别?也许你会认为这是无关紧要的事情,如果是这样的话只能 相比网站的关键词我们对文章标签的关注实在太少,不知道作为SEO优化人员的你是否知道标签与栏目.专题.关键词之间的区别?也许你会认为这是无关紧要的事情,如果是这样的话只能说你是一个不善于思考问题的人,永远成不一个真正的SEO,因为SEO本身就是一个需要注重细节的职业.笔者发现现在几乎所有的文章都支持添加标签的功能,为什么一

求大神帮我解决ueditor单图上传按钮显示的问题asp.net

问题描述 求大神帮我解决ueditor单图上传按钮显示的问题asp.net 因为公司项目需要,昨天下载了一个.net版的ueditor富文本编辑器,现在也只是能在页面上显示出来了,还有很多的配置问题没解决,现在的问题是单图上传按钮是灰色的,怎么让它显示?还是多图上传的本地文件上传的配置问题,希望能来个大牛帮我解决一下,最好有个截图解释一下,才刚工作一个月,谢谢了

PS婚纱照处理 Photoshop婚片美化、效果渲染专题教程

 三联教程为大家整理PS婚纱照处理专题教程   PS婚纱照处理 Photoshop婚片美化.效果渲染专题教程:专题列表 Photoshop打造古典青绿色外景婚片教程 简介:图片色彩构成比较简单,以绿色和红色为主.调色也较为简单,可直接用调色工具调出自己想要的颜色.也可以用通道等来调色.主色调好后,局部再加上光晕,增强画面的高光.    PhotoShop调色教程:给外景婚纱片调出淡黄绿色调效果 简介:介绍用PhotoShop给外景婚纱照片调出淡黄绿色调效果,主要用曲线.色相饱和度.可选颜色.色彩

Swift语法专题四——字符串与字符

Swift解读专题四--字符串与字符 一.引言         Swift中提供了String类型与Characters类型来处理字符串和字符数据,Swift中的String类型除了提供了许多方便开发者使用的方法外,还可以与Foundation框架的NSString类进行转换,使用起来十分方便. 二.String基础         在Swift中,使用双引号来定义字符串,开发者可以通过如下代码来创建一个字符串常量: let str = "Hello, playground" 可以通过

Ueditor配置及在项目中的使用

引言 上篇中简单介绍了Ueditor的两种定制方式,想了解的请戳这里:Ueditor的两种定制方式.在项目中,Ueditor该怎么使用更方便呢?很容易让人想到将ueditor放入用户控件页,可以拖到需要的地方. Ueditor结构 Ueditor使用步骤 一,修改配置文件ueditor.config.js,配置Ueditor路径 1 window.UEDITOR_HOME_URL = "/Ueditor/";//"相对于网站根目录的相对路径"也就是以斜杠开头的形如&

专题页设计技巧浅谈

  先以CP设计的的这个奥运专题为例分析专题设计中常遇到的一些问题. 这个页面存在的问题很多,我们来一个个分析. 首先第一个问题首屏高度: 分析一下常见分辨率及浏览器下高度数据: 在window XP常见分辨率1024×768下我们除掉任务栏,浏览器菜单栏以及状态栏后剩下的网页首屏高度平均值是584. Win7下是574.在window XP常见分辨率1440×900下我们除掉任务栏,浏览器菜单栏以及状态栏后剩下的网页首屏高度平均值是716.Win7下是706. 综合上面表中个分辨率及浏览器下的

Ubuntu Linux专题

Ubuntu 14.04中用Chrome浏览网页内容显示正常但是Tab显示乱码 Ubuntu 14.04安装mysq时报错问题 Ubuntu 12.04 创建用户失败如何解决 ubuntu安装软件提示无法打开锁文件 /var/lib/dpkg/lock 解决Ubuntu或Fedora虚拟机重启网络时报错问题 如何在ubuntu下创建桌面快捷方式 在ubuntu主线版本下的/var/cache/apt/archives文件夹说明:系统 ubuntu系统播放视频时黑屏的问题 Ubuntu及VMwar