在线编辑器jsp版
在JSP里使用CKEditor和CKFinder
在JSP里使用CKEditor和CKFinder目录1. 下载CKEditor相关的安装文件2. 安装CKEditor和CKFinder3. 在网页里使用CKEditor4. CKEditor的三种配置方式5. CKEditor的一些配置选项6. 关于CKEditor编辑器里面回车的问题7. 将CKFinder整合进CKEditor8. 配置CKFinder9. 在项目里配置CKFinder的servlet10. 更安全的使用CKFinder1. 下载CKEditor相关的安装文件∙CKEditor: 在/download页面左侧,可以下载到各种版本的CKEditor,包括完整版full、标准版standard、基础版basic等。
在页面右侧上方,还有可定制的下载,可以选择Toolbar类型、插件、语言等。
这里我们选择4.1版本的Full版本,下载后得到CKEditor_4.1_full.zip 。
∙CKEditor for java: 在/download页面右侧下部,可以下载到用于服务器端的工具,记得选择for java版本。
这里选择 3.6.4版本。
但是下载下来却是 ckeditor-java-core-3.5.3.jar。
不知道为什么。
∙CKFinder: 在/ckfinder/trial页面,可以下载到各种版本的CKFinder。
仍然选择java版。
这里我们下载的是 2.3.1版本,下载后得到CKFinder_java_2.3.1.zip。
2. 安装CKEditor和CKFinder∙解压CKEditor_4.1_full.zip,把解压得到的目录 ckeditor 完全复制到网站根目录下,也就是和WEB-INF同级。
可以给这个目录加上版本号,即ckeditor4.1。
∙把ckeditor4.1/samples 完全删掉,把ckeditor4.1/lang 里面除了en.js和zh-cn.js之外的文件删掉,把ckeditor4.1 下的README.md, CHANGES.md删掉。
基于Java Web的HTML在线文本编辑器解决方案
基于Java Web的HTML在线文本编辑器解决方案摘要:FckEditor作为众多优秀HTML在线文本编辑器之一,以其支持多语言的优势而受到众多国内外开发者的亲睐。
在Java Web开发中使用FCKeditor可以实现类似微软Word桌面文本编辑器的许多强大功能,因此掌握FckEditor在Java Web开发环境下的配置过程也是开发者必备的技能之一。
关键词:Jsp;FckEditor;HTML;在线文本编辑器2基于Java Web 的HTML在线编辑器解决方案著名的开源网页编辑软件FCKEditor在09年发布至现在已经更新到3.0版本,FckEditor由于其资源轻量化、配置简单、免费开源、文本编辑功能齐全、支持多浏览器、支持PHP、JavaScript、ASP、、ColdFusion、Java、以及ABAP等不同的编程语言的强大优势,受到众多开发者亲睐。
目前,众多的Java Web 项目中FckEditor成为开发者对在线编辑器的首选,为网络文本交互提供文本样式编辑、图片上传下载和附件上传下载的功能。
3FckEditor编辑器在Java Web开发中的配置3.1开发环境和FckEditor配置文件(1)开发环境:MyEclipse7.5 ,JDK1.6 ,tomcat6.0;(2)FckEditor配置文件:FckEditor2.6.6,FckEditor java demo 2.6;3.2FckEditor在Java Web中的基本配置(1)在MyExclipse文件下建设Java Web项目FckEditor。
(2)解压FckEditor_2.6.6.zip文件,将解压后的根目录下的FckEditor文件夹拷贝到SSH框架项目下的WebRoot目录里;(3)将下载FckEditor java demo 2.6文件解压后,把根目录下Web INF中的lib里5个.jar文件:commons fileupload 1.2.1.jar、commons io 1.3.2.jar、FckEditor java core 2.4.jar、slf4j api 1.5.2.jar及slf4j simple 1.5.2.jar 拷贝到SSH框架项目下的Web INF目录中的lib目录里。
js制作xml在线编辑器实例
js制作xml在线编辑器实例⽬录前⾔在线XML编辑器的需求技术预研可视化编程VSCODE插件在线编辑器最初形态:简单的在线XML编辑器⽤CodeMirror做编辑器学习XML,并提取出tags规则进化形态:加载树形⽂件结构和全⽂件校验功能的在线XML编辑器左侧⽂件树全⽂件校验功能⾮递归遍历树IndexDB保存⽂件内容究极进化形态:突破浏览器沙盒限制,实现对电脑本地⽂件的增删改更多的功能与细节不⾜与总结前⾔⼀年多没更新博客了,原因是疫情期间《骑马与砍杀2》发售,然后去写游戏MOD去了。
⽤C#⼤概写了7个⽉的游戏MOD,每天晚上肝到很晚,然后期间⼜因为介绍这个游戏MOD,学习了PR,然后做起了B站的UP主。
再到后⾯有了些别的想法和公司业务调整,也懒得写博客,不知不觉⼀年多也就过去了。
收获还是有的:⽐如在断更这个MOD时,不论是在中⽂站还是3DM的MOD站,这个MOD的下载量都是排第⼀的,⽽且甩第⼆名相当远。
如果有玩《骑砍2》MOD的朋友,应该猜出来我是谁了。
⼜⽐如在B站收获了五千多粉丝,从⼀开始说话结结巴巴,到最后也还是说得结结巴巴。
不过因为⾃⼰的剪辑,观看效果也还不错。
⼜⽐如深刻认识到做个UP和主播有多⿇烦,就我这拉胯的数据其实已经领先了B站很多UP主了。
UP主中更多的不是头部UP,⽽是视频0播放的UP主。
你可以看⼀下B站的最新视频,翻了⼏⼗页全是0播放,极为壮观。
有趣的⼈⽣体验增加了好了,⾔归正传。
现在基本MOD断更,UP主也懒得继续认真做了。
这⾥主要还是谈⼀下技术相关的,也就是⼀个纯前端实现,⽤于写MOD的XML在线编辑器。
它是⼀个仿VSCode风格的编辑器,可以⾃动学习游戏MOD⽂件⽣成约束规则,帮助我们实现代码提⽰和代码校验。
更重要的是它可以直接修改你电脑上的的⽂件。
以及⼀张成品展⽰图:本篇博客所涉及到的技术:CodeMirrorreact-codemirror2xmldomFileReaderIndexDBWeb WorkerFile System Access让我们从头开始讲起。
FCKeditor使用方法详解
FCKeditor使用方法详解目录一、FCKeditor简介 (2)1.1 FCKeditor是什么 (2)1.2 FCKeditor的特点 (3)二、安装与配置FCKeditor (5)三、基本功能使用方法 (6)3.1 文本格式化 (7)3.2 段落和列表操作 (9)3.3 图片和表格插入 (10)3.4 表单字段 (11)3.5 样式和脚本 (12)四、高级功能使用方法 (13)4.1 可视编辑器 (14)4.2 自动排版 (16)4.3 批量导入/导出 (17)4.4 国际化支持 (18)4.5 客户端存储 (20)五、自定义插件与扩展 (21)5.1 如何安装插件 (22)5.2 插件的使用方法 (24)5.3 开发自定义插件 (25)六、常见问题与解决方案 (27)6.1 常见问题列表 (28)6.2 问题解决步骤 (29)七、实例演示 (30)7.1 创建一个简单的HTML页面 (31)7.2 在页面中添加FCKeditor (32)7.3 配置和使用FCKeditor的各种功能 (34)八、FCKeditor在主流开发框架中的应用 (35)8.1 PHP+MySQL环境下的应用 (36)8.2 环境下的应用 (37)8.3 Java/Spring环境下的应用 (39)九、总结与展望 (39)9.1 FCKeditor的优点 (40)9.2 FCKeditor的局限性与未来发展趋势 (41)一、FCKeditor简介FCKeditor是一款由德国Maxthon公司开发的强大的网页文本编辑器,它具有丰富的功能、高度的可定制性和易用性,被广泛应用于各种Web应用中,如论坛、博客、新闻发布等。
FCKeditor不仅提供了基本的文本编辑功能,还支持图像、表格、超链接等元素的插入和编辑,以及自定义插件和宏,可以满足用户的各种编辑需求。
FCKeditor采用了基于JavaScript的富文本编辑技术,具有高效的性能和较小的体积,可以轻松地集成到各种Web应用中。
FCKeditor (jsp在线编辑器)配置总结
FCKeditor (jsp在线编辑器)配置总结折腾了两天,从eWebEditor到CKeditor再到FCKeditor真是费足了劲了!本人比较喜欢开源的,在网上狂搜一通最后被CKeditor强大的功能和华丽的界面吸引的五体投地~~,高高兴兴的下载了CKeditor,花费了半天的时间终于把CKeditor配置好了,结果一点图片发现连个上传图片的按钮都没有(~~~~(>_<)~~~~ ),原来还需要一个CKfinder插件。
于是又兴冲冲的跑到官网上找CKfinder,找到最后却发现就是没有java版的!!!而且这个插件好像是要收费的,哎~真是郁闷死了。
不能用CKeditor那就用FCKeditor吧,呵呵,下面牢骚归正传:一、首先到官网下载最新版本的FCKeditor 2.6.5下载地址:/project/downloading.php?group_id=75348&filename=FCKeditor_2.6.5.zip FCKeditor.Java 2.6 要下的有fckeditor-java-demo-2.6.war (示例,我觉得下载这一个就够了)fckeditor-java-2.6-src.zip (源文件,如果你想看就下吧)fckeditor-java-2.6-bin.zip (我下了,但没有上)二、(1)、把FCKeditor 2.6.5解压到WebRoot下(2)、解压fckeditor-java-2.6-bin.zip,把文件夹中的fckeditor-java-core-2.6.jar以及lib中的所有jar包拷贝到你的web程序的lib中,fckeditor-java-demo-2.6.war中的slf4j-simple-1.5.8.jar也要拷进去(注意:slf4j-api和slf4j-simple的版本一定要一致)。
如果你觉得麻烦,那么就从fckeditor-java-demo-2.5.war 中直接将lib文件夹下的所有jar包复制到项目的lib中,我就是这么做的。
JS开发富文本编辑器TinyMCE详解
JS开发富⽂本编辑器TinyMCE详解⼀、题外话最近负责了⼀个cms⽹站的运维,⾥⾯存在很多和编辑器有关的问题,⽐如编辑⼀些新闻博客,论⽂模块。
系统采⽤的是FCKEditor,⾃我感觉不是很好,如下图特别是在⽤户想插⼊⼀个图⽚的话,就很⿇烦,所有⽤户共享⼀个⽂件⽬录,这样就不好了,于是便想到了TinyMCE编辑器,博客园默认的也是这个编辑器,接下来,我们开始吧⼆、TinyMCE编辑器集成步骤2.1:下载相关⽂件(1)下载TinyMCE插件包,如下图所⽰,下载开发版(2)下载其他功能包包括中⽂语⾔包zh_CN.js,图⽚上传操作需要的plugin.min.js和jquery.form.js这⼀点很重要,很重要,很重要哦下载完成后如下图所⽰2.2:操作步骤(1):复制TinyMCE到项⽬中解压下载到的tinymce_4.6.4_dev.zip,解压后会有⼀个tinymce⽂件夹,将整个⽂件夹放到WebContent⽬录下,⽬录结构如下图所⽰(2):页⾯集成TinyMCE在页⾯的JS标签中初始化TinyMCE编辑器,代码如下所⽰<script type="text/javascript">tinymce.init({selector: "textarea",upload_image_url: './upload', //配置的上传图⽚的路由height: 400,language:'zh_CN',plugins: ['advlist autolink lists link charmap print preview hr anchor pagebreak','searchreplace wordcount visualblocks visualchars code fullscreen','insertdatetime media nonbreaking save table contextmenu directionality','emoticons template paste textcolor colorpicker textpattern imagetools codesample toc help'],toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',toolbar2: 'print preview media | forecolor backcolor emoticons | codesample help',image_advtab: true,templates: [{ title: 'Test template 1', content: 'Test 1' },{ title: 'Test template 2', content: 'Test 2' }],menubar: false});</script>运⾏如下图所⽰,基本的集成已经完毕三、TinyMCE编辑器本地上传图⽚功能注:默认的TinyMCE是没有上传本地图⽚到服务器的功能的,所以这⾥我们需要⾃⼰实现,下⾯我们就说⼀说具体的实现步骤3.1:集成uploadimage插件在./tinymce/js/tinymce/plugins⽬录下新建⼀个uploadimage⽬录,放⼊下载的plugin.min.js,⽬录结构如下图所⽰3.2:在TinyMCE初始化中添加上传图⽚按钮tinymce.init({selector: "textarea",upload_image_url: './upload', //配置的上传图⽚的路由height: 400,language:'zh_CN',plugins: ['advlist autolink lists link charmap print preview hr anchor pagebreak','searchreplace wordcount visualblocks visualchars code fullscreen','insertdatetime media nonbreaking save table contextmenu directionality','emoticons template paste textcolor colorpicker textpattern imagetools codesample toc help uploadimage'],toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',toolbar2: 'print preview media | forecolor backcolor emoticons | codesample help uploadimage',image_advtab: true,templates: [{ title: 'Test template 1', content: 'Test 1' },{ title: 'Test template 2', content: 'Test 2' }],menubar: false});再次运⾏,发现在编辑器的菜单栏多了⼀个图⽚的按钮就是上传图⽚了(TinyMCE默认有⼀个image,可以去掉,因为那个image只可以给⽹络图⽚的URL),总这⾥plugins⾥⾯已经把默认的image去掉了,如下图3.3:实现上传本地图⽚到服务器的功能前提:需要先⽤java实现⼀个upload⼯具类,此⼯具类可以完成本地图⽚上传到服务器,并返回图⽚的URL给ajax,ajax在success的⽅法中接收URL并向TinyMCE中插⼊⼀个image标签JS核⼼代码如下,已包含在plugin.min.js⽂件中,这⾥注意TinyMCE的版本不⽤命令可能会有差异success: function (data) {//alert('2222');//alert(data);if (data!=null) {//alert('4444');editor.focus();//tinyMCE 4.X版本的插⼊对象tinyMCE.activeEditor.insertContent('<img src="'+data+'"></img>');// editor.selection.setContent(dom.createHTML('img', {src: src}));// data.file_path.forEach(function (src) {// editor.selection.setContent(dom.createHTML('img', {src: src}));// })}ajax提交form表单的操作中还⽤到了form.ajaxSubmit,所以需要在编辑器的页⾯引⼊jquery.form.js 包,整体如下所⽰<script type="text/javascript" src="./tinymce/js/jquery-1.11.1.min.js"></script><script type="text/javascript" src="./tinymce/js/tinymce/tinymce.min.js"></script><script type="text/javascript" src="./tinymce/js/tinymce/jquery.tinymce.min.js"></script><script type="text/javascript" src="./tinymce/js/jquery.form.js"></script>实现效果,点击图⽚上传可以从本地选择图⽚⽂件,确定后ajax异步上传,并且返回图⽚的URL,让TinyMCE执⾏插⼊img标签的操作四:演⽰⼀个编辑器发布⽹页内容的例⼦4.1:添加发布按钮在编辑器页⾯下⾯添加⼀个发布⽂章的按钮,定义onclick事件为GetTinyMceContent()function GetTinyMceContent(){// <!--// http request⽅式b_content的参数不能太长,太长会截断,这⾥只是做演⽰编辑器,真实情况是获取到内容到数据库然后// 展⽰的时候在页⾯遍历数据库字段content的内容// -->//alert('11');window.location.href="blog.jsp?b_content="+tinyMCE.activeEditor.getContent();}4.2:添加⽂章显⽰页⾯如下图所⽰<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>⽂章内容-HTML</title></head><body><h2 align="center">我的第⼀篇博⽂</h2><%= request.getParameter("b_content") %></body></html>4.3:运⾏效果在编辑器输⼊⼀些内容,并上传⼀个图⽚,如下图⽰点击发布⽂章的按钮,如下图所⽰,发布成功可以在⽹页查看⽂章的输出格式,⼤功已经告成!4.4:总结在真实的环境中TinyMCE的内容不会通过在Request请求的后⾯以?参数名=参数值,然后在页⾯<%= request.getParameter("b_content") %>的形式处理,这⾥只是做⼀个流程的演⽰就没涉及数据库内容。
前端开发技术的代码编辑器推荐
前端开发技术的代码编辑器推荐随着互联网及移动设备的快速发展,前端开发作为一个热门领域吸引了越来越多的人才。
在前端开发中,代码编辑器是一种至关重要的工具,能够提供便捷的编码环境和丰富的功能,提高开发效率和代码质量。
本文将推荐几款备受欢迎的前端开发代码编辑器,帮助开发者选择适合自己的编辑器。
1. Visual Studio CodeVisual Studio Code(以下简称VS Code)是一款由Microsoft开发的免费、开源的代码编辑器。
它支持跨平台操作系统,具备强大的扩展性和丰富的插件生态系统。
VS Code提供了多种编程语言的语法高亮和智能代码完成,能够快速识别错误和警告,并且集成了Git版本控制工具。
此外,VS Code还支持调试功能和内置终端,方便开发者进行调试和运行代码。
2. Sublime TextSublime Text是一款轻量级的代码编辑器,支持Windows、macOS和Linux系统。
它具有简洁美观的界面和极快的启动速度,能够快速处理大型项目。
Sublime Text支持各种编程语言的语法高亮和代码补全,还提供了强大的多光标编辑和宏命令功能。
此外,Sublime Text可通过插件扩展增加更多功能,如版本控制、代码调试等。
3. AtomAtom是由GitHub开发的一款免费、开源的代码编辑器,支持跨平台操作系统。
Atom具有现代化的界面和丰富的可定制性,可以根据个人喜好设置外观和功能。
它支持多种编程语言的语法高亮和代码补全,并且提供了强大的多光标编辑和拆分窗口功能。
Atom还具备Git集成和丰富的插件系统,可以拓展更多功能和工具。
4. WebStormWebStorm是由JetBrains开发的一款专门为Web开发设计的集成开发环境(IDE)。
它支持JavaScript、HTML和CSS等多种前端开发语言,提供了强大的语法分析和代码补全功能。
WebStorm具有智能错误检测和自动修复,能够快速识别代码问题并提供修复建议。
jsp可以作为网页开发语言吗
jsp可以作为网页开发语言吗
是的,JSP(JavaServer Pages)可以用作网页开发语言。
1.JSP是一种使用Java编程语言创建动态Web页面的技术。
它允许将Java代码嵌入到HTML页面中,以便在服务器端生成动态内容。
JSP广泛应用于Java EE(Java Enterprise Edition)平台上的Web应用程序开发。
2.通过使用JSP,您可以轻松地与后端Java代码进行交互,
从而实现复杂的业务逻辑和数据处理。
您可以在JSP页面中使用Java标签、脚本和表达式,以及JSP特有的标签库(如JSTL)来实现动态内容的呈现和交互性。
3.JSP通常与Servlet一起使用,Servlet负责接收和处理
HTTP请求,而JSP负责生成响应的HTML内容。
这样,通过结合Servlet和JSP,可以构建功能强大且具有动态性能的Web应用程序。
需要注意的是,JSP本身不是一种独立的编程语言,而是一种在Java基础上扩展的技术。
因此,在使用JSP进行网页开发时,您需要具备一定的Java编程知识和经验。
ueditor1.4.3jsp utf-8版配置使用教程
Ueditor在线编辑器配置示例1.简介UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。
2.下载首页地址:/website/index.html,点击下载,可以根据需要下载php、aps、jsp、.net版本。
由于1.4版本和1.3版本内容变更较大,本例中使用了最新版本1.4.3.1 jsp utf-8 版本进行测试。
3.配置下载ueditor后,放入系统的js库中,由于本例的相同功能的ewebeitor 放在webroot下,本例中也直接放入的webroot下,结构图如下:首先配置通用配置的控制器路径,文件名为:ueditor.config.js。
此文件配置需要对应下载的版本,即jsp版对应修改:serverUrl: URL + "jsp/controller.jsp"修改了通用配置后,还需要修改对应的上传文件、图片等路径,我们需要根据我们配置的版本去设置对应目录的内容,jsp版本如下:实际配置如下图:下面还有对应图片、视频的配置,与图片配置类似。
4.问题4.1jar问题需要的jar都已在ueditor中包含,直接拷贝至项目的lib中并加入classpath中即可。
1.4.3版本需要commons-io-2.4.jar支持。
所以在buildpath中需要将该包放置靠前。
4.2拦截器问题对于使用了Struts2或配置了其他拦截器的,需要将该请求放行如Struts2一般配置为:对于此类会拦截jsp的请求的配置,可以根据项目需要,1.改为*.action,*.do之类的请求匹配2.加入自己的拦截器,如本例所配置的com.linewell.core.filter.ExtendStrutsPrepareFilter中,不解的可以参照:/krysml/article/details/90065335.示例本例中上述配置好之后,可以实现图片编辑等内容页面代码示例如下:6.自定义:对于需要更多特性的定义,可以参照ueditor官网需要将图片插入数据库的,可以将ueditor-1.1.2.jar进行反编译,修改对于需要完全自定义的,可以直接抛弃ueditor-1.1.2.jar的引用,直接使用自定义的方法进行功能设定,返回对应的json数据即可。
20个在线代码编辑器和开发工具
20个在线代码编辑器和开发工具1. BluePen EditorBluePen Editor is a PHP-powered CSS editor that can be installed to any static or dynamic website and makes live CSS editing possible. Once triggered (with a bookmarklet), it opens the editor widget and makes all HTML elements hoverable so that blupePen can locate the CSS rules of them (like Chrome Dev Tools).Source2. Dirty Markup Dirty Markup is a free web-based application for cleaning up such code very easily. It has support for HTML(5), CSS and JavaScript by combining the powers of the popular HTML Tidy, CSS Tidy and JS Beautify.The editor used is the simple + functional AceEditor and there are multiple options for each beautifier to get the bestresults.Source3. Rendra Online HTML5 Editor Rendera is an online HTML5 editor which renders a realtime preview of your current work also transform your current work into CSS, Rendera supports HAML and SASS. Rendera makes learning HTML5 and CSS3 easy and it is built with CoffeeScript and Sinatra.Source4. Maqetta Maqetta is an open source project that provides WYSIWYG visual authoring of HTML5 user interfaces. The Maqetta application itself is authored in HTML, and therefore runs in the browser without requiring additional plugins or downloads. Maqetta is available under a commercial-friendly open source license. You can download the source code and install it on your own server,customize the code to fit your needs and/or contribute improvements to the open source project.Source5. Amy Editor Amy Editor is a collaborative text and source code editor for developers. It support JavaScript, Ruby, PHP, C#, Java, HTML, YAML, etc… programming languages. It has Syntax Highlighting, Smart indentation for each language, Code folding, Unlimited undo/redo, Customizable key shortcuts, etc… You c an easily change the color themes of the editor easily.Source6. JS Bin JS Bin is a webapp specifically designed to help JavaScript and CSS folk test snippets of code, within some context, and debug the code collaboratively.JS Bin allows you to edit and test JavaScript and HTML.Once you’re happy you can save, and send the URL to a peer for review or help. They can then make further changes saving anew if required.Source7. CSSDesk CSSDesk is an Online CSS Sandbox. It allows people to quickly test snippets of CSS code, and watch the result appear live. I had very high ambitions for the project. There are line numbers and syntax highlighting appear live in the text box as you type. One of the greatest things is that it allows users to share their code with others as well.Source8. Editpad EditPad is simple and minimal. No syntax highlighting, no project management…Just a plain page to type your text without any distractions.Source9. RegExr RegExr is an online tool for editing and testing Regular Expressions (RegExp / RegEx). It provides a simple interface to enter RegEx expressions, and visualize matches in real-time editable source text. It also provides a handy RegExp snippet sidebar with descriptions and usage examples to make it easier to learn Regular Expressions through trial and error.Source10. Codeanywhere Codeanywhere is a code editor in a browser with an integrated ftp client, and all popular web formats are supported (HTML, PHP, JavaScript, CSS, and XML).Source11. 9ne 9ne (Pronounced Nine) is a nice online text editor, based on the well known GNU Emacs. 9ne provides most of the basic Emacs functionalities and currently supports XML and Javascript syntax highlighting modes.Source12. Drawter Drawter is a tool written in JavaScript and based on jQuery library. It provides you the possibility to literally draw your website’s code. It runs on every single web-browser which makes it really useful and helpful. Each tag is presented as a layer you have drawn.Source13. Shift Edit Shift Edit provides code completion, syntax highlighting, live editing, revision history and many more.Source14. Darkcopy DarkCopy is a simple, full-screen text editor for distraction free writing. DarkCopy is for anyone who enjoys the simplicity of a typewriter, and wants to increase productivity by focusing only on writing.Source15. jsFiddle jsFiddle is a shell editor that eases writing JavaScript code by creating a custom environment based on popular JS frameworks. You can select the framework & the version of your choice (MooTools, jQuery, Dojo, Prototype, YUI, Glow,Vanilla). Also, if there is, you can add a complimentary framework like jQuery UI or MooTools More A great feature is the ability to save & share the code created with a unique URL generated. Optionally, jsFiddle has an embedding feature too. It is an almost perfect platform for trying & sharing your JavaScript code without the need of a website.Source16. Cloud9IdE Cloud9 IDE is an open source application that aims to provide a powerful and focused IDE for JavaScript developers. It is powered by the platform + makes use of HTML5, node.js, socket.io and many other projects. The application has a pretty fast text editor with bundled syntax highlighting support for JS, HTML, CSS and mixed modes. Cloud9 IDE has integrated debuggers for node.js and Google Chrome which can be started, paused and stopped from the IDE.Source17. Dabblet Dabblet is an interactive playground for quickly testing snippets of CSS and HTML code. It uses-prefix-free, so that you won’t have to add any prefixes in your CSS code. You can save your work in Github gists, embed it in other websites and share it with others.Source18. JS Hint JSHint is a community-driven tool to detect errors and potential problems in JavaScript code and to enforce your team’s coding conventions. It is very flexible so you can easily adjust it to your particular coding guidelines and the environment you expect your code to execute in. The goal is to help JavaScript developers write complex programs without worrying about typos and language gotchas.Source19. jsdo.it jsdo.it is a coding community for front-end engineers such as web designers, mark-up engineers, and JavaScript engineers. This is an online editor where you can try running your codes as you write. You can save your codes online as well as show them to the public as your work. Don’t worry even if you are not confident in your skill! Arrange shared codes and learn cutting-edge techniques.Source20. Gist BoxFinally I am adding Gist Box which lets you easily organize code snippets. Your library is saved to the cloud for backup. Never worry about snippets getting lost in the shuffle. GistBox was built on standard HTML5 technologies. On the go or at the office, you’ll always have GistBox.。
在线编辑器路径
/intraAdmin/imagemanager.php
/intraAdmin/phpmyadmin/db_create.php
/phpmyadmin/db_create.php
/intraAdmin/changelog.txt
/sm.txt
/123.asp
/db/%23ewebeditor.asp
/bbs/aspcheck.asp
/aspcheck.asp
/database/Default.aspx
/vcastr.xml
/Install.asp
/License.txt
/config.asp
/news_list.asp
/FCKeditor/editor/filemanager/upload/php/upload.php
/fckeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=../../connectors/asp/connector.asp
/FCKeditor/_samples/asp/asp
/FCKeditor/_samples/asp/sample04.asp
/FCKeditor/editor/filemanager/browser/default/connectors/aspx/connector.aspx?Command=GetFoldersAndFiles&Type=File&CurrentFolder=/shell.asp
JSP版(utf8编码)的Ueditor百度文章编辑器配置以及使用说明
JSP版(utf8编码)的Ueditor百度⽂章编辑器配置以及使⽤说明⼆话不说,先上图:我配置好的效果⼤致是这些功能:基本的⽂字编辑功能、图⽚上传功能、附件上传功能、百度/⾕歌地图搜索截图、视/⾳频发布功能。
这个插件是现今我⽤过觉得最舒服的编辑器,功能齐全强⼤,稍微修改下配置即可投放使⽤,来,⾛起!1、最新版的官⽅插件跟先前的版本不⼀致,所以我还是⽤先前的版本,是今年5、6⽉份版本。
插件包JSP版(utf8编码)下载地址(1分不算多吧,^_^,我的⾦币较少,赞助我点⾦币哈,评论即可获得1分)2、⽡公司⽤eclipse来开发,但是⼤多数⼈都是⽤myeclipse,所以我⽤myeclipse来演⽰:⾸先,新建⼀个webProject项⽬随便起个名字,如a,把解压后的ueditor插件包复制黏贴到webRoot根⽬录下然后打开editor_config.js这个配置⽂件,⼀看,⽡擦,乱码!然后点击项⽬a,按住Ctrl+回车,把项⽬a的环境从gbk换成utf8编码,此时乱码问题解决。
然后再这个配置⽂件的29⾏,找到URL= window.UEDITOR_HOME_URL||"/t/ueditor/";这句话,改成‘URL=window.UEDITOR_HOME_URL||"/项⽬名/ueditor/’即‘URL= window.UEDITOR_HOME_URL||"/a/ueditor/’;接着修改index.jsp⽂件,在<head/>上⾯加⼊引⽤的js包和css样式代码:[html]1. <script type="text/javascript" charset="utf-8" src="./ueditor/editor_config.js"></script>2. <script type="text/javascript" charset="utf-8" src="./ueditor/editor_all.js"></script>3. <LINK rel=stylesheet href="ueditor/themes/default/ueditor.css">然后在<body>标签⾥加⼊⽡调好的编辑器代码,如下:[html]1. <div align="center">2. <textarea id="newsEditor" name="content"> </textarea>3. <br/>4. <input type="submit" value="发布" >5. <script type="text/javascript">6.7. UE.getEditor('newsEditor');8.9. </script>10. lt;/div>保存的时候把⾸⾏的pageEncoding="ISO-8859-1"改为pageEncoding="utf-8",即可保存部署上传,然后浏览器打开http://localhost:8888/a/,我设置的端⼝是8888,⼤多数⼈⽤的都是http://localhost:8080/a/效果图就这样。
10个最好的JavaScript在线编辑器
10个最好的JavaScript在线编辑器开发者普遍使用的是传统的编辑器。
目前有很多文本编辑器可以选择。
我们曾经在《2016年最受欢迎的文本编辑器》一文中介绍过六种最受开发者欢迎的文本编辑器。
然而,对于要经常外出的开发者来说,他们很多时候要在途中处理工作。
因此,使用这些传统的编辑器就会不方便了,尤其是在使用JavaScript的时候。
JavaScript是一种前端脚本的编程语言,主要用于增加网页的交互作用。
从增加网页交互作用的简单功能开始,JavaScript的发展突飞猛进。
现在,JavaScript已经成为在Github上最活跃的编程语言了,而且在RedMonk有关2016 年编程语言的排名中,JavaScript排名第一位。
本文要讨论的不是这些统计数据,我们要介绍的是文本编辑器。
它们都是很出色的工具,但是缺乏移动性。
而JavaScript 是用来建设Web的,而Web也相应地提供了很棒的JavaScript在线编辑器。
使用JavaScript的编辑器可以帮助在你浏览器中直接编辑和编译你的代码。
代码编辑器还可以提供实时预览,因为这一切都是在网络上完成的。
使用JavaScript在线编辑器的好处好处有很多,主要包括了以下这些:•可以直接在网页上写代码•可以与大多数JavaScript在线编辑器进行无缝实时预览操作•无需进行任何安装工作•具有Git支持,因此你可以随时导入代码•保存代码的方法简单明了,你可以获得独立的URL与其他人分享你的代码•实验简单,而且会有回报下面我们一起看看10个最好的JavaScript 在线编辑器:1. Codepen.ioCodep可以让你发现自己在前端开发的才华。
这里是开发者使用JavaScript, HTML和CSS的最佳练习场。
在Codepen.io,你可以试编代码,并实时预览它们的变化。
如果你还想了解更多,这个网站就是让你可以不断探索的宝库,因为它提供数百种范例。
跟我学百度UEditor在线文本编辑器及应用实例——UEditor在线文本编辑器功能特性及官方技术文档
1.1跟我学百度UEditor在线文本编辑器及应用实例——UEditor在线文本编辑器功能特性及官方技术文档1.1.1UEditor在线文本编辑器功能特性及官方技术文档1、UEditor在线文本编辑器功能特性UEditor是一个开源免费的Web方式下的富文本编辑器(Rich Text Editor,简称RTE),而Web方式下的富文本编辑器其实也就是一种可内嵌于浏览器页面,并且实现所见即所得编辑功能的文本编辑器。
UEditor是由百度Web前端研发部开发并发布的一款所见即所得的富文本Web编辑器。
具有轻量、可定制和注重用户体验等技术特点,而且开源基于BSD协议,允许自由使用和修改代码。
UEditor在线文本编辑器官方网站上介绍的相关功能特性如下:如下示例图为应用UEditor在线文本编辑器所编辑的一篇新闻稿件的局部截图:2、官方网站/website/(1)官方网站地址读者可以在UEditor在线文本编辑器官方网站上(/website/)下载与UEditor相关的系统库文件。
(2)系统库下载页面的网址/website/download.html在UEditor在线文本编辑器官方网站上为开发人员提供了中文“UTF-8”和“GBK”两种不同的中文编码版本的下载链接,而且分为完整版和Mini定制版。
由于目前的Web应用系统开发平台有多种不同的语言形式,因此也为开发人员提供了PHP、ASP、和JSP等不同平台的版本。
开发人员然后根据自己的Web应用系统的开发平台选择不同版本的下载包。
本文下载JSP版本。
另外,还提供其它的资源文件,读者可以根据应用的需要选择性地下载。
3、UEditor在线文本编辑器在线Demo示例4、UMeditor(满足论坛系统的发帖框或回复框的应用需求在线文本编辑器)在线Demo示例5、UEditor在线文本编辑器提供在线入门帮助参考文档Ueditor提供了功能说明文档和使用说明文档。
Web程序员常用的15个源代码编辑器
Web程序员常用的15个源代码编辑器1. Visual Studio Code。
Visual Studio Code(简称VS Code)是由微软开发的一款轻量级源代码编辑器,它支持多种编程语言和框架,拥有丰富的插件生态系统,可以满足各种开发需求。
VS Code还提供了强大的调试功能和集成的终端,让开发者可以在一个界面中完成代码编写、调试和运行。
2. Sublime Text。
Sublime Text是一款快速、稳定、高效的源代码编辑器,它支持多种编程语言和框架,拥有丰富的插件和主题,可以满足开发者的个性化需求。
Sublime Text的多行编辑功能和快速查找替换功能让开发者可以轻松地进行大规模的代码编辑和重构。
3. Atom。
Atom是由GitHub开发的一款现代化的源代码编辑器,它支持多种编程语言和框架,拥有丰富的插件和主题,可以满足开发者的个性化需求。
Atom的实时预览功能和集成的Git功能让开发者可以更加高效地进行前端开发和版本控制。
4. Brackets。
Brackets是由Adobe开发的一款专注于前端开发的源代码编辑器,它支持HTML、CSS和JavaScript等前端语言,拥有丰富的插件和主题,可以满足前端开发者的需求。
Brackets的实时预览功能和集成的调试功能让前端开发者可以更加高效地进行网页设计和调试。
5. WebStorm。
WebStorm是由JetBrains开发的一款专注于Web开发的集成开发环境(IDE),它支持多种Web开发语言和框架,拥有丰富的功能和插件,可以满足Web开发者的需求。
WebStorm的智能代码补全和强大的调试功能让开发者可以更加高效地进行Web开发和调试。
6. Notepad++。
Notepad++是一款轻量级、快速、稳定的源代码编辑器,它支持多种编程语言和框架,拥有丰富的插件和主题,可以满足开发者的个性化需求。
Notepad++的多标签编辑功能和语法高亮功能让开发者可以更加高效地进行代码编写和查看。
几款在线文本编辑器的比较(jquery文本编辑器) 好学网 vhaoxue
1.FCKeditor他怎么样,我就不用多说了,网上多的很,不过有近300K的体积~~~2.xheditor这个控件好象用的人比较少,不过看起来感觉不错!JS+CSS+图片一共有50K,小啊,中文!3.tinyMCE网上的评价很高,值得一试,不过比较大,近200K了,中文!4.xinha网上的评价也很高,值得一试,不过体积也有120多K~~~5.CuteEditor据说CSDN用的是这个,收费的,不过有破解的版本.呵呵6.kindeditor美化的不错,有兴趣可以玩一玩,很好用,70~80K的样子,有中文语言!7.HTMLArea功能都大同小异的,可以试一试8.Cross-Browser Rich Text Editor很小,全部体积不超过40K,可以试一试9.SinaEditor新浪编辑器应该算是最贴近网友体验的编辑器,简洁、大方,并且使用方便、功能强大。
不过体积嘛,自己去看吧~~以下是我觉得一般的(个人感觉哈!)1.InnovaStudio WYSIWYG Editor要收费2.eWebEditor国人制作,收费的3.jwysiwyg虽然小,但不好用4.WYMeditor样式不好看,个人不喜欢~~5.openWYSIWYG样式不好看,有近100K6.Free Rich Text Editor相当不好用,连加个表格都是用专门的html页面,维护太复杂了7.MarkitUp无法"所见即所得"总结:我所认为值得一用的编辑器,一般都有完整的帮助文档,有社区在持续开发,最近有更新,在使用上方便灵活,支持多种定义方式,能所见即所得,在编码上安全与快捷,程序界面支持中文,界面风格比较漂亮,功能完整.如果想选择功能强大,流行的,可以选FCKeditor与tinyMCE,但代价为体积较大,在性能上值得考虑一下,如果功能要求不是很高,或者对性能有需求,则可以选择xheditor或者kindeditor,当然还有更小的,比如jwysiwyg或Damn Small Rich Text Editor ,但使用上很不方便,得不偿失.PS:如果有代码着色的需求,可以使用一个jquery的插件:highlighter,它对highlighter的非jquery版本做了一定的封装,使用非常方便!引用来源:/sxwlty/blog/item/dc5cc30942e78a2e6b60fbb6.htmljwysiwygWYSIWYG jQuery插件。
几种常用网页文本编辑器总结
文本编辑器应用总结一.lhgeditor文本编辑器lhgeditor组件文件结构:1. lhgeditor.js:组件的核心JS文件2. lhgeditor.css:组件的样式表文件3. images:组件所需的图片都在此文件夹中以上三个文件为组件所必须的三个文件,组件包中其它以“_”开头的文件为示例的演示文件,实际使用中不需要这些文件。
当然框架核心文件lhgcore.js是每个组件都必须用到的文件,记得加载组件前先要加载此文件。
lhgeditor组件使用说明:1. 在调用组件的页面加载lhgcore.j s和lhgeditor.js两个文件。
2. 在window.onload函数里加入J.editor.add(编辑器的id).init();例:<script type="text/javascript">window.onload = function(){J.editor.add('elm1').init();}</script><form action="_postdate.asp" method="post" target="_blank"><div><textarea name="elm1" id="elm style="width:600px;height:300px;">lhgeditor小型在线编辑器</textarea></div><input type="submit" value="Submit" /></form>二.nicEdit文本编辑器<script type="text/javascript">bkLib.onDomLoaded(function() {new nicEditor().panelInstance('area1');new nicEditor({fullPanel : true}).panelInstance('area2');new nicEditor({iconsPath : '../nicEditorIcons.gif'}).panelInstance('area3');new nicEditor({buttonList :['fontSize','bold','italic','underline','strikeThrough','subscript',' superscript','html','image']}).panelInstance('area4');new nicEditor({maxHeight : 100}).panelInstance('area5');});</script>//默认模式//new nicEditor().panelInstance('area1');<textarea cols="50" id="area1"></textarea>//All A vailable Buttons//new nicEditor({fullPanel : true}).panelInstance('area2');<textarea cols="60" id="area2">Some Initial Content was in this textarea</textarea>//new nicEditor({iconsPath : '../nicEditorIcons.gif'}).panelInstance('area3');<textarea cols="50" id="area3"></textarea>//自定义按钮//new nicEditor({buttonList :['fontSize','bold','italic','underline','strikeThrough','subscript','superscript','html','image']}).panelInstance('area4');<textarea cols="50" id="area4">HTML <b>content</b> <i>default</i> in textarea</textarea>//设置文本编辑器的最大高度//new nicEditor({maxHeight : 100}).panelInstance('area5');<textarea style="height: 100px;" cols="50" id="area5">HTML <b>content</b> <i>default</i> in textarea</textarea>三.kindeditor文本编辑器(1) 支持多种语言php、asp(2) 功能强大默认模式<script charset="utf-8" src="../kindeditor-min.js"></script><script charset="utf-8" src="../lang/zh_CN.js"></script><script>var editor;KindEditor.ready(function(K) {editor = K.create('textarea[name="content"]', {resizeType : 1,allowPreviewEmoticons : false,allowImageUpload : false,items : ['fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic','underline','removeformat', '|', 'justifyleft','justifycenter', 'justifyright', 'insertorderedlist','insertunorderedlist', '|', 'emoticons', 'image', 'link']});});</script><textarea name="content" style="width:700px;height:200px;visibility:hidden;">KindEditor</textarea>Multi Language Examples(多语言)<script charset="utf-8" src="../kindeditor-min.js"></script><script>var editor;KindEditor.ready(function(K) {K('select[name=lang]').change(function() {if (editor) {editor.remove();editor = null;}editor = K.create('textarea[name="content"]', {langType : this.value});});K('select[name=lang]').change();});</script><form><p><select name="lang"><option value="en">English</option><option value="zh_CN">简体中文</option><option value="zh_TW">繁體中文</option><option value="ar">Arabic</option></select></p><textarea name="content" style="width:800px;height:200px;"></textarea> </form>粘贴设置:<script charset="utf-8" src="../kindeditor-min.js"></script><script charset="utf-8" src="../lang/zh_CN.js"></script><script>KindEditor.ready(function(K) {K.create('#content1', {pasteType : 0});K.create('#content2', {pasteType : 1});K.create('#content3', {pasteType : 2});});</script>禁止粘贴<textarea id="content1" name="content" style="width:700px;height:200px; visibility:hidden;"></textarea>纯文本粘贴<textarea id="content2" name="content" style="width:700px;height:200px; visibility:hidden;"></textarea>HTML粘贴<textarea id="content3" name="content" style="width:700px;height:200px; visibility:hidden;"></textarea>自定义插件<script charset="utf-8" src="../kindeditor-min.js"></script> <script charset="utf-8" src="../lang/zh_CN.js"></script> <script>// 自定义插件#1ng({example1 : '插入HTML'});KindEditor.plugin('example1', function(K) {var self = this, name = 'example1';self.clickToolbar(name, function() {self.insertHtml('<strong>测试内容</strong>');});});// 自定义插件#2ng({example2 : 'CLASS样式'});KindEditor.plugin('example2', function(K) {var self = this, name = 'example2';function click(value) {var cmd = self.cmd;if (value === 'adv_strikethrough') {cmd.wrap('<span style="background-color:#e53333;text-decoration:line-through;"></span>');} else {cmd.wrap('<span class="' + value + '"></span>');}cmd.select();self.hideMenu();}self.clickToolbar(name, function() {var menu = self.createMenu({name : name,width : 150});menu.addItem({title : '红底白字',click : function() {click('red');}});menu.addItem({title : '绿底白字',click : function() {click('green');}});menu.addItem({title : '黄底白字',click : function() {click('yellow');}});menu.addItem({title : '自定义删除线',click : function() {click('adv_strikethrough');}});});});KindEditor.ready(function(K) {K.create('#content1', {cssPath : ['../plugins/code/prettify.css', 'index.css'],items : ['source', 'removeformat', 'example1', 'example2', 'code']});});</script><textarea id="content1" name="content" style="width:700px;height:200px; visibility:hidden;"></textarea>单独调用组件上传图片弹出框<script src="../kindeditor.js"></script><script src="../lang/zh_CN.js"></script><script>KindEditor.ready(function(K) {var editor = K.editor({allowFileManager : true});K('#image').click(function() {editor.loadPlugin('image', function() {editor.plugin.imageDialog({imageUrl : K('#url').val(),clickFn : function(url, title, width, height, border, align) {K('#url').val(url);editor.hideDialog();}});});});});</script><input type="text" id="url" value="" /> <input type="button" id="image" value="选择图片" />取色器<script src="../kindeditor-min.js"></script><script>KindEditor.ready(function(K) {var colorpicker;K('#colorpicker').bind('click', function(e) {if (colorpicker) {colorpicker.remove();colorpicker = null;}var colorpickerPos = K('#colorpicker').pos();colorpicker = K.colorpicker({x : colorpickerPos.x,y : colorpickerPos.y + K('#colorpicker').height(),z : 19811214,selectedColor : 'default',noColor : '无颜色',click : function(color) {K('#color').val(color);colorpicker.remove();colorpicker = null;}});});});</script><input type="text" id="color" value="" /> <input type="button" id="colorpicker" value="打开取色器" />四.jsp基本编辑器使用步骤:1.把edit.htm 修改为edit.jsp2.把想要使用的地方包含edit.jsp就行了代码:<!--富文本编辑器--><%@ include file="edit.jsp"%>注意事项:在需要引入编辑器的页面中的onload事件,要结合edit.jsp中的事件五.Xheditor(1) 解压压缩文件,将其中的xheditor-zh-cn.min.js以及xheditor_emot、xheditor_plugins和xheditor_skin三个文件夹上传到网站相应目录注:如果您网站中没有使用jQuery框架,也请一并上传jquery文件夹中的jquery-1.4.4.min.js (2) 在相应html文件的</head>之前添加<script type="text/javascript" src="/js/jquery.js"></script><script type="text/javascript" src="/js/xheditor.js"></script>注:如果jQuery之前已经在项目页面中使用,请勿重复添加引用代码(3).方法1:在textarea上添加属性:class="xheditor"例如:<textarea name="content" class="xheditor">test</textarea>方法2:在您的页面初始JS代码里加上:$('#elm1').xheditor();$('#elm1').xheditor();例如:$({$('#elm1').xheditor();});相应的卸载编辑器的代码为$('#elm1').xheditor(false);例:自定义按钮<script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script><script type="text/javascript" src="../xheditor-1.1.12-zh-cn.min.js"></script><script type="text/javascript">$(pageInit);function pageInit(){$.extend(xheditor.settings,{shortcuts:{'ctrl+enter':submitForm}});$('#elm1').xheditor({tools:'full'});$('#elm2').xheditor({tools:'mfull'});$('#elm3').xheditor({tools:'simple'});$('#elm4').xheditor({tools:'mini'});$('#elm5').xheditor({tools:'Cut,Copy,Paste,Pastetext,|,Source,Fullscreen,About'});$('#elm6').xheditor({tools:'Cut,Copy,Paste,Pastetext,/,Source,Fullscreen,About'});}function submitForm(){$('#frmDemo').submit();}</script>1,full(完全):<br /><textarea id="elm1" name="elm1" rows="8" cols="80" style="width: 40%">当前实例调用的Javascript源代码为:</textarea>2,mfull(多行完全):<br /><textarea id="elm2" name="elm2" rows="8" cols="80" style="width: 40%"> 当前实例调用的Javascript源代码为:</textarea>3,simple(简单):<br /><textarea id="elm3" name="elm3" rows="8" cols="80" style="width: 40%">当前实例调用的Javascript源代码为:</textarea>4,mini(迷你):<br /><textarea id="elm4" name="elm4" rows="8" cols="80" style="width: 40%"> 当前实例调用的Javascript源代码为:</textarea>5,custom(自定义):<br /><textarea id="elm5" name="elm5" rows="8" cols="80" style="width: 40%">当前实例调用的Javascript源代码为:</textarea>6,自定义多行模式:<br /><textarea id="elm6" name="elm6" rows="8" cols="80" style="width: 40%">当前实例调用的Javascript源代码为</textarea>皮肤选择注:为了保持项目精简,同一个页面只能调用一个皮肤,当同一界面同时调用多个皮肤时,最后一个皮肤的按钮面板样式会影响之前的<script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script><script type="text/javascript" src="../xheditor-1.1.12-zh-cn.min.js"></script><script type="text/javascript">$(pageInit);function pageInit(){$.extend(xheditor.settings,{shortcuts:{'ctrl+enter':submitForm}});$('#elm1').xheditor({skin:'default'});$('#elm2').xheditor({skin:'o2007blue'});$('#elm3').xheditor({skin:'o2007silver'});$('#elm4').xheditor({skin:'vista'});$('#elm5').xheditor({skin:'nostyle'});}function submitForm(){$('#frmDemo').submit();}</script>1,默认皮肤:<br/><textarea id="elm1" name="elm1" rows="8" cols="80" style="width: 40%">当前实例调用的Javascript源代码为:</textarea>2,Office 2007 蓝色:<br /><textarea id="elm2" name="elm2" rows="8" cols="80" style="width: 40%">当前实例调用的Javascript源代码为:</textarea>3,Office 2007 银白色:<br /><textarea id="elm3" name="elm3" rows="8" cols="80" style="width: 40%">当前实例调用的Javascript源代码为</textarea>4,Vista:<br /><textarea id="elm4" name="elm4" rows="8" cols="80" style="width: 40%">当前实例调用的Javascript源代码为</textarea>5,NoStyle:<br /><textarea id="elm5" name="elm5" rows="8" cols="80" style="width: 40%">当前实例调用的Javascript源代码为</textarea>六.Tinymce使用:tinyMCE.init({mode : "textareas",theme : "simple" //模式skin : "o2k7",//word});默认模式<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript">tinyMCE.init({mode : "textareas",theme : "simple"});</script><textarea id="elm1" name="elm1" rows="8" cols="80" style="width: 40%">This is some example text that you can edit inside the <strong>TinyMCE editor</textarea>皮肤设置<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script><script type="text/javascript">tinyMCE.init({// General optionsmode : "exact",elements : "elm1",theme : "advanced",plugins :"autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreple,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups,autosa",// Theme optionstheme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|, justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist, numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,prevw, |,forecolor,backcolor", theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|, charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullsc",theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|, styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,no,template,pagebreak,restoredraft",theme_advanced_toolbar_location : "top",//工具栏位置theme_advanced_toolbar_align : "left",//工具栏对齐方式theme_advanced_statusbar_location : "bottom",//状态显示栏的位置theme_advanced_resizing : true,// Example content CSS (should be your site CSS)content_css : "css/content.css",// Drop lists for link/image/media/template dialogstemplate_external_list_url : "lists/template_list.js",external_link_list_url : "lists/link_list.js",external_image_list_url : "lists/image_list.js",media_external_list_url : "lists/media_list.js",// Replace values for the template plugintemplate_replace_values : {username : "Some User",staffid : "991234"}});</scritp><textarea id="elm1" name="elm1" rows="8" cols="80" style="width: 40%"><script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script><script type="text/javascript">// O2k7 skintinyMCE.init({// General optionsmode : "exact",elements : "elm2",theme : "advanced",skin : "o2k7",plugins : "lists,pagebreak,style,layer,table,save,advhr,advimage,advlink, emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreg, xhtmlxtras,template,inlinepopups,autosave",// Theme optionstheme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|, justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime, preview,|,forecolor,backcolor", theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|, charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullsc",theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|, styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",theme_advanced_toolbar_location : "top",theme_advanced_toolbar_align : "left",theme_advanced_statusbar_location : "bottom",theme_advanced_resizing : true,// Example content CSS (should be your site CSS)content_css : "css/content.css",// Drop lists for link/image/media/template dialogstemplate_external_list_url : "lists/template_list.js",external_link_list_url : "lists/link_list.js",external_image_list_url : "lists/image_list.js",media_external_list_url : "lists/media_list.js",// Replace values for the template plugintemplate_replace_values : {username : "Some User",staffid : "991234"}});</script><textarea id="elm2" name="elm2" rows="8" cols="80" style="width: 40%">This is some example text that you can edit inside the <strong>TinyMCE editor;.</textarea><script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script><script type="text/javascript">// O2k7 skin (silver)tinyMCE.init({// General optionsmode : "exact",elements : "elm3",theme : "advanced",skin : "o2k7",skin_variant : "silver",plugins : "lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups,autosave",// Theme optionstheme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect, formatselect,fontselect,fontsizeselect", theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|, ltr,rtl,|,fullscreen",theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|, styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchas,nonbreaking,template,pagebreak,restoredraft",theme_advanced_toolbar_location : "top",theme_advanced_toolbar_align : "left",theme_advanced_statusbar_location : "bottom",theme_advanced_resizing : true,// Example content CSS (should be your site CSS)content_css : "css/content.css",// Drop lists for link/image/media/template dialogstemplate_external_list_url : "lists/template_list.js",external_link_list_url : "lists/link_list.js",external_image_list_url : "lists/image_list.js",media_external_list_url : "lists/media_list.js",// Replace values for the template plugintemplate_replace_values : {username : "Some User",staffid : "991234"}});</script><textarea id="elm3" name="elm3" rows="8" cols="80" style="width: 40%">This is some example text that you can edit inside the <strong>TinyMCE</textarea><script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script><script type="text/javascript">// O2k7 skin (silver)tinyMCE.init({// General optionsmode : "exact",elements : "elm4",theme : "advanced",skin : "o2k7",skin_variant : "black",plugins : "lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups,autosave",// Theme optionstheme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect, formatselect,fontselect,fontsizeselect", theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|, ltr,rtl,|,fullscreen",theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",theme_advanced_toolbar_location : "top",theme_advanced_toolbar_align : "left",theme_advanced_statusbar_location : "bottom",theme_advanced_resizing : true,// Example content CSS (should be your site CSS)content_css : "css/content.css",// Drop lists for link/image/media/template dialogstemplate_external_list_url : "lists/template_list.js",external_link_list_url : "lists/link_list.js",external_image_list_url : "lists/image_list.js",media_external_list_url : "lists/media_list.js",// Replace values for the template plugintemplate_replace_values : {username : "Some User",staffid : "991234"}});</script><textarea id="elm4" name="elm4" rows="8" cols="80" style="width: 40%">This is some example text that you can edit inside the ;</textarea>七.ueditor11.避免了重复加载源码高亮的核心代码2.修复了word粘贴table过滤出错问题3.修复插入地图会出现style="undefined"的问题4.优化了list,多个相邻的属性一直的list会合并5.可以在列表中的一行里产生多行的效果(通过回车再回退操作),类似office的效果6.添加自定义样式功能7.修了在chrome下右键删除td里的图片会把整个td删除的问题8.改进了不同的页面调用一个editor,URL问题9.增加了颜色选择器的颜色10.改进了提供的后台程序的安全性11.代码高亮支持折行12.改进了源码编辑模式下的性能(ie下),并且支持自动换行13.修改了在destroy之后会在ie下报错的问题14.给初始化容器name值,那么在后台取值的键值就是name给定的值,方便多实例在一个form下提交15.支持插入script/style这样的标签16.修复了列表里插入浮动图片,图片不占位问题17.源码模式下,去掉了pre中的18.完善了_example下的demo例子19.base64的图片被过滤掉了使用方法:var editorOption = {//这里可以选择自己需要的工具按钮名称,此处仅选择如下五个toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']],//focus时自动清空初始化时的内容autoClearinitialContent:true,//关闭字数统计wordCount:false,//关闭elementPathelementPathEnabled:false//更多其他参数,请参考editor_config.js中的配置项};var editor_a = new baidu.editor.ui.Editor(editorOption);editor_a.render( ' textarea的Id ' );例:简单应用<script type="text/javascript">var UEDITOR_HOME_URL = "../"; //指向dialogs,themes等目录的父目录,推荐使用/开头的绝对路径</script><script type="text/javascript" charset="utf-8" src="../editor_config.js"></script><!--使用版--><!--<script type="text/javascript" charset="utf-8" src="../editor_all.js"></script>--><!--开发版--><script type="text/javascript" charset="utf-8" src="editor_api.js">paths = ['editor.js','core/browser.js','core/utils.js','core/EventBase.js','core/dom/dom.js','core/dom/dtd.js','core/dom/domUtils.js','core/dom/Range.js','core/dom/Selection.js','core/Editor.js','commands/inserthtml.js','commands/image.js','commands/justify.js','commands/font.js','commands/link.js','commands/map.js','commands/iframe.js','commands/removeformat.js','commands/blockquote.js','commands/indent.js','commands/print.js','commands/preview.js','commands/spechars.js','commands/emotion.js','commands/selectall.js','commands/paragraph.js','commands/directionality.js','commands/horizontal.js','commands/time.js','commands/rowspacing.js','commands/lineheight.js','commands/cleardoc.js','commands/anchor.js','commands/delete.js','commands/wordcount.js','plugins/pagebreak/pagebreak.js','plugins/checkimage/checkimage.js','plugins/undo/undo.js','plugins/paste/paste.js', //粘贴时候的提示依赖了UI'plugins/list/list.js','plugins/source/source.js','plugins/shortcutkeys/shortcutkeys.js','plugins/enterkey/enterkey.js','plugins/keystrokes/keystrokes.js','plugins/fiximgclick/fiximgclick.js','plugins/autolink/autolink.js','plugins/autoheight/autoheight.js','plugins/autofloat/autofloat.js', //依赖UEditor UI,在IE6中,会覆盖掉body的背景图属性'plugins/highlight/highlight.js','plugins/serialize/serialize.js','plugins/video/video.js','plugins/table/table.js','plugins/contextmenu/contextmenu.js','plugins/pagebreak/pagebreak.js','plugins/basestyle/basestyle.js','plugins/elementpath/elementpath.js','plugins/formatmatch/formatmatch.js','plugins/searchreplace/searchreplace.js','plugins/customstyle/customstyle.js','ui/ui.js','ui/uiutils.js',。
Js的在线代码编辑器:CodeMirror
里面包含需要的js、css文件以及大量的示例
高亮显示、自动补全等功能
实时在线代码高亮显示,他不是某个富文本编辑器的附属产品,他是许多大名鼎鼎的在线代码编辑器的基础库。 CodeMirror是一个运行在浏览器中的在线代码编辑器,支持100多种语言,高度可定制。 支持语言有C、C++、C#、Java、Perl、HTML、CSS、PHP、JavaScript、Python、Lua、Go、Groovy、Ruby等。 以及diff、LaTeX、SQL、wiki、Markdown等文件格式。 CodeMirror为各种编程语言实现关键字、函数、变量等代码高亮显示,丰富的API和可扩展功能以及多个主题样式。 如果要在页面中需要嵌入一个代码编辑区,CodeMirror是最佳的选择。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
上传图片路径设置:
//默认上传默认目录为xx/upload/,xx为你的根目录
//此处设置上传文件保存路径,注意路径要由ROOT开始===3处======================
ewebeditor在线编辑器jsp版使用心得
我的一些使用经验及遇到的问题
Ewebeditor使用说明:
一、部署方式:
1、直接把压缩目录中的文件拷贝到您的网站发布目录下;
2、配置对应WEB-INF下文件,把eWebEditor文件夹下WEB-INF/web.xml中
<display-name>defaultroot</display-name>
<input type="hidden" name="content" />
在</head>前加入:
<script language="javascript">
function subchk() //
{
document.form1.content.value= window.content_html.getHTML();
String sUploadFilePath="/upload/";
Style.xml中
<suploaddir>/upload/</suploaddir>
eWebEditor.jsp 中
String sUploadFilePath="../upload/";//设置文件上传后在ewebeditor编辑器中图片显示地址
这样就好了。
修改上传文件大小限制,在WEB-INF/style.xml中
<sfilesize>2000</sfilesize>//其它文件大小
<sflashsize>500</sflashsize>//flash文件大小
<sremotesize>1000</sremotesize>//发布内容大小
4、把eWebEditor/WEB-INF/lib下的dom4j.jar和jspsmartupload.jar包复制到你应用的WEB-INF/lib下;
注:net.jar为ewebeditor原/WEB-INF/classes下的class文件,我把它打包后放到应用的lib下,以免跟其它class混淆;
<servlet>
<servlet-name>debugjsp</servlet-name>
<description>Added to compile JSPs with debug info</description>
<servlet-class>rg.apache.jasper.servlet.JspServlet</servlet-class>
<init-param>
<param-name>classdebuginfo</param-name>
<param-value>true</param-value>
</init-param>
<load-on-startup>3</load-on-startup>
</servlet>
}
</script>
提交表单时触发这个函数
把eWebEditor中的值复制到你的表单中,然后在你的form中调用它:
<form name="form1" onsubmit=" subchk()">
6、重新启动服务器即可。
二、设置:
界面修改:一般只修改/WEB-INF目录下面的style.xml和button.xml就可以了,button.xml为编辑界面配置文件,如果有菜单显示不全,可以在里面修改大小。
<simagesize>1000</simagesize>//图片文件大小
<smediasize>1000</smediasize>//多媒体文件大小
注意事项:
1、刚部署或调试时出现文件无法上传的情况,可以修改eWebEditor.jsp 中
String sUploadFilePath="../upload/";值或修改文件中字符,刷新后在改回正常值,即可恢复上传;
//修改此处需修改WEB-INF/Style.xml文件对应处<suploaddir>/upload/</suploaddir>
//修改此处需修改eWebEditor.jsp文件对应处
//修改此处需修改upload.jsp文件对应处
例如要传到根目录的/upload/下面:
upload.jsp中
<servlet-mapping>
<servlet-name>debugjsp</servlet-name>
<url-pattern>*.jsp</url-pattern>
</servlet-mapping>
复制到你的应用中的WEB-INF/web.xml中;
3、把WEB-INF下的Style.xml和Button.xml复制到你的应用中的WEB-INF目录下;
2、如果使用utf-8编码,需要在调用的jsp页面头部加入content-Type=”text/html; charset=utf-8”,不要使用filter对ewebeditor实行统一"UTF-8"或除gb2312以外的编码;
5、在你要调用编辑器的代码中加入:
<IFRAME ID="eWebEditor1" name="content_html" src="../eWebEditor/eWebEditor.jsp?id=content&style=standard" frameborder="0" scrolling="no" width="650" height="350"></IFRAME>