ckeditor syntaxhigher 코드 하 이 라이트 플러그 인 설정 공유

최근 에 자신 이 사이트 형식의 코드 라 이브 러 리 를 만 들 고 싶 어서 자신 이 온라인 텍스트 편집 기 를 썼 습 니 다.현재 의 저 에 게 는 정말 현실 에 맞지 않 습 니 다.하하!그리고 지금 아주 좋 은 온라인 텍스트 편집기(ckeditor)가 있 습 니 다.저 와 더 많은 시간 을 들 여야 합 니 다!이미 만들어 진 것 이 있 으 니 가 져 가서 쓰 면 되 지!이른바 가 져 오기 주의!그러나 이 온라인 텍스트 편집 기 는 우리 프로그래머 에 게 결함 이 라 고 할 수 있 습 니 다!코드 하 이 라이트 기능 이 없습니다!이렇게 코드 를 붙 이 는 것 은 매우 보기 싫다!오늘 밤 나 는 늘 그 를 빼 냈 다.물론 남 의 어깨 에 도 따 서 만 든 거 야.나 눠 주 셔 서 감사합니다!긴 말 하지 않 겠 다!우리 본론 으로 들 어가 자!
우선 공식 홈 페이지 에 가서 다운로드ckeditor
그 다음 에 공식 사이트 에 가서syntaxhighlighter를 다운로드 하 는데 이것 은 코드 하 이 라이트 플러그 인 입 니 다.
그리고 제 가 아래 에 다운로드 한 데모 의 syntaxhighlighter/shBrushes.js 파일 을 제공 해 주세요.
다운로드 후,그들 을 압축 을 풀 고 항목 에 가입 시 키 는 것 은 다음 과 같다.

그 다음 에 ckeditor 아래 에 새 폴 더 를 만 듭 니 다.이름 은 insertcode 이 고'insertcode'디 렉 터 리 에'plugin.js'를 새로 만 듭 니 다.다음 코드 를 입력 하 십시오.

CKEDITOR.plugins.add('insertcode', {
  requires: ['dialog'],
  init: function (a) {
    var b = a.addCommand('insertcode', new CKEDITOR.dialogCommand('insertcode'));
    a.ui.addButton('insertcode', {
      label: a.lang.insertcode.toolbar,
      command: 'insertcode',
      icon: this.path + 'images/code.jpg'
    });
    CKEDITOR.dialog.add('insertcode', this.path + 'dialogs/insertcode.js');
  }
});

디 렉 터 리 구 조 는 다음 과 같다.그림 2

이미지 폴 더 를 새로 만 들 고'code.jpg'그림 을 넣 으 세 요.위의 그림 과 같이 물론 그림 은 구 글 에서 16*16 크기 의 그림 을 찾 을 수 있 습 니 다.
dialogs 폴 더 를 새로 만 들 고"insertcode.js"를 새로 만 들 고 다음 코드 를 입력 하 십시오.

CKEDITOR.dialog.add('insertcode', function (editor) {
  var escape = function (value) {
    return value;
  };
  return {
    title: 'Insert Code Dialog',
    resizable: CKEDITOR.DIALOG_RESIZE_BOTH,
    minWidth: 720,
    minHeight: 480,
    contents: [{
      id: 'cb',
      name: 'cb',
      label: 'cb',
      title: 'cb',
      elements: [{
        type: 'select',
        label: 'Language',
        id: 'lang',
        required: true,
        'default': 'csharp',
        items: [['ActionScript3', 'as3'], ['Bash/shell', 'bash'], ['C#', 'csharp'], ['C++', 'cpp'], ['CSS', 'css'], ['Delphi', 'delphi'], ['Diff', 'diff'], ['Groovy', 'groovy'], ['Html', 'xhtml'], ['JavaScript', 'js'], ['Java', 'java'], ['JavaFX', 'jfx'], ['Perl', 'perl'], ['PHP', 'php'], ['Plain Text', 'plain'], ['PowerShell', 'ps'], ['Python', 'py'], ['Ruby', 'rails'], ['Scala', 'scala'], ['SQL', 'sql'], ['Visual Basic', 'vb'], ['XML', 'xml']]
      }, {
        type: 'textarea',
        style: 'width:700px;height:420px',
        label: 'Code',
        id: 'code',
        rows: 31,
        'default': ''
      }]
    }],
    onOk: function () {
      code = this.getValueOf('cb', 'code');
      lang = this.getValueOf('cb', 'lang');
      html = '' + escape(code) + '';
      editor.insertHtml("<pre class=\"brush:" + lang + ";\">" + html + "</pre>");
    },
    onLoad: function () {
    }
  };
});

다음 에 우 리 는 하 이 라이트 플러그 인 을 ckeditor 에 삽입 해서 ckeditor 폴 더 아래 의"ckeditor.js"를 찾 습 니 다.ctrl+F 를 누 르 면"about"을 찾 고"fullPage:false,height:200,plugins:"about,basicstyles"를 찾 습 니 다.우 리 는"about"뒤에"insertcode"를 추가 합 니 다.여 기 는"plugins:"about,insertcode,basicstyles"로 변 합 니 다.
그림:

 'about'을 계속 찾 고'j.add('about',{init:function(l){var m=l.addCommand('about',new a.dialogCommand('about'))를 찾 습 니 다.m.modes={wysiwyg:1,source:1};m.canUndo=false;l.ui.addButton('About',{label:l.lang.about.title,command:'about'});a.dialog.add('about',this.path+'dialogs/about.js');}});"，우 리 는 이 분점 뒤에"j.add(insertcode',{requires:['dialog'],init:function(l){l.addCommand('insertcode',new a.dialog Command('insertcode')를 추가 합 니 다.l.ui.addButton('insertcode', {label: l.lang.insertcode.toolbar,command: 'insertcode',icon: this.path + 'images/code.jpg'});a.dialog.add('insertcode', this.path + 'dialogs/insertcode.js');}});"。
 다음 그림:

 이어서 계속해서 ckeditor.js 에서"i.toolbar"를 찾 아 보 세 요.Basic=",이것 이 바로 CKEditor 의 기본 도구 모음 입 니 다.우 리 는 여기에'insertcode',예 를 들 어 나의'[Maximize','ShowBlocks','-','insertcode']를 추가 합 니 다."
다음 그림 에서 선택 한 텍스트 에 추가 합 니 다:

마지막 단계:"ckeditor\lang"에 들 어가 면"en.js","zh.js","zh-cn.js"에"insertcode:"Insert Code","insertcode:"세대 a 삽입","insertcode:"코드 삽입"을 추가 합 니 다.이 순서대로 추가 하 십시오.
아래 그림 이 en.js 중의 zh-cn.js,zh.js 라면 일일이 캡 처 하지 않 겠 습 니 다.

마지막 으로 페이지 에 다음 과 같은 인용 을 추가 합 니 다.

<head runat="server">
  <title></title>
  <link type="text/css" rel="stylesheet" href="syntaxhighlighter_3.0.83/styles/shCore.css" />
  <link type="text/css" rel="stylesheet" href="syntaxhighlighter_3.0.83/styles/shThemeDefault.css" /> 
  <script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shCore.js"></script>
  <script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushes.js"></script>
  <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
  <link type="text/css" rel="Stylesheet" href="syntaxhighlighter_3.0.83/styles/shCoreDefault.css" />
  <script type="text/javascript">    SyntaxHighlighter.all();</script>
</head>

페이지 의 코드 는 다음 과 같 습 니 다.

<form id="form1" runat="server">
  <div>
    <asp:TextBox ID="txtcontent" runat="server" TextMode="MultiLine" Height="310px" 
      Width="100%"></asp:TextBox>
    <script type="text/javascript">
      CKEDITOR.replace('<%= txtcontent.ClientID %>', { skin: 'office2003' });
    </script> 
    </script>--%>
    <asp:Button runat="server" Text="Button" OnClick="Unnamed1_Click" />
  </div>
  <asp:Literal ID="Literal1" runat="server"></asp:Literal>
  </form>

배경 코드:

protected void Unnamed1_Click(object sender, EventArgs e)

    {

        this.Literal1.Text = txtcontent.Text;

    }

그리고 페이지 의@Page 명령 에 ValidateRequest="false"를 추가 합 니 다.가입 한@Page 명령 은 다음 과 같 습 니 다.

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

그렇지 않 으 면 잘못 보고 할 것 이다.
효과 그림:

이 텍스트 편집기 의 텍스트 를 어떻게 가 져 오 는 지 오늘 낮 에 쓰 세 요!자야 지,1 시가 넘 었 어,O. My god!
（O YE！이 제 는 늘 완벽 해 졌 다)
내 데모 다운로드:Cheditor+syntaxhighlighter 데모 ,조금 이라도 모 르 시 면 이 데 모 를 참고 하 시 거나 댓 글 을 남 겨 주세요!
박문 참고:http://zhidao.baidu.com/question/302527067.html
http://blog.sina.com.cn/s/blog_5fdcf5c90100uo4r.html
https://www.jb51.net/article/58407.htm