百度UEditor编辑器上手体验

原先一个项目使用的是kindEidtor编辑器,客户反馈有问题,要求修改,因此查阅资料后,决定改用百度UEditor编辑器.

因为要提交到后台更新到数据库,所以前端使用隐藏的textArea保存临时数据,提交到后台处理.

UEditor版本号:1.4.3,后台语言:.Net,UEditor要与站点字符集charset匹配.

UEditor与.Net相关的代码主要在图中红框处:

其中大部分文件不用修改,只需要修改config.json文件即可,config.json包含了上传的各类文件的基本配置,比如上传类型,上传大小限制,格式限制,保存路径,保存文件名等,使用到项目中,主要修改以下两项:imageUrlPrefix(访问路径前缀)和imagePathFormat(上传保存路径),为避免引起误解,我一般设置imageUrlPrefix为空,imagePathFormat为从站点根目录开始的路径,这样读写均使用imagePathFormat,其他文件一般不用动,如下:

    "imageUrlPrefix": "", /* 图片访问路径前缀 */"imagePathFormat": "/upload/image/{yyyy}{mm}{dd}/{yyyy}{mm}{dd}{hh}{ii}{ss}_{rand:3}", /* 上传保存路径

同时修改UEditor后台路径映射的代码，代码文件UploadHandler.cs第66行，确保后台文件保存位置正确和前台文件下载位置正确以及前后台路径正确对应，如下

        var savePath = PathFormatter.Format(uploadFileName, UploadConfig.PathFormat);//取得配置的从根目录开始绝对路径var appPhysicalPath = System.Web.Hosting.HostingEnvironment.ApplicationPhysicalPath;var appVirtualPath = System.Web.Hosting.HostingEnvironment.ApplicationVirtualPath;var localPath = appPhysicalPath + Server.MapPath(savePath).Replace(Server.MapPath("/"), "");//服务器文件保存路径savePath = appVirtualPath.TrimEnd('/') + savePath;//前台页面显示路径//var localPath = Server.MapPath(savePath);

另外文件大小还与webconfig中的maxRequestLength有关系,有需要的时候也要配置.

以上配置好后,就可以在页面引用UEditor编辑器了.

1、应用所需js文件

    <script type="text/javascript" charset="gbk" src="UEditor/ueditor.config.js"></script><script type="text/javascript" charset="gbk" src="UEditor/ueditor.all.js"> </script><script type="text/javascript" charset="gbk" src="UEditor/ueditor.parse.js"> </script><!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败--><!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文--><script type="text/javascript" charset="gbk" src="UEditor/lang/zh-cn/zh-cn.js"></script>

2、定义编辑器，其中editor是编辑器，textarea为前端提交到后台时保持编辑器数据的控件。

   <script id="editor" type="text/plain" style="width: 668px; height: 500px;"></script><textarea id="content1" cols="100" rows="8" style="display: none; width: 700px; height: 200px; visibility: hidden;" runat="server"></textarea>

3、实例化编辑器并在页面加载完成后从textarea赋值，UEditor编辑器的工具栏可以自定义需要的按钮，可以通过实例化的时候自定义，自定义配置项如下页面所示：http://fex.baidu.com/ueditor/#start-toolbar。

<script type="text/javascript">//实例化编辑器，使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例var ue = UE.getEditor('editor', {scaleEnabled: true//设置不自动调整高度, toolbars: [//['fullscreen', 'source', 'undo', 'redo', 'bold']['fullscreen', 'source', '|', 'undo', 'redo', '|','bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat', 'formatmatch', 'autotypeset', 'pasteplain', '|', 'forecolor', 'backcolor', 'selectall', 'cleardoc', '|','rowspacingtop', 'rowspacingbottom', 'lineheight', '|','customstyle', 'paragraph', 'fontfamily', 'fontsize', '|','indent', '|','justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', 'horizontal', '|','link', 'unlink', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|','simpleupload', 'insertimage','attachment', 'searchreplace', 'drafts']]});ue.ready(function () {//编辑器初始化完成再赋值  ue.setContent(document.getElementById('content1').value);  //赋值给UEditor });uParse('#content', {rootPath: 'UEditor'});</script>

toolbars: [['anchor', //锚点'undo', //撤销'redo', //重做'bold', //加粗'indent', //首行缩进'snapscreen', //截图'italic', //斜体'underline', //下划线'strikethrough', //删除线'subscript', //下标'fontborder', //字符边框'superscript', //上标'formatmatch', //格式刷'source', //源代码'blockquote', //引用'pasteplain', //纯文本粘贴模式'selectall', //全选'print', //打印'preview', //预览'horizontal', //分隔线'removeformat', //清除格式'time', //时间'date', //日期'unlink', //取消链接'insertrow', //前插入行'insertcol', //前插入列'mergeright', //右合并单元格'mergedown', //下合并单元格'deleterow', //删除行'deletecol', //删除列'splittorows', //拆分成行'splittocols', //拆分成列'splittocells', //完全拆分单元格'deletecaption', //删除表格标题'inserttitle', //插入标题'mergecells', //合并多个单元格'deletetable', //删除表格'cleardoc', //清空文档'insertparagraphbeforetable', //"表格前插入行"'insertcode', //代码语言'fontfamily', //字体'fontsize', //字号'paragraph', //段落格式'simpleupload', //单图上传'insertimage', //多图上传'edittable', //表格属性'edittd', //单元格属性'link', //超链接'emotion', //表情'spechars', //特殊字符'searchreplace', //查询替换'map', //Baidu地图'gmap', //Google地图'insertvideo', //视频'help', //帮助'justifyleft', //居左对齐'justifyright', //居右对齐'justifycenter', //居中对齐'justifyjustify', //两端对齐'forecolor', //字体颜色'backcolor', //背景色'insertorderedlist', //有序列表'insertunorderedlist', //无序列表'fullscreen', //全屏'directionalityltr', //从左向右输入'directionalityrtl', //从右向左输入'rowspacingtop', //段前距'rowspacingbottom', //段后距'pagebreak', //分页'insertframe', //插入Iframe'imagenone', //默认'imageleft', //左浮动'imageright', //右浮动'attachment', //附件'imagecenter', //居中'wordimage', //图片转存'lineheight', //行间距'edittip ', //编辑提示'customstyle', //自定义标题'autotypeset', //自动排版'webapp', //百度应用'touppercase', //字母大写'tolowercase', //字母小写'background', //背景'template', //模板'scrawl', //涂鸦'music', //音乐'inserttable', //插入表格'drafts', // 从草稿箱加载'charts', // 图表]
]

4，按以上部署后，页面就可以使用UEditor编辑内容了，其它资料可以从官网查询。

5，另外，百度UEditor编辑器的后台代码结构写的还是挺清晰明白的，不错，可以学习下。

百度UEditor编辑器上手体验相关推荐

ueditor html显示图片,百度ueditor编辑器上传图片后img标签的title、alt属性优化简单方法...
<百度ueditor编辑器上传图片后img标签的title.alt属性优化简单方法>要点: 本文介绍了百度ueditor编辑器上传图片后img标签的title.alt属性优化简单方法,希望 ...
百度UEditor编辑器关闭抓取远程图片功能（默认开启）
2019独角兽企业重金招聘Python工程师标准>>> 这个坑娘的功能,开始时居然不知道如何触发,以为有个按钮,点击一下触发,翻阅了文档,没有发现,然后再网络上看到原来是复制粘贴非白 ...
html编辑器 br 被div,百度Ueditor编辑器DIV,html标签替换及代码被过滤问题解决方法...
解决"织梦DEDECMS使用百度Ueditor编辑器和代码高亮设置教程"中遗留的html标签过滤问题.前者资源盒子主要描述了如何在织梦CMS中使用百度Ueditor编辑器,但遗留了 ...
织梦html编辑器功能在哪,织梦dede自带编辑器替换百度ueditor编辑器
用过dedecms的朋友都知道dede自带的文本编辑器很不好用,且有些功能还需要我们自己手动去修改源码,才能完成我们想要的效果.现在广大用dedecms的朋友们,你们有福啦!我们可以利用百度的Uedi ...
百度ueditor编辑器注入漏洞修补查杀程序
百度ueditor编辑器注入查杀程序,用于对百度ueditor的漏洞补丁进行查杀,使用时需要保证本地正确部署了.net 4.0服务. 百度ueditor编辑器是目前网上比较流行的一个网站编辑器,但由于 ...
[转]百度UEditor编辑器(php)
百度UEditor编辑器!合入PHP网站! 一.富文本内容交互 1.编辑器内容初始化(即往编辑器中设置富文本) 场景一:写新文章,编辑器中预置提示.问候等内容. 在editor_config.js文件 ...
百度UEditor编辑器,合入PHP网站
本文转自:http://www.cnblogs.com/losen/archive/2013/05/23/3094612.html 百度UEditor编辑器!合入PHP网站! Posted on 20 ...
关于dedecms织梦后台html编辑器不能复制word格式的处理方法/ kindEditor编辑器/百度(ueditor)编辑器的添加方法
Q:word文件内容粘贴到dede后台编辑器里,格式都失效了 dede自带的文本编辑器很不好用,且有些功能还需要我们自己手动去修改源码,才能完成我们想要的效果一.更换kindEditor编辑器操作步 ...
百度UEditor编辑器使用教程与使用方法
第一:百度UEditor编辑器的官方下载地址 ueditor 官方地址:http://ueditor.baidu.com/website/index.html 开发文档地址:http://uedito ...

百度UEditor编辑器上手体验

百度UEditor编辑器上手体验相关推荐

最新文章

热门文章