阅读量:0
在dedecms编辑器中，可以通过添加自定义代码来生成一个代码运行框。具体操作如下：，，1. 登录dedecms后台管理系统；，2. 进入“内容管理”模块；，3. 选择需要编辑的文章或新建一篇文章；，4. 点击“源码”按钮，切换到HTML源代码编辑模式；，5. 在需要插入代码运行框的位置，添加以下代码：，，``
html，你的代码，`，，6. 将标签内的你的代码`替换为实际需要展示的代码；，7. 保存文章并发布。，，这样，在文章页面上就会显示出一个带有语法高亮的代码运行框。在DedeCMS编辑器中增加代码运行框，可以通过以下几种方法实现：
1、使用jQuery制作代码运行框：
首先需要在DedeCMS模板中引入jquery库，如果没有jquery库，可以从jquery官网下载。
在模板中添加如下代码：
```html
<script>
$(function() {
$('.runHtml').each(function(index, element) {
$(this).after('' + $(this).html() + '
你可以修改代码后再运行查看结果！');
});
$('div').delegate('.runHtmlBtn', 'click', function() {
var newwin = window.open('about:blank');
newwin.document.write($(this).parent().prev().val());
});
});
</script>
```
这段代码会将页面中class包含runHtml样式的层全部变成代码运行框，上面的代码会把.runHtml这个div变成textarea代码运行框。
2、通过FCKeditor编辑器修改：
先找到DEDE的include目录下的FCKeditor目录，打开fckconfig.js文件，声明版权信息后，找到FCKConfig.ToolbarSets["Default"]，在其下加入自定义按钮变量名称，如"Mazi"。
再找到editor\js\下的fckeditorcode_ie_2.js文件，在合适位置添加代码：
```javascript
case 'Mazi':
B=new FCKToolbarButton('Mazi',FCKLang.InsertMaziLb1,FCKLang.InsertMazi);break;
case 'Mazi':
B=new FCKDialogCommand('Mazi',FCKLang.DlgMaziTitle,'dialog/mazi.php',520,200);break;
```
上述代码会在编辑器工具栏中添加一个名为“Mazi”的按钮，点击该按钮可以插入一个可运行的代码框。
3、升级到Ckeditor并添加自定义按钮：
如果使用的是DedeCMS 5.7版本及以上，编辑器已经升级为Ckeditor 3.6.2。
打开根目录下的include/ckeditor目录，找到ckeditor.js文件，在其中添加自定义按钮代码：
```javascript
n('Custom',p.custom,'custom',o.coreStyles_custom);
i.coreStyles_custom={element:'custom'};
```
然后在ckeditor.js文件中查找并修改基础编辑按钮数组：
```javascript
[['Bold','Custom','Italic','','NumberedList','BulletedList','','Link','Unlink','','About']];
```
清理浏览器缓存和历史记录，重新登录后台查看效果。
4、使用KindEditor替代FCKeditor：
下载KindEditor并解压到dede的include目录下。
修改dede后台默认编辑器目录，在后台系统基本参数中将Html编辑器修改为kindeditor并保存。
给dedecms添加kindeditor编辑器调用代码，具体操作步骤可以参考官方文档。
相关问答FAQs
1、如何在DedeCMS编辑器中添加多个代码运行框？
可以在DedeCMS模板中多次添加runHtml类的div标签，每个div都会变成一个独立的代码运行框，这样，一个页面上就可以方便地实现多个代码运行框。
2、如何优化DedeCMS编辑器中的代码高亮显示？
可以使用第三方插件如Prism或Highlight.js来实现代码高亮显示，这些插件提供了丰富的语言支持和主题选择，可以大大提升代码的可读性和美观度。
为了在DedeCMS编辑器中增加代码运行框，您可以通过以下步骤进行操作：
步骤 1：准备代码运行环境
您需要准备一个可以在网页上运行的代码运行环境，以下是一些常用的代码运行环境：
CodePen: 一个在线的代码编辑器，可以实时预览代码。
JSFiddle: 另一个流行的在线代码编辑器，适用于JavaScript、HTML和CSS。
确保您选择的代码运行环境能够嵌入到您的DedeCMS页面中。
步骤 2：获取代码运行环境的嵌入代码
以CodePen为例，您需要按照以下步骤获取嵌入代码：
1、访问CodePen网站。
2、创建一个新的Pen。
3、编写或粘贴您想要运行的代码。
4、在CodePen的设置中，找到“Embed”选项卡。
5、复制提供的HTML代码。
步骤 3：编辑DedeCMS模板
1、登录到您的DedeCMS后台。
2、找到并打开您想要添加代码运行框的模板文件。
3、使用文本编辑器打开该模板文件。
步骤 4：在模板中插入代码运行框
在模板文件中找到合适的位置插入代码运行框，以下是一个示例：
<!在此处插入CodePen嵌入代码 > <div id="codepenembed"></div> <script src="https://codepen.io/assets/embed.js"></script>
将您从CodePen复制的嵌入代码粘贴到<div id="codepenembed"></div>标签内。
步骤 5：保存并预览模板
1、保存模板文件。
2、在DedeCMS后台预览页面，查看代码运行框是否正确显示。
步骤 6：测试代码运行
确保代码运行框能够正常工作，运行您嵌入的代码。
注意事项
确保嵌入的代码不会影响页面的其他功能。
如果您使用的是其他代码运行环境，嵌入代码的方法可能会有所不同。
考虑到用户体验，不要在页面上嵌入过多的代码运行框。
通过以上步骤，您就可以在DedeCMS编辑器中成功增加代码运行框了。
