博文中加入代码演示

概述

今天看博客无意中看到这篇：如何获取鼠标选中的字。觉得末尾的代码演示真的很赞。看了一个后台，发现实现竟然很简单。所以把实现原理记录在这里，供自己开发时参考，相信对其他人也有用。

原理

原理就是打开一个新页面，然后把代码写入新页面里面就行了。

在博客首页的script里面加入如下函数：

<script>
    function runCode(id) {
        obj = document.getElementById(id);
        var TestWin = open(''); //打开一个窗口并赋给变量TestWin。 
        TestWin.opener = null // 防止代码对论谈页面修改 
        TestWin.document.write(obj.value); //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。 
        TestWin.document.close();
    }
</script>

在写的博文里面加入如下内容就完成了：

<textarea id="text_test" rows="10" cols="100">
//代码编辑区域
</textarea>

//运行代码按钮
<input onclick="runCode('text_test')" value="运行测试一下" type="button">

示例

使用方法：用鼠标选中文字，那么选中的文字会自动涂成黄色

<script> var funcGetSelectText = function(){ var txt = ''; if(document.selection){ txt = document.selection.createRange().text;//ie }else{ txt = document.getSelection(); } return txt.toString(); }; var container = container || document; container.onmouseup = function(){ var txt = funcGetSelectText(); if(txt) { event.target.innerHTML =event.target.innerHTML.replace(txt, ' '+txt+''); } }; </script>

后记

万恶的博客园为了防止js脚本注入，markdown编辑器的内容先转化为了字符串再转化为html的，这样就丢失了换行，所以上面的textarea里面的内容都没有换行。(害我找原因找了半天)(而且发布的时候，博客园还把script标签屏蔽了，我用转义字符才成功显示)

所以实际上我改了一下runCode函数，代码如下：

<script>
//运行代码按钮
    function runCode(id) {
        var obj = document.getElementById(id);
        var objValue = obj.value.split(/\s{2,}/).join(' \n '); //加上换行符
        var TestWin = open(''); //打开一个窗口并赋给变量TestWin。 
        TestWin.opener = null // 防止代码对论谈页面修改 
        TestWin.document.write(objValue); //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。 
        TestWin.document.close();
    }
</script>

转载于:https://www.cnblogs.com/yangzhou33/p/8435857.html