百度ueditor1.4.3简单配置教程

顾陌 发布时间:2014-08-21 分类:分享 阅读:18019次 8 条评论

公司项目最近准备用到ueditor,所以百度了下ueditor教程。但是1.2x版本的网上教程比非常多,最新的ueditor1.3.4相关的教程一个没有。1.4.3与之前的版本配置都发生了变化,之前的版本图片上传的路径都在ueditor.config.js文件中,但到了1.4.3版本后的配置文件就到了net文件夹(我用的是net版,php版则在php文件夹中)下的config.json中,等等..

我是用的是net版本来演示,php与jsp等同理。百度ueditor的配置非常简单,直接复制net版本的文件到项目中,这样就基本完成了(net版本需要引用Newtonsoft.Json)。如果需要配置图片、文件等的上传路径,则要修改net文件夹下的config.json文件。

文件上传路径配置 (以图片上传为例):

    /* 上传图片配置项 */
    "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
    "imageFieldName": "upfile", /* 提交的图片表单名称 */
    "imageMaxSize": 2048000, /* 上传大小限制,单位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    "imageCompressEnable": true, /* 是否压缩图片,默认是true */
    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix": "", /* 图片访问路径前缀 */
    "imagePathFormat": "/UploadFile/image/{yyyy}{mm}{dd}/{time}{rand:6}"

imageUrlPrefix图片访问路径前缀,图片上传完成后图片路径的前缀。默认“/ueditor/net/”(asp和.net下,应用程序目录不是网站根目录,需要给路径添加前缀)。

imagePathFormat图片保存的地址及保存规则。前面加上“/UploadFile”代表的是根目录下的UploadFile文件夹(相对于根目录的路径),使用非 "/" 开头的相对路径,则是相对于应用程序的目录。(只有net版和asp版可以设置相对路径,其他版本都是根目录下的路径)

编辑器工具栏按钮配置:

如需要修改编辑器上面的按钮及下拉框,可以在ueditor.config.js的toolbars节点上去除掉不要的按钮。如按钮“fullscreen”全屏按钮、“source”html按钮、“undo”,“redo”撤销恢复等...

初始化编辑器内容

<script id="editor" type="text/plain" style="width: 750px; height: 350px; margin: 0px auto;">设置editor内容(数据库中读取的内容)</script>

插入html代码

UE.getEditor('editor').execCommand('insertHtml', value);

获得编辑器的内容

UE.getEditor('editor').getContent();

获得编辑器的带格式的纯文本内容

UE.getEditor('editor').getPlainTxt();

设置编辑器的内容

UE.getEditor('editor').setContent('欢迎使用ueditor');

获取选中的内容

range.select();
var txt = UE.getEditor('editor').selection.getText();

获取纯文本内容

UE.getEditor('editor').getContentTxt();

判断编辑器里是否有内容

UE.getEditor('editor').hasContents();

.....

关键字词: ueditor1.4.3配置ueditor

已有8条留言

发表评论:

◎欢迎您的参与讨论。