• 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:UsersTANGCH~1AppDataLocalTemp pm-32152- e4fed653 egistry.npmjs.orgunderscore.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:githubeditorueditor pm-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

  • 相关阅读:
    ButterKnife的使用以及不能自动生成代码问题的解决
    Android事件传递机制
    Java中四种引用类型
    Swiper
    table合并单元格 colspan(跨列)和rowspan(跨行)
    常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全
    解决firefox、chrome不兼容cursor:hand 设置鼠标为手型的方法
    js 验证表单 js提交验证类
    怎么解决浏览器兼容性问题
    JavaScript作用域链
  • 原文地址:https://www.cnblogs.com/softidea/p/7827477.html
Copyright © 2020-2023  润新知