1. 下载insertcode插件,解压放到include/ckeditor/plugins/,可以看到insertcode目录 建议下载我修改后的,百度网盘地址:http://pan.baidu.com/share/link?shareid=2281510467&uk=2586215667 github insertcode地址:https://github.com/wuyuntao/ckeditor-insert-code 2. 下载前台加载的js、css(只有2个,很小)google-code-prettify,在insertcode目录下建立code目录,将prettify.css、prettify.js放到code目录下 prettify.js、prettify.css(建议用我修改后的)下载地址:http://code.google.com/p/google-code-prettify/ 文件目录结构如下: # tree include/ckeditor/plugins/insertcode/ include/ckeditor/plugins/insertcode/ ├── code │ ├── prettify.css │ └── prettify.js ├── dialogs │ └── insertcode.js ├── images │ └── icon.gif ├── lang │ ├── en.js │ └── zh-cn.js └── plugin.js 4 directories, 7 files 3. 由于dedecms 5.7自己集成了一个dedepage插件,用来添加ckeditor自定义插件,在include/ckeditor/plugins /dedepage文件夹下,打开plugin.js文件大概在28行(requires : [ 'fakeobjects' ],):requires : [ 'insertcode' ],添加完之后的代码如下: // Register a plugin named "dedepage". (function() { CKEDITOR.plugins.add( 'dedepage', { init : function( editor ) { // Register the command. editor.addCommand( 'dedepage',{ exec : function( editor ) { // Create the element that represents a print break. // alert('dedepageCmd!'); editor.insertHtml("#p #副标题#e#"); } }); // alert('dedepage!'); // Register the toolbar button. editor.ui.addButton( 'MyPage', { label : '插入分页符', command : 'dedepage', icon: 'images/dedepage.gif' }); // alert(editor.name); }, requires : [ 'fakeobjects' ], requires : [ 'insertcode' ] }); })(); 4. 修改include/ckeditor/ckeditor.inc.php文件,在$toolbar['Basic']的最后一行添加元素InsertCode,修改后代码如下: $toolbar['Basic'] = array( array( 'Source','-','Templates'), array( 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Print'), array( 'Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'), array( 'ShowBlocks'),array('Image','Flash','Addon'),array('Maximize'),'/', array( 'Bold','Italic','Underline','Strike','-'), array( 'NumberedList','BulletedList','-','Outdent','Indent','Blockquote'), array( 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'), array( 'Table','HorizontalRule','Smiley','SpecialChar'), array( 'Link','Unlink','Anchor'),'/', array( 'Styles','Format','Font','FontSize'), array( 'TextColor', 'BGColor', 'MyPage','MultiPic','InsertCode') 5. 在文章模板文件templets/default/article_article.htm文件里引入高亮显示的js、css,建议将引入的代码放在</body>标签之前,引入代码如下: <link type="text/css" rel="stylesheet" href="{dede:global.cfg_basehost/}/include/ckeditor/plugins/insertcode/code/prettify.css"/> <script type="text/javascript" src="{dede:global.cfg_basehost/}/include/ckeditor/plugins/insertcode/code/prettify.js"></script><script>prettyPrint();</script> 6. 看看效果吧
7. 将dedecms里面的文章从SyntaxHighlighter转换成google-code-prettify实现代码高亮 思路:SyntaxHighlighter方式html源代码中包含 ...<pre class="brush:bash">...</pre>,而google-code-prettify方式html源代码包 含...<pre class="prettyprint">...</pre>,将表dede_addonarticle mysqldump成sql,后面就是看你对正则表达式是否熟悉了,可参考:http://blog.linuxeye.com/104.html ,如果不会请回复! 转载请保留固定链接: https://linuxeye.com/jianzhan/1803.html |