使用xheditor+SyntaxHighligher实现代码高亮显示实例

最新推荐文章于 2019-11-09 12:46:51 发布

天祈笨笨

最新推荐文章于 2019-11-09 12:46:51 发布

阅读量822

点赞数

分类专栏： ASP.net 文章标签： xheditor 实例 SyntaxHighligher

本文链接：https://blog.csdn.net/acute2000/article/details/51123837

版权

ASP.net 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实例用是的xheditor1.2.2各SyntaxHighligher 3.0.83 坐出来的！

实例1：用官法的实例改的！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>xhEditor demo1 : 默认模式</title>
    <script src="frame/jquery-1.11.0.js"></script>
    <script src="xheditor/xheditor-1.2.2.min.js"></script>
       <!--相关语言设置文件放在xheditor-1.2.2.min.js里面了！所以这里没声明的！下面的样式可以直接放至xheditor_skin里的相关ui.css中！-->
    <style  type="text/css">
        .btnCode {background:transparent url(img/code.gif) no-repeat 16px 16px;	background-position:2px 2px;}
    </style>
    <script type="text/javascript">
              var editor;
        $(pageInit);
        function pageInit() {
            //定义插件
            var allPlugin = {
                Code: {
                    c: 'btnCode', t: '插入代码', h: 1, e: function () {
                        var _this = this;
                        var htmlCode = '<div><select id="xheCodeType"><option value="html">HTML/XML</option><option value="js">Javascript</option><option value="css">CSS</option><option value="php">PHP</option><option value="java">Java</option><option value="py">Python</option><option value="pl">Perl</option><option value="rb">Ruby</option><option value="cs">C#</option><option value="c">C++/C</option><option value="vb">VB/ASP</option><option value="">其它</option></select></div><div><textarea id="xheCodeValue" wrap="soft" spellcheck="false" style="width:300px;height:100px;" /></div><div style="text-align:right;"><input type="button" id="xheSave" value="确定" /></div>';
                        var jCode = $(htmlCode), jType = $('#xheCodeType', jCode), jValue = $('#xheCodeValue', jCode), jSave = $('#xheSave', jCode);
                        jSave.click(function () {
                            _this.loadBookmark();
                            _this.pasteHTML('<pre class="brush:' + jType.val() + '">' + _this.domEncode(jValue.val()) + '</pre>');
                            _this.hidePanel();
                            return false;
                        });
                        _this.saveBookmark();
                        _this.showDialog(jCode);
                    }
                }

            };

            
            editor = $('#elm1').xheditor({
               //对应相关的插件
                plugins: allPlugin,
                //功能块
                tools: 'Cut,Copy,Paste,Pastetext,|,Blocktag,Fontface,FontSize,Bold,Italic,Underline,Strikethrough,FontColor,BackColor,SelectAll,Removeformat,|,Align,List,Outdent,Indent,|,Link,Unlink,Anchor,Img,Flash,Media,Hr,Emot,Table,Code,|,Source,Preview,Print,Fullscreen',
                //编辑器内的样式
                loadCSS: '<style>p { margin:4px 0px; padding:2px 0px; }pre { margin:4px 0px; background-color:#f0f0f0;}img { max-width:98%; }</style>',
                shortcuts: { 'ctrl+enter': submitForm }
            });
           
        }
        function submitForm() {
            $('#frmDemo').submit();
        }
    </script>
</head>
<body>

    <form method="post" action="show.php" id="frmDemo">
        <textarea id="elm1" name="elm1"  rows="12" cols="80" style="width: 80%"></textarea><br /><br />
        <input type="submit" name="save" value="Submit" />
         </form>

</body>
</html>

2、用csdn的方法的实例

user_con.js

$(pageInit);
var editor;
function pageInit() {
        
    //定义插件
    var allPlugin = {
        Code: {
            c: 'btnCode', t: '插入代码', h: 1, e: function () {
                var _this = this;
                var codeArr1 = ["html", "objc", "javascript", "css", "php", "csharp", "cpp", "java", "python", "ruby", "vb", "delphi", "sql", "plain"];
                var codeArr2 = ["HTML/XML", "Objective-C", "JavaScript", "CSS", "PHP", "C#", "C++", "Java", "Python", "Ruby", "Visual Basic", "Delphi", "SQL", "其它"];
                var opts = '';
                for (var i = 0; i < codeArr1.length; i++) {
                    opts += '<option value="' + codeArr1[i] + '">' + codeArr2[i] + '</option>';
                }
                var htmlCode = '<div>编程语言: <select id="xheCodeType">' + opts + '</select></div>'
                    + '<div><textarea id="xheCodeValue" wrap="soft" rows=6 spellcheck="false" cols=40 style="width:300px;height:100px;"></textarea></div>'
                    + '<div style="text-align:right;"><input type="button" id="xheSave" value="确定" /></div>';
                var jCode = $(htmlCode), jType = $('#xheCodeType', jCode), jValue = $('#xheCodeValue', jCode), jSave = $('#xheSave', jCode);
                jSave.click(function () {
                     var sel_code = $("#xheCodeType").val();
                    _this.loadBookmark();
                    _this.pasteHTML('<br/><pre class="brush: ' + jType.val() + '">' + _this.domEncode(jValue.val()) + '</pre><br/>');
                    _this.hidePanel();
                     //写入cookie相关值最近插入的是什么语言代码
                    document.cookie = "postedit_code=" + sel_code + "; expires=" + function () { var d = new Date(); d.setFullYear(d.getFullYear() + 1); return d.toGMTString(); }();
                    return false;
                });
                _this.saveBookmark();
                _this.showDialog(jCode);
                //读取COOKIE并设置
                var _his_code = document.cookie.match(new RegExp("(^|\s)postedit_code=([^;]*)(;|$)"));
                         if (_his_code) $('#xheCodeType').val(_his_code);
                       else $("#xheCodeType option")[0].selected = true;
            }
        }

    };


    editor = $('#content1').xheditor({
        //对应相关的插件
        plugins: allPlugin,
        //功能块
        tools: 'Cut,Copy,Paste,Pastetext,|,Blocktag,Fontface,FontSize,Bold,Italic,Underline,Strikethrough,FontColor,BackColor,SelectAll,Removeformat,|,Align,List,Outdent,Indent,|,Link,Unlink,Anchor,Img,Flash,Media,Hr,Emot,Table,Code,|,Source,Preview,Print,Fullscreen',
        //编辑器内的样式
        loadCSS: '<style>p { margin:4px 0px; padding:2px 0px; }pre { margin:4px 0px; background-color:#f0f0f0;}img { max-width:98%; }</style>',
        shortcuts: { 'ctrl+enter': submitForm }
    });

    //下面是xheditor载入！
    //xheditor-1.2.2的自动载入过程！
    SyntaxHighlighter.autoloader.apply(null, path(
        'applescript            $shBrushAppleScript.js',
        'actionscript3 as3      $shBrushAS3.js',
        'bash shell             $shBrushBash.js',
        'coldfusion cf          $shBrushColdFusion.js',
        'cpp c                  $shBrushCpp.js',
        'c# c-sharp csharp      $shBrushCSharp.js',
        'css                    $shBrushCss.js',
        'delphi pascal          $shBrushDelphi.js',
        'diff patch pas         $shBrushDiff.js',
        'erl erlang             $shBrushErlang.js',
        'groovy                 $shBrushGroovy.js',
        'java                   $shBrushJava.js',
        'jfx javafx             $shBrushJavaFX.js',
        'js jscript javascript  $shBrushJScript.js',
        'perl pl                $shBrushPerl.js',
        'php                    $shBrushPhp.js',
        'text plain             $shBrushPlain.js',
        'py python              $shBrushPython.js',
        'ruby rails ror rb      $shBrushRuby.js',
        'sass scss              $shBrushSass.js',
        'scala                  $shBrushScala.js',
        'sql                    $shBrushSql.js',
        'vb vbnet               $shBrushVb.js',
        'xml xhtml xslt html    $shBrushXml.js'
    ));
    SyntaxHighlighter.defaults['toolbar'] = false;  //去掉右上角问号图标
    SyntaxHighlighter.config.tagName = 'pre';       //可以更改解析的默认Tag。
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.config.stripBrs = true;
     SyntaxHighlighter.all();

}
//表单的提交方法，
function submitForm() {
    $('#example').submit();
}


function path() {
    //alert("测试");
    var args = arguments,
        result = [];
    for (var i = 0; i < args.length; i++)
        result.push(args[i].replace('$', '/Scripts/SyntaxHighligher/scripts/'));
        return result;
}

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Scripts_Default" ValidateRequest="false" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        this.Label1.Text = Request.Form["content1"];
    }

</script>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="frame/jquery-1.11.0.js"></script>
     <script src="xheditor/xheditor-1.2.2.min.js"></script>
    <script src="user_con.js"></script>
   <script src="/Scripts/SyntaxHighligher/scripts/shCore-min.js"></script>
    <script src="/Scripts/SyntaxHighligher/scripts/shAutoloader.js"></script>
   <%--<link href="/Scripts/SyntaxHighligher/styles/shCore.css" rel="stylesheet" />--%>
 <%--   因为有下面的样式！所以上面的可以不加载--%>
    <link href="/Scripts/SyntaxHighligher/styles/shCoreDefault.css" rel="stylesheet" />

</head>
<body>
    <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
    <form id="example" runat="server">
        <textarea id="content1" cols="100" rows="8" style="width: 700px; height: 200px; visibility: hidden;" runat="server"></textarea>
        <br />
        <asp:Button ID="Button1" runat="server" Text="提交内容" />
        (提交快捷键: Ctrl + Enter)
    </form>  
</body>

</html>

天祈笨笨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用xheditor+SyntaxHighligher实现代码高亮显示实例

xhEditor demo1 : 默认模式 .btnCode {background:transparent url(img/code.gif) no-repeat 16px 16px; background-position:2px 2px;} var editor; $
复制链接

扫一扫

专栏目录