Ueditor

一、下载 http://ueditor.baidu.com/website/download.html#ueditor 二、效果图 三、示例 引入js <script type="text/javascript" src="<?php echo base_url() ?>static//plugins/ueditor/ueditor.config.js"></script> <script type="text/javascript" src="<?php echo base_url() ?>static//plugins/ueditor/ueditor.all.min.js"></script> <script type="text/javascript" src="<?php echo base_url() ?>static//plugins/ueditor/lang/zh-cn/zh-cn.js"></script> <textarea name="post[content]" id="content" style="width: 100%;" class="mr5"><?php echo @$data['content'] ?></textarea> UE.delEditor('content'); UE.getEditor('content', {

1.示例中第2点文件所放置的目录 下载文件 http://xiumi.us/connect/ue/v5/xiumi-ue-dialog-v5.html ， 将其 放置于UEditor网页的目录内。 如果您将其放置于其他目录， 请修改 中相应的内容 : 这个目录是指加载ueditor所在页面目录，这个html是弹出框。 2.选择对勾，秀米内的编辑内容没有加载到当前的ueditor内 这个比较坑，秀米官网并没有说要更改其他文件。 但是通过调试工具发现，在 xiumi-ue-dialog-v5.html 中line25-26， 加载了ueditor中的 internal.js文件，而这个文件的路径是需要更改成自己的项目文件路径。 <script type="text/javascript" src="dialogs/internal.js"></script> <script> 3.选择对勾后，秀米内的内容加载到本地ueditor中时，样式丢失 这个有篇博客说明了原因，具体见http://www.cnblogs.com/theroad/p/5761743.html。 解决办法是，更改ueditor.config.js文件中line412，将section行改为section:['class', 'style']，不过滤style和class。 所使用的ueditor版本为1.4.3

作者： 知晓云 - 小程序开发快人一步 wxParser 小程序插件时隔一年终于更新了。这次更新主要针对在 gitthub 上同学们提出的 issue 进行一些特性的更新，更新后的 wxParser 将支持更多可配置项，让富文本更完美地在小程序端显示。 新特性： image-lazy-load 属性，支持给所有图片设置懒加载； image-preview 属性设置图片是否支持点击放大，默认 true，点击放大； bindImgLoad 事件，监听小程序 image 标签的 bindload ，即图片加载完成的事件； 组件生命周期的 ready, attached, detached 的监听事件，通 bind:ready,bind:attached, bind:detached 进行监听； 支持外挂 class，可以在 wxss 文件给富文本内容添加自定义样式。 插件能做什么？ 「wxParser」小程序插件由知晓云团队发布，经过对微信小程序富文本渲染引擎 wxParser 进行一层封装，解决了使用起来太过麻烦的问题。 使用「wxParser」插件并配合富文本编辑器，可以很方便地开发内容展示类小程序，使用知晓云富文本编辑器效果更佳。例如「知晓课堂」小程序中的微信小程序开发课程便是使用「wxParser」插件配合知晓云内容库完成的。 以对在知晓云编写的富文本内容进行解析为例

大家都知道，如果只是大概的实现一个简单的富文本编辑器，直接用execCommand就可以了，虽然不同浏览器对execCommand命令的反应不一样，最后效果是差不多的。当然，如果要严谨的，用像ueditor那种只有很少部分实现是用execCommand的富文本编辑器。 昨天，本屌就试着用execCommand搞一个简单的编辑器。在本屌看来，什么字体加粗，斜体，下划线，对齐，列表。。直接用execCommand就可以搞定，至于保存草稿，编辑器全屏，，那些也很好搞定，另外，稍微难点的在原光标位置插入图片也在 更简单的 编辑器从光标处插入图片(失去焦点后仍然可以在原位置插入) 里面说的很清楚了，开干。 容器 div contenteditable 然而理想是美好的，现实是残酷的，过程中遇到点坑。 1.插入的图片img标签display不能设置成block.有时候，为了消除低版本ie图片底部间距，可能会很干脆的把所有img的样式设置成display:block;.这样的后果是在ie8中，无法通过移动光标，或点击鼠标让光标到图片后面,在ie6,7中，同样无法通过移动光标让光标到图片后面，但可以点击鼠标做到。 其实可以看到就算光标可以移到图片后也没啥用，因为display:block的缘故，一输入马上就跳到下一行了。 ie8 ie7 ie6 2.如果按照 更简单的 编辑器从光标处插入图片

首先去七牛云官网下载phpSDK工具放在Think/library/Vendor下。 ueditor后台调用方法： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 /** * 上传文件 * @param */ public function UploadSomething(){ header( "Content-Type: text/html; charset=utf-8" ); error_reporting (E_ERROR); // 登录检测 if ( $this ->uid == 0){ if ( $_GET [ 'action' ] == 'config' ){ echo preg_replace( "/\/\*[\s\S]+?\*\//" , "" , file_get_contents ( "./Public/js/php/config.json" )); } else { echo json_encode( array ( 'state' => '请登录！' )); } exit ; } echo conditionChoice( $this ->uid); } 放在ThinkPHP的Common.php中： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

1. 找到ueditor中ueditor.config.js 修改serverUrl属性值， serverUrl: URL + "jsp/controller.jsp" toolbars定义的是编辑器里显示的button 按钮组 2. 将ueditor/jsp中lib下的jar拷贝到WEB——INF下的lib下ueditor.config.js中的controller。jsp才可以用。 3.更改ueditor/1.4.3/dialogs/image下image.js文件中的actionUrl属性值， actionUrl = "http://localhost:8081/sys/others/uploadup", 这个地址是自己上传图片的地址。 4.关注uploadSuccess这个方法，这个是上传图片后的回调函数。ret是返回的数据，返回数据是json串，参考jsp/src/com/baidu/ueditor/defice下的State和BaseState类。 uploader.on('uploadSuccess', function (file, ret) { var $file = $('#' + file.id); try { var responseText = (ret._raw || ret), json = utils.str2json(responseText);

　　 ueditor下载好之后直接复制到项目的WebContent目录下，并将ueditor\jsp\lib下的jar包复制或者剪切到项目的lib目录下。先看一下效果，如下： 1.文件的上传 　　 首先在ueditor/jsp目录下找到config.json文件，就拿Image上传来说吧。 　　 "imageUrlPrefix": "http://localhost:8080/HJZGG_BLOG", /* 图片访问路径前缀 */。开始的时候imageUrlPrefix这个属性值是空的。 　 另外一个就是"imagePathFormat": "/fileUpload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */。这个我已经改过了。 2.ueditor和struct2整合 如果项目中使用了Apache Struts2框架，将/* 过滤 ，由于该框架默认使用Apache的Commons FileUpload组件，和内建的FileUploadInterceptor拦截器实现文件上传，将request中的文件域封装到action中的一个File类型的属性中，并删除request中的原有文件域，这样就会导致ueditor文件上传不能成功。 解决办法：重写struct2的过滤器

1、下载包：从Ueditor的官网下载1.4.3.3jsp版本的Ueditor编辑器，官网地址为： 　　　　　　http://ueditor.baidu.com/website/ 2、下载好之后，将Jsp版本解压，解压后文件夹改名为ueditor,将文件夹中的jsp单独剪切到一边，之后将整个ueditor文件夹拷贝到Vue的public或者static目录下，项目结构如下： 3、修改 ueditor.config.js ，如下 4、在前面的工作中，我们找到jsp文件夹中的这个jar包ueditor-1.1.2，将其解压，反编译成java文件，复制到 后台工程中。 注意jsp文件夹中有个 config.json 文件，这是Ueditor上传功能所需的配置文件，找到将之复制到资源目录中。 5、原来Ueditor是通过访问controller.jsp文件来初始化配置文件以及进行上传操作的,我们现在将之用代码进行替换。下面看一下上传图片功能的源码： package com.plat.controller; import com.baidu.ueditor.ActionEnter; import com.platform.oss.OSSFactory; import org.json.JSONObject; import org.slf4j.Logger; import org.slf4j

# 让整个页面适配手机屏幕，包括编辑器 ./index.html中的head中添加一句： <meta name="viewport" content="width=device-width, initial-scale=1.0" /> # 获取当前编辑器里面的内容（html格式） <button οnclick="save();">保存</button> <script> function save () { var content = ue.getContent(); /* JS code */ $.ajax({ .... }); } </script> # 初始化时就全屏 ./ueditor.config.js找到并启用： //,fullscreen : false //是否开启初始化时即全屏，默认关闭 修改为 ,fullscreen : true //是否开启初始化时即全屏，默认关闭 # 图标太多？管理图标 方法1: 直接修改初始配置文件：./ueditor.config.js中的 //工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的重新定义 , toolbars: [[ 'fullscreen', 'source', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline',

此时此刻,我正在用博客园推荐的TinyMCE编辑器写这个博客,突然想起最近在项目中使用 百度ueditor 编辑器中的一些经历.所以记录在此,与大家分享. 不得不说,百度ueditor是一款很好的在线编辑器,为开发者提供了诸多便利,你甚至可以用它来把word文档的内容按照一定的格式转换成html代码,然后再放进自己的项目中. 1.我们的项目中,用户在注册时有可能需要查看用户协议和隐私协议,而我们的文案是将这两个协议的内容放在word文档中,作为苦逼的开发人员,你需要把这些文字展示在html页面上,并且保持一定的样式,例如首行缩进,行距等等; 这里有两个解决方案: 第一种------word文档可以直接转换成html.不错,是有这个功能,但是经过本人亲测,2010版本的并不好用,但是word2003还不错. 第二种------我当时采用的方法就是利用word与notepad++协作调好文档的格式,再将调好格式的文档内容拷贝到ueditor编辑器.生成html代码,然后C V大法,扔进需要展示的html页面,在浏览器预览进行微调就可以了.至于怎么生成html代码,你可以看到博客园TinyMCE编辑器的工具栏处,有一个写有html的按钮.ueditor也如此,点击即可生成html代码, 这两种方法,请大家自行去比较哪种方便,哪种适合你..... 2.该说说今天这篇博客的主题了