结合SyntaxHighlighter给KindEditor3.5.5添加[插入源代码]自定义组件

最新推荐文章于 2021-06-15 18:36:12 发布

xianqiang1

最新推荐文章于 2021-06-15 18:36:12 发布

阅读量1.8k

点赞数

分类专栏： Ruby on rails开发文章标签： actionscript stylesheet javascript function image html

本文链接：https://blog.csdn.net/lzqwebsoft/article/details/6900739

版权

由于KindEditor3.5.5还没有“插入源代码”的功能组件（KindEditor4有了），如果想实现"插入源码"这个功能就必须自定义组件，庆幸的是KindEditor给自定义插件提供了良好的接口，因此不需要过多的代码就可以轻松的实现自定义组件的添加；同时如果想使插入的代码能像IDE软件那样高亮显示，这就需要整合SyntaxHighlighter库。它的原理是在<pre>标签中添加class实现样式的渲染，如<pre class="ruby"></pre>则以ruby的方式进行渲染。

好了废话不多说，现在我们就开始实现它（这里结合的是ruby on rails开发，我认为这对不熟悉ruby的人也有帮助）：

首先：给KindEditor添加插件：

1. 先在kindeditor/plugins目录下建创建一个code.html的文件

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>KindEditor</title>
		<style>
			body {
				font-size:12px;
				margin: 0px;
				background-color:#F0F0EE;
				overflow: hidden;
			}
			td.left1 {
				font-size:12px;
				width: 60px;
				padding: 2px;
			}
			td.right1 {
				font-size:12px;
				padding: 2px;
			}
			#sourceCode {
				font-size: 12px;
				resize: none;
				width: 315px;
				height: 180px; 
				font-family: Verdana,"Lucida Grande",Arial,Helvetica,sans-serif;
				
				overflow-y: auto;
				line-height: 14px;
			}
		</style>
	</head>
	<body>
		<table border="0" cellpadding="5" cellspacing="0">
			<tr>
				<td class="left1">编程语言:</td>
				<td class="right1">
					<select id="language" name="language"  maxlength="255">
                       <option value="html">HTML/XML</option>
                       <option value="js">JavaScript</option>
                       <option value="css">CSS</option>
                       <option value="php">PHP</option>
                       <option value="csharp">C#</option>
                       <option value="cpp">C++</option>
                       <option value="java">Java</option>
                       <option value="jfx">JavaFX</option>
                       <option value="python">Python</option>
                       <option value="perl">Perl</option>
                       <option value="ruby">Ruby</option>
                       <option value="vb">Visual Basic</opt

最低0.47元/天解锁文章

xianqiang1

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
结合SyntaxHighlighter给KindEditor3.5.5添加[插入源代码]自定义组件

由于KindEditor3.5.5还没有“插入源代码”的功能组件（KindEditor4有了），如果想实现"插入源码"这个功能就必须自定义组件，庆幸的是KindEditor给自定义插件提供了良好的接口，因此不需要过多的代码就可以轻松的实现自定义组件的添加；同时如果想使插入的代码能像IDE软件那样高亮显示，这就需要整合SyntaxHighlighter库。它的原理是在标签中添加class实现样式的渲
复制链接

扫一扫