顾陌 发布时间:2014-08-21 分类:分享 阅读:19115次 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
发布于 2020-03-14 22:19:12 回复该评论
发布于 2015-12-04 11:19:34 回复该评论
发布于 2015-01-07 09:08:54 回复该评论
发布于 2015-01-07 11:40:45 回复该评论
发布于 2014-08-23 13:42:42 回复该评论
发布于 2014-08-22 00:01:51 回复该评论
发布于 2014-08-21 09:58:56 回复该评论
发布于 2014-08-21 09:11:39 回复该评论
发表评论:
◎欢迎您的参与讨论。