Dedecms编辑器添加代码运行框功能

在开发和设计网页时，代码框的功能是非常实用的。它不仅能够展示代码内容，还支持运行、复制以及保存等功能。接下来，我们将详细介绍如何实现一个具备这些功能的“代码框”。以下是具体步骤：


function copycode(obj) {
    var rng = document.body.createTextRange();
    var obj1 = document.getElementById(obj);
    rng.moveToElementText(obj1);
    rng.scrollIntoView();
    rng.select();
    rng.execCommand("Copy");
    rng.collapse(false);
}

function runCode(obj) {
    var winname = window.open('', "_blank", '');
    var obj1 = document.getElementById(obj);
    winname.document.open('text/html', 'replace');
    winname.opener = null;
    winname.document.writeln(obj1.value);
    winname.document.close();
}

function saveCode(obj) {
    var winname = window.open('', '_blank', 'top=10000');
    var obj1 = document.getElementById(obj);
    winname.document.open('text/html', 'replace');
    winname.document.writeln(obj1.value);
    winname.document.execCommand('saveas', '', '现代视觉创意联盟.htm');
    winname.close();
}

上述代码实现了三个主要功能：复制代码、运行代码以及保存代码。接下来需要将这段代码嵌入到网页中。首先，在HTML文件中的标签之间添加上述脚本。

为了确保不影响原有页面布局，建议创建一个新的HTML模板文件。例如，在templets/demo目录下新建一个名为code.htm的文件。接着，将article_article.htm的内容复制到code.htm中，并在适当位置插入以下HTML结构：




    
    
    
    提示：您可以先修改部分代码再运行或者直接保存

以上步骤完成后，当用户访问使用此模板的文章页面时，便可以利用新加入的功能模块进行代码操作。如果你希望整个网站都采用这种“代码运行”风格，可以直接修改article_article.htm文件，但在此之前一定要做好备份工作。

通过这样的设置，不仅可以增强用户体验，还能让技术类博客或教程更加生动有趣。记住，每次调整后都要测试所有功能是否正常工作，以保证最终效果符合预期。

推荐阅读