Simditor 和代码高亮插件配合使用教程

作者:超级无敌大飞   阅读 (4368)  |  收藏 (0)  |  点赞 (0)

摘要

本文讲解如何把Simditor富文本编辑器生成的代码 和代码高亮插件SyntaxHighlighter配合使用来完成可重复编辑富文本内容、可高亮显示的教程。


原文链接:Simditor 和代码高亮插件配合使用教程


本文使用的富文本编辑器为Simditor.使用的代码高亮插件为SyntaxHighlighter.

Simditor中产生的内容中代码部分的格式如下:

<pre><code class="lang-markdown">var ee</code></pre><p>第二段</p><pre><code class=\"lang-css\">va a sdf</code></pre>

而SyntaxHighlighter支持的代码高亮的格式为:

<pre><code class="lang-markdown">var ee</code></pre><p>第二段</p><pre><code class="lang-css">va a sdf</code></pre>

现在的需求是这样的:

1、Simditor中产生的内容中代码必须在页面中能够使用SyntaxHighlighter高亮插件,使代码能够高亮 显示

blob.png

2、能偶在代码高亮插件中正常显示代码高亮的部分必须也能够再次被Simditor识别,也就是说,必须可以再次被编辑修改


本文将就上述两个需求来讲述如何实现此功能。

本教程将会使用Java通过转换高亮部分的代码结构实现Simditor和SyntaxHighlighter之间的转换:

1、Simditor转为SyntaxHighlighter

	/**
	 * simidate转换成高亮
	 * 目标:
	 * <pre><code class=\"lang-markdown\">var </code></pre>
	 *<p>第二段</p><pre><code class=\"lang-css\">va a sdf</code></pre>
	 * 转为
	 * <pre class=\"brush:js\">var</pre>
	 *<p>第二段</p><pre class=\"lang-css\">va a sdf</pre>
	 */
	public static String encode(String oldValue){
		String rex ="<\\s*pre\\s*>(.*?)</\\s*pre\\s*>";
		Pattern pattern = Pattern.compile(rex);
		Matcher matcher = pattern.matcher(oldValue);
		while (matcher.find()) {
			int count = matcher.groupCount();
			for (int i = 0; i < count; i++) {
				String oldVal = matcher.group(i);
				String temp1 = oldVal.substring(oldVal.indexOf(">")+1,oldVal.lastIndexOf("<")).trim();
				String classTemp = temp1.substring(0,temp1.indexOf(">")).trim();
				String classStyle = classTemp.substring(classTemp.indexOf("-")+1,classTemp.lastIndexOf("\"")).trim();
				String content = temp1.substring(temp1.indexOf(">")+1,temp1.lastIndexOf("<"));
				String newContent = "<pre class=\"brush:"+classStyle+"\">"+content+"</pre>";
				oldValue = oldValue.replace(oldVal, newContent);
			}
		}
		return oldValue;
	}

注意我在测试时上面代码是没问题的,但是 当我在实际环境中跑代码的时候发现,转换并没有成功,这是因为上面的代码中的正则表达式写的不全面,应该改为下面的正则表达式

String rex ="<\\s*pre\\s*>((?:(?!\\</\\s*pre\\s*\\>)[\\s\\S])*)</\\s*pre\\s*>";	

2、SyntaxHighlighter转为Simditor

	/**
	 * 目标,将编码后的字符转为simidator识别的字符串
	 * <pre class=\"brush:js\">var</pre>
	 * <p>第二段</p><pre class=\"lang-css\">va a sdf</pre>
	 * 转为
	 * <pre><code class=\"lang-markdown\">var </code></pre>
	 *<p>第二段</p><pre><code class=\"lang-css\">va a sdf</code></pre>
	 * @param oldValue
	 * @return
	 */
	private static String decode(String oldValue) {
		String rex ="<\\s*pre\\s*class=\"brush:[a-zA-Z+-]+\"\\s*>(.*?)</\\s*pre\\s*>";
		Pattern pattern = Pattern.compile(rex);
		Matcher matcher = pattern.matcher(oldValue);
		while (matcher.find()) {
			int count = matcher.groupCount();
			for (int i = 0; i < count; i++) {
				String oldVal = matcher.group(i);
				String content = oldVal.substring(oldVal.indexOf(">")+1,oldVal.lastIndexOf("<")).trim();
				
				String temp1 = oldVal.substring(oldVal.indexOf(":")+1,oldVal.indexOf(">")).trim();
				
				String classStyle = temp1.substring(0,temp1.indexOf("\"")).trim();
				
				String newContent = "<pre><code class=\"lang-"+classStyle+"\">"+content+"</code></pre>";
				oldValue = oldValue.replace(oldVal, newContent);
			}
		}
		return oldValue;
	}

注意我在测试时上面代码是没问题的,但是 当我在实际环境中跑代码的时候发现,转换并没有成功,这是因为上面的代码中的正则表达式写的不全面,应该改为下面的正则表达式

String rex ="<\\s*pre\\s*class=\"brush:[a-zA-Z+-]+\"\\s*>((?:(?!\\</\\s*pre\\s*\\>)[\\s\\S])*)</\\s*pre\\s*>";

通过上面的方法,即可实现在SyntaxHighlighter和Simditor之间进行转换


分类   前端设计
字数   3138

博客标签    Simditor支持代码高亮   富文本编辑器支持代码高亮教程  

评论