搜索词>>ckeditor 耗时0.0030
  • CKeditor 5.0 如何获取纯文本数据

    CKeditor 5.0 如何获取纯文本数据CKeditor 5.0 如何获取纯文本数据
  • CKEditor4.4整合SprngMVC实现上传图片

    CKEditor4.4整合SprngMVC实现上传图片本教程适合java任何框架[springMVC,Struts1-2]以及servlet,其他语言同样可以参照传递参数方式<br /> 前言:ckeditorPHP版本是有个ckfinder插件管理图片库的,可是java版本却还是灰色的。<br /> 本人使用的是ckeditor最新版本4.4.7<br /> CKEditor的编辑器工具栏中有一项“图片域”,该工具可以贴上图片地址来在文本编辑器中加入图片,但是默认没有图片上传。<br /> <br /> 一、去掉预览中的英语<br /> 预览中是用英语说明的,对于我们国人来说是没有意义的。我们需要把它改成我们国语或者清空。那么问题来了?我们该怎么改呢?<br /> 方法有两种:<br /> <img alt="去掉预览中的英语" class="img-thumbnail" src="/assist/images/blog/7253e9f7-d1b8-4f69-b8ba-d7d8b62fe93b.png" style="height:543px; width:494px" /><br /> 1.修改image插件的源文件,打开ckeditor/plugins/image/dialogs/image.js,搜索“b.config.image_previewText”就能找到这段英语了,(b.config.image_previewText||'')单引号中的内容全删了<br />    <br /> 2.修改config.js配置文件,打开ckeditor/config.js, 在CKEDITOR.editorConfig = function(config) {….}中添加 <pre> <code class="language-apache">config.image_previewText = '外联图片请直接输入图片地址。';//这里的内容自己可以定义。同样可以设置""空</code></pre> 二、打开ckeditor默认的图片上传控件<br /> Ckeditor实际是有一个默认的图片上传控件的,首先打开ckeditor/config.js配置文件在CKEDITOR.editorConfig = function(config) {….}中添加 <pre> <code class="language-javascript">config.filebrowserImageUploadUrl = 'upload.do?type=Image';//提示这里的type=image表示开启的图片上传功能。Flash,file上传的默认控件打开配置方式相同只是type不同 /* * config.filebrowserUploadUrl = 'upload.do?type=File'; * config.filebrowserImageUploadUrl = 'upload.do?type=Image'; * config.filebrowserFlashUploadUrl = 'upload.do?type=Flash'; */ </code></pre> 配置好了配置文件,这时候我们打开编辑器的图片插入界面:<br /> <img alt="对应前面的图片我们不难看出现在已经有上传图片的控件了。" class="img-thumbnail" src="/assist/images/blog/3fdf6fe3-119e-4fed-9ec9-dd252cef9608.png" style="height:487px; width:468px" /><br /> 对应前面的图片我们不难看出现在已经有上传图片的控件了。<br /> 三、结合后台上传图片<br /> 根据ckeditor的官方api我们知道,配置上传图片的form表单的action需要在配置文件ckeditor/config.js中添加 <pre> <code>config.filebrowserImageUploadUrl = 'upload.do?type=Image';//upload.do上传文件的请求url</code></pre> 这里的upload.do即上传的action这里对于java的Struts框架还是springMVC框架都是公用的。配置好了这里我们继续回到界面;<br /> 既然我们要上传图片到后端,我们首先得知道上传控件给我们定义的属性名分别是什么,那么我们打开火狐浏览器的firbug,随意点击一张图片点击上传:<br /> <img alt="这里我们可以看到通过get到后台的参数有" class="img-thumbnail" src="/assist/images/blog/dc3923a7-e322-4ddb-8904-06faa8cd1888.png" style="height:139px; width:393px" /><br /> 这里我们可以看到通过get到后台的参数有<br /> CKEditor值:editor<br /> CKEditorFuncNum值:0<br /> langCode值:zh-cn<br /> type值:Image<br /> <img alt="这里我们又可以知道通过post我们传到后端的参数" class="img-thumbnail" src="/assist/images/blog/43fee6c5-4e7d-4b9c-81b9-21bca48a37e3.png" style="height:161px; width:495px" /><br /> 这里我们又可以知道通过post我们传到后端的参数<br /> Upload值:二进制的图片<br /> 既然我们知道了这些参数,那么我们在后端就知道怎么接受参数了。<br /> SpringMVC接收参数方法: <pre> <code>import java.io.IOException; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.multipart.MultipartFile; /** * * * 图片上传测试类 */ @Controller public class ImageUplodController { @RequestMapping(value = "upload.do") public Object uploadImage(MultipartFile upload, String CKEditorFuncNum) { // upload即图片文件可直接转换成字节数组存数据库或其他云空间 try { byte[] imageBytes = upload.getBytes(); } catch (IOException e) { e.printStackTrace(); } // 处理图片....返回一个图片的URL // code...... // 最后返回一个URL给ckeditor;其中image/imagePath.png为image存后的路径;第一个参数来自前台的一个标志,第三个参数错误返回码 return "<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ", 'image/imagePath.png', '');</script> "; //这里返回的JavaScript代码为ckeditor API中回调函数要求返回格式 } } </code></pre> <img alt="import java.io.IOException; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.multipart.MultipartFile; /** * * * 图片上传测试类 */ @Controller public class ImageUplodController { @RequestMapping(value = "upload.do") public Object uploadImage(MultipartFile upload, String CKEditorFuncNum) { // upload即图片文件可直接转换成字节数组存数据库或其他云空间 try { byte[] imageBytes = upload.getBytes(); } catch (IOException e) { e.printStackTrace(); } // 处理图片....返回一个图片的URL // code...... // 最后返回一个URL给ckeditor;其中image/imagePath.png为image存后的路径;第一个参数来自前台的一个标志,第三个参数错误返回码 return "<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ", 'image/imagePath.png', '');</script> "; //这里返回的JavaScript代码为ckeditor API中回调函数要求返回格式 } }" class="img-thumbnail" src="/assist/images/blog/32e6798a-7fbc-4c01-8aa7-cf71e3fa9532.png" style="height:529px; width:493px" />
  • ckeditor编辑器上传的图片如何自动调整大小删除默认的宽高

    本文主要讲解一种方式解决ckeditor编辑器上传的图片时候会添加一个默认的图片的宽高等style属性本文主要讲解一种方式解决ckeditor编辑器上传的图片时候会添加一个默认的图片的宽高等style属性<br /> 首先找到ckeditor编辑器的image插件的js文件.在plugins/image/dialogs/image.js<br /> 打开后查找: <pre> <code>this.imageElement.setAttribute("style")||this.imageElement.removeAttribute("style");</code></pre> 将中间的||改为&& <pre> <code>this.imageElement.setAttribute("style")&&this.imageElement.removeAttribute("style");</code></pre> 如图:<br /> <img alt="1" class="img-thumbnail" src="/assist/images/blog/2f998548-c775-4216-bdc0-e9ddc65213c7.jpg" /><br /> <strong><span style="color:#FF0000">这样就会删除新增图片的style属性,修改后注意清空浏览器缓存,否则看不到效果哟。</span></strong>
  • CKeditor4.4.X版本添加程序代码高亮插件图文详解

    [JAVA]_图文详解CKeditor4.4.X版本添加程序代码高亮插件codesnippet,ckeditor[JAVA]_图文详解CKeditor4.4.X版本添加程序代码高亮插件codesnippet <h2>1.去CKeditor官网下载4.4.X及以上版本</h2> <p>官网直通车:<a href="http://ckeditor.com/download" rel="nofollow" target="_blank">点击</a></p> <a href="http://ckeditor.com/download" rel="nofollow" target="_blank"><img alt="1" class="img-thumbnail" src="/assist/images/blog/e50a9e96-efa7-44b3-a846-96da954cfc05.png" style="height:447px; width:966px" /></a> <h2>2.下载CKeditor插件codesnippet </h2> <p>直通车:<a href="http://ckeditor.com/addon/codesnippet" rel="nofollow" target="_blank">点击</a></p> <a href="http://ckeditor.com/addon/codesnippet" rel="nofollow" target="_blank"><img alt="3" class="img-thumbnail" src="/assist/images/blog/6217f82a-3392-487e-9fd1-9f50d39402ef.png" style="height:349px; width:584px" /></a> <h2>3.打开CKeditor的配置文件config.js</h2> 加入配置<br /> <img alt="1" class="img-thumbnail" src="/assist/images/blog/7cd9c5f2-bbde-4888-9e09-7ff1eda55029.png" style="height:445px; width:776px" /><br /> 加入后<br /> <img alt="3" class="img-thumbnail" src="/assist/images/blog/0fe9f311-6a89-4068-b8e5-3485e80d6840.png" style="height:152px; width:629px" /><br /> 编辑器上就多了个图标<br /> <img alt="213" class="img-thumbnail" src="/assist/images/blog/7e7d271c-1799-4df8-bcc1-c877adde8abf.png" style="height:39px; width:112px" /><br /> 点击即可插入程序代码。<br /> <img alt="12311" class="img-thumbnail" src="/assist/images/blog/ab0b1fa5-658c-423e-bc46-edb5c4f1aaee.png" style="height:576px; width:827px" /><br /> 展示页面需要导入CSS.JS以及初始化,具体如下 <pre> <code class="language-html"><!-- code高亮模块CSS --> <link rel="stylesheet" type="text/css" href="ckeditor/plugins/codesnippet/lib/highlight/styles/monokai_sublime.css" /> <!-- code高亮模块JS --> <script type="text/javascript" src="ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script> <!--注意此初始化方法需要导入jQuery支持--> <script> $(function() { // 初始化代码高亮 hljs.initHighlightingOnLoad(); }); </script> </code></pre> 现在就可以在该页面显示高亮代码了:<br /> <img alt="dsf" class="img-thumbnail" src="/assist/images/blog/47a605fb-6210-43dc-a368-09316fd2c582.png" style="height:121px; width:765px" />
  • ckeditor绑定keyup/keydown等事件实现一些功能,比如实时保存

    ckeditor绑定keyup/keydown等事件实现一些功能,比如实时保存<br />   <pre> <code class="language-javascript">$(function(){ //1编辑器初始化 $('textarea#blog_content').ckeditor();//blog_content ckeditor的id //2.获取编辑器 var editor = CKEDITOR.instances.blog_content; //3.设置值,并添加绑定事件 editor.setData('默认值,可空',function(){ //绑定keydown事件,既绑定键盘按下事件,其他事件见jquery的相关事件名称 CKEDITOR.instances.blog_content.document.on("keydown", function(event){ //绑定按下的建值值 为ctrl+s(处理保存的快捷键) if (event.data.$.keyCode == 83 && event.data.$.ctrlKey) {//注意取值的方法,和一般的event参数不一样 event.data.$.preventDefault();//关闭默认的弹窗 save(true);//处理保存业务 } }); }); })</code></pre> <span style="color:#FF0000"><strong>注意:方法中的event和一般的event参数不一样</strong></span>
  • Linux shell(sh)编程纪要(持续更新)

    主要记录Linux系统中的shell脚本编程时。常遇到的一些语法用处记录。持续更新。<h2>1.shell中逻辑控制语句if用法</h2> 语法 <pre> <code class="language-bash">#1.简单if if [ 条件表达式 ];then #满足条件时执行 fi#结束if #2.if else if [ 条件表达式 ];then #满足条件时执行 else #不满足条件时执行 fi#结束if #3.if else if else if [ 条件表达式 ];then #满足上方条件时候执行 elif [ 条件表达式 ];then #满足上方条件时候执行 #... elif可有多个 else #上面的条件都不满足的在这里执行 fi#结束if </code></pre> <span style="color:#16a085"><strong>注意:条件两边的空格很重要。要确保方括号的空格。</strong></span><br /> <strong>判断语句常用条件</strong> <table cellspacing="0" class="table table-bordered table-hover" style="border-collapse:collapse; border:undefined; width:366pt"> <tbody> <tr> <td style="width:92pt">[ -f "somefile" ]</td> <td style="width:274pt">判断是否是一个文件</td> </tr> <tr> <td>[ -x "/bin/ls" ]</td> <td>判断/bin/ls是否存在并有可执行权限</td> </tr> <tr> <td>[ -n "$var" ]</td> <td>判断$var变量是否有值</td> </tr> <tr> <td>[ "$a" = "$b" ]</td> <td>判断$a和$b是否相等<img alt="yes" class="img-thumbnail" src="http://www.leftso.com/resources/framework/editor/ckeditor/plugins/smiley/images/thumbs_up.png" title="yes" /></td> </tr> <tr> <td>-r file</td> <td>用户可读为真</td> </tr> <tr> <td>-w file</td> <td>用户可写为真</td> </tr> <tr> <td>-x file</td> <td>用户可执行为真</td> </tr> <tr> <td>-f file</td> <td>文件为正规文件为真</td> </tr> <tr> <td>-d file</td> <td>文件为目录为真</td> </tr> <tr> <td>-c file</td> <td>文件为字符特殊文件为真</td> </tr> <tr> <td>-b file</td> <td>文件为块特殊文件为真</td> </tr> <tr> <td>-s file</td> <td>文件大小非0时为真<img alt="yes" class="img-thumbnail" src="http://www.leftso.com/resources/framework/editor/ckeditor/plugins/smiley/images/thumbs_up.png" title="yes" /></td> </tr> <tr> <td>-t file</td> <td>当文件描述符(默认为1)指定的设备为终端时为真</td> </tr> <tr> <td>-ne</td> <td>比较两个数字参数是否不相等</td> </tr> <tr> <td>-lt</td> <td>参数1是否小于参数2</td> </tr> <tr> <td>-le</td> <td>参数1是否小于等于参数2</td> </tr> <tr> <td>-gt</td> <td>参数1是否大于参数2</td> </tr> <tr> <td>-ge</td> <td>参数1是否大于等于参数2</td> </tr> <tr> <td>-f</td> <td>检查某文件是否存在(例如,if [ -f "filename" ])<img alt="yes" class="img-thumbnail" src="http://www.leftso.com/resources/framework/editor/ckeditor/plugins/smiley/images/thumbs_up.png" title="yes" /></td> </tr> <tr> <td>-d</td> <td>检查目录是否存在</td> </tr> </tbody> </table>   <h2>2.退出当前shell脚本</h2> 命令: <pre> <code class="language-bash">exit</code></pre> <br /> 使用介绍:<br /> 格式1: <pre> <code class="language-bash">exit</code></pre> 说明:退出。退出码不变,即为最后一个命令的退出码<br /> <br /> 格式2 <pre> <code class="language-bash">exit n</code></pre> 退出。设置退出码为n。<br /> <br /> 格式3 <pre> <code class="language-bash">exit $?</code></pre> 上一个命令的退出码。<br /> <br /> 退出码(exit status,或exit code)的约定: <ul> <li>0表示成功(Zero - Success)</li> <li>非0表示失败(Non-Zero  - Failure)</li> <li>2表示用法不当(Incorrect Usage)</li> <li>127表示命令没有找到(Command Not Found)</li> <li>126表示不是可执行的(Not an executable)</li> <li>>=128 信号产生</li> </ul>