kindEditor和syntaxHighLighter的使用

因为近期想要做一个自己的博客系统项目练练手,所以用此博客来记录下富文本编辑器KindEditor和代码高亮插件SyntaxHighLighter

的使用。

一. KindEditor

KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

使用方法:可以参考官方文档

代码如下所示：

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%String baseUrl = request.getContextPath();request.setAttribute("baseUrl", baseUrl);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>KindEditor的使用</title><link rel="stylesheet" href="kindeditor/themes/default/default.css" /><script charset="utf-8" src="kindeditor/kindeditor.js"></script><script charset="utf-8" src="kindeditor/lang/zh_CN.js"></script><script>KindEditor.ready(function(K) {//第一个参数为textarea,可以用其它选择器,此例为id选择器var editor = K.create('textarea#editorId', {//样式表cssPath : 'kindeditor/plugins/code/prettify.css',//指定上传文件的所对应的的服务端程序uploadJson : '${baseUrl}/uploadServlet',//uploadJson : 'kindeditor/jsp/upload_json.jsp',//true时显示浏览远程服务器按钮allowFileManager : true,//指定浏览远程图片的服务器端程序fileManagerJson : 'kindeditor/jsp/file_manager_json.jsp',});});</script>
</head>
<body><form action="indexServlet" method="post"><label>博客标题:</label><input type="text" name="blogTitle"/><p></p><label>博客内容:</label><p></p><textarea id="editorId" name="blogContent" style="width:700px;height:300px;"></textarea><button type="submit">提交</button></form>
</body>
</html>

处理图片上传的UploadServlet代码(需导入文件上传组件的jar包)

UploadServlet.java

package com.waston.blog;import java.io.File;
import java.io.IOException;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;/*** 处理kindEidtor图片上传的程序* 响应数据类型:
//成功时
{"error" : 0,"url" : "http://www.example.com/path/to/file.ext"
}
//失败时
{"error" : 1,"message" : "错误信息"* @author thnk**/
@WebServlet(name = "uploadServlet", urlPatterns = { "/uploadServlet" })
public class UploadServlet extends HttpServlet {private static final long serialVersionUID = 1L;@SuppressWarnings("unchecked")protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html;charset=utf-8");//响应的json数据String errorMessage = "";String url = "http://localhost" + request.getContextPath();// 是不是文件上传表单if (ServletFileUpload.isMultipartContent(request)) {// 建工厂DiskFileItemFactory factory = new DiskFileItemFactory();factory.setSizeThreshold(5 * 1024 * 1024);// 设置缓存区大小5MString pathTemp = this.getServletContext().getRealPath("/WEB-INF/temp");factory.setRepository(new File(pathTemp));// 指定临时文件存放的目录// 解析器ServletFileUpload upload = new ServletFileUpload(factory);upload.setHeaderEncoding("utf-8");// 解决获取到上传的文件名乱码问题,必须写在解析文件之前// 开始解析文件List<FileItem> list = null;try {list = upload.parseRequest(request);} catch (FileUploadException e) {e.printStackTrace();}// 遍历listfor (FileItem fileItem : list) {//如果不是表单元素,即文件上传项if (!fileItem.isFormField()) {//根据年份日期指定目录Date date = new Date();DateFormat dateFormat = new SimpleDateFormat("/yyyy/MM/dd/");String dateDir = dateFormat.format(date);String dirPath = this.getServletContext().getRealPath("/upload");url = url + "/upload" + dateDir;dirPath += dateDir;File dirFile = new File(dirPath);//如果目录不存在,就创建if(!dirFile.exists())dirFile.mkdirs();long maxSize = 5*1024*1024;//文件的最大大小if(fileItem.getSize()>maxSize){errorMessage = "选择的图片过大!";String json = "{\"error\":1,\"message\":\""+errorMessage+"\"}";response.getWriter().write(json);return;}//获取文件名字,获得后缀名String fileName = fileItem.getName();if(fileName==null||fileName.length()==0){errorMessage = "请选择一个图片格式文件";String json = "{\"error\":1,\"message\":\""+errorMessage+"\"}";response.getWriter().write(json);return;}//扩展名String fileExt = fileName.substring(fileName.lastIndexOf("."));List<String> exts = new ArrayList<String>();exts.add(".gif");exts.add(".jpg");exts.add(".jpeg");exts.add(".png");exts.add(".bmp");if(!exts.contains(fileExt)){errorMessage = "请选择一个图片格式文件";String json = "{\"error\":1,\"message\":\""+errorMessage+"\"}";response.getWriter().write(json);return;}String newFileName = IdUtil.getImageName() + fileExt;url = url + newFileName;File uploadFile = new File(dirFile,newFileName);try {fileItem.write(uploadFile);//把上传文件内容写到指定的文件中} catch (Exception e) {e.printStackTrace();}fileItem.delete();// 删除临时文件,删除前务必先关流String json = "{\"error\":0,\"url\":\""+url+"\"}";response.getWriter().write(json);}}}}protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doGet(request, response);}}

注意的地方:

1.对应的css, js文件路径得写对

2.K.create()函数的第一个参数为需要被替换成富文本编辑框的textarea。

3. 自己修改对应的本地文件上传的文件上传代码：由uploadJson指定

4.上传图片时,其实获取到的是<img href="">标签

二.syntaxHighLighter高亮插件

使用该插件结合kindEditor对代码进行高亮。kindEditor对代码默认加在<pre>标签中。因此可以从这里入手

比如java <pre class="prettyprint lang-java">

1.因此首先将plugins/code/code.js修改成如下样子

相当于改成<pre class="brush: java">，这是syntaxHighLighter支持的格式

2.引入相关css,js文件。具体参考代码

3.通过此函数启动

4.对于显示结果右侧有滚动条，可以在引入的shCoreDefault.css中加入如下css属性即可解决。

.syntaxhighlighter table {
margin: 1px 0 !important;
}

展示代码的jsp如下:

show.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%String baseUrl = request.getContextPath();request.setAttribute("baseUrl", baseUrl);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>展示代码</title><link rel="stylesheet" type="text/css" href="${baseUrl}/syntaxhighlighter/styles/shCore.css">
<link rel="stylesheet" type="text/css" href="${baseUrl}/syntaxhighlighter/styles/shThemeDefault.css">
<script type="text/javascript" src="${baseUrl}/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="${baseUrl}/syntaxhighlighter/scripts/shAutoloader.js"></script>
<!--  <script type="text/javascript" src="${baseUrl}/syntaxhighlighter/scripts/shBrushJava.js"></script>
-->
</head><body><!-- SyntaxHighlighter.autoloader()应该在doc都载入完以后再执行。如果引用了jQuery，可以放$(document).ready()里，这样的话放在header里也没问题。但如果原生js，要不放body的onload里，要不放页面最后，比如在、随便找个地方放，就能看到效果了--><script type="text/javascript">window.onload = function(){SyntaxHighlighter.autoloader('java            ${baseUrl}/syntaxhighlighter/scripts/shBrushJava.js','php             ${baseUrl}/syntaxhighlighter/scripts/shBrushPhp.js','html xml        ${baseUrl}/syntaxhighlighter/scripts/shBrushXml.js','css            ${baseUrl}/syntaxhighlighter/scripts/shBrushCss.js','js jscript javascript        ${baseUrl}/syntaxhighlighter/scriptsshBrushJScript.js','bash shell           ${baseUrl}/syntaxhighlighter/scriptsshBrushBash.js','sql            ${baseUrl}/syntaxhighlighter/scripts/shBrushSql.js','c cpp          ${baseUrl}/syntaxhighlighter/scripts/shBrushCpp.js');SyntaxHighlighter.all();//启动解析}</script><label>博客标题:</label>${blogTitle }<br/><label>博客内容:</label>${blogContent }</body>
</html>

kindEditor和syntaxHighLighter的使用相关推荐

kindeditor配置syntaxhighlighter...
kindeditor默认是prettify,我行号没弄出来,换了syntaxhighlighter,下面是配置的代码... <!DOCTYPE html> <html>< ...
kindeditor4.x整合SyntaxHighlighter代码高亮
文章来源:https://my.oschina.net/duwaiweb/blog/74613 kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提 ...
【kindeditor】KindEditor获取多个textarea文本框的值并判断非空
kindeditor官网:http://kindeditor.net/demo.php 如何获取多个KindEditor中textarea文本框的值,方式很多种(带有HTML标签). var intr ...
Kindeditor学习中的那些坑
Kindeditor富文本编辑器还算比较好上手的一款插件吧,下面记录一下我在学习和实践中遇到的那些坑. 编辑器初始化方法和参数网上一搜一大把,不想搜的点这里,文档上各个参数已经写得很清楚了,直接拿过来 ...
一个KindEditor的插件[myFocus]
声名:此作品用于学习交流简介:使用KindEditor(富文本编辑器)提供的接口将myFocus(焦点图库)集成在KindEditor上功能:在内容中显示焦点图使用下载此插件并将其解压后的 ...
kindeditor 批量上传路径_FtpClient 实现文件上传
FtpUtils 工具类封装 public static boolean uploadFile( String hostname, int port, String username, String ...
php网页添加图片的代码,天天查询-PHP版的kindeditor编辑器加图片上传水印功能
首先简单介绍一下kindeditor编辑器: KindEditor 是一套开源的在线HTML编辑器,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本 ...
kindeditor扩展粘贴截图功能修改图片上传路径并通过webapi上传图片到图片服务器...
2019独角兽企业重金招聘Python工程师标准>>> kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. ...
kindeditor用法
<?php require_once '../include.php'; checkLogined(); $rows=getAllCate(); //echo $rows; if(!$rows) ...

kindEditor和syntaxHighLighter的使用

kindEditor和syntaxHighLighter的使用相关推荐

最新文章

热门文章