ASP.NET 에 통합 바 이 두 편집기 UEditor

0.ueditor 안내
UEditor 는 바 이 두 WEB 전단 연구개 발 부가 개발 한 보 이 는 바로 얻 은 오픈 소스 부 텍스트 편집기 로 경 량,맞 춤 형,사용자 체험 우수 등 특징 을 지닌다.오픈 소스 는 BSD 프로 토 콜 을 기반 으로 모든 소스 코드 는 프로 토 콜 이 허용 하 는 범위 내 에서 자 유 롭 게 수정 하고 사용 할 수 있 습 니 다.
UEditor 홈 페이지:http://ueditor.baidu.com/website/index.html
UEditor 공식 문서 주소:http://fex.baidu.com/ueditor/
1.ueditor 패키지 항목 가 져 오기
홈 페이지 에서다운로드 하 다.의 개발 가방 을 풀 어 프로젝트 에 포함 시 킵 니 다.
(비고:최신 코드 가 필요 할 때.NETFramework 4 이상 기반)
압축 해제 후 디 렉 터 리 아래 파일 은 다음 과 같 습 니 다.
index.html 는 예제 파일 로 삭제 할 수 있 습 니 다.ueditor.config.js 는 일부 부 텍스트 편집기 의 설정 입 니 다.변경 하지 말고 페이지 에서 참조 할 때 설정 하 는 것 을 권장 합 니 다.모든 페이지 가 설정 이 필요 하 다 면 js 파일 에 쓸 수 있 습 니 다.dialogs 는 텍스트 상자 에서 단 추 를 누 를 때 사용 하 는 팝 업 상자 효과 입 니 다.lang 폴 더 아래 는 언어 와 관련 된 설정 입 니 다.현재 중국어 와 영어 만 있 습 니 다.themes 폴 더 아래 는 스타일 입 니 다.third-party 폴 더 아래 는 제3자 플러그 인 입 니 다.코드 하 이 라이트,캡 처 등 이 있 습 니 다.

저 는 프로젝트 에 ueditor Helper.js 파일 을 새로 만 들 었 습 니 다.파일 에 ueditor 가 자주 사용 하 는 방법 과 ueditor 에 대한 설정 을 정 의 했 습 니 다.


net 디 렉 터 리 에서 우 리 는 controller.ashx 와 config.json 만 유지 하면 됩 니 다.동시에 App코드 의 코드 를 프로젝트 에 복사 한 AppCode 에 서 는 bin 디 렉 터 리 에 있 는 Json.NET 프로그램 집합 에 대한 인용 을 추가 합 니 다.config.json 파일 은 일부 설정 을 정의 하고 파일 을 업로드 하 는 요구 사항 과 서버 에 업로드 하여 저장 하 는 경 로 를 설정 합 니 다.web.config 파일 에서 프로젝트 프레임 워 크 는 최소 4.0 이 어야 합 니 다.
2.페이지 에 js 인용 추가,페이지 에서 인용

zh-cn.js 파일 을 추가 하 는 것 은 언어 를 설정 하여 언어 오 류 를 자동 으로 식별 하여 언어 에 적합 한 오 류 를 방지 하 는 것 입 니 다.UEditor Helper.js 파일 은 자주 사용 하 는 방법 과 편집기 설정 의 패키지 입 니 다.index.html 의 소스 코드 를 보 려 면 js 코드 가 있 습 니 다.

사용자 정의 UEditor Helper.js 파일 에서 몇 가지 방법 을 사 용 했 고 첫 번 째 줄 코드 를 수정 하여 ueditor 부 텍스트 편집기 설정 을 진행 하 였 습 니 다.

3.페이지 초기 화
부 텍스트 편집 기 를 추가 해 야 하 는 곳 에 다음 코드 를 추가 합 니 다:

4.내용 편집 시 페이지 불 러 오기(ajax 불 러 오기 내용)
부 텍스트 편집 기 는 html 코드 만 생 성 되 기 때문에 우 리 는 Ajax 동적 으로 내용 을 불 러 와 야 합 니 다.CKEditor 에 비해 이것 은 비교적 번 거 로 운 부분 입 니 다.CKEditor 를 사용 하면 봉 인 된 서버 엔 드 컨트롤 을 직접 사용 할 수 있 습 니 다.물론 서버 엔 드 컨트롤 을 사용 하지 않 고 Ajax 동적 으로 내용 을 불 러 올 수도 있 습 니 다.
먼저 페이지 를 불 러 올 때 뉴스의 id 를 가 져 온 다음 에 ajax 조 회 를 실시 합 니 다.뉴스 를 조회 하 는 것 은 handler 에 봉인 되 어 있 습 니 다.이 handler 에 ajax 요청 을 합 니 다.요청 파 라 메 터 는 뉴스 id 이 고 뉴스 를 가 져 온 후에 뉴스의 내용 을 ueditor 에 설정 합 니 다.

//      
//        getEditor          ，              ，    UE.getEditor('editor')         
var ue = UE.getEditor('editor',{autoHeightEnabled: false});
function isFocus(e) {
  alert(UE.getEditor('editor').isFocus());
  UE.dom.domUtils.preventDefault(e)
}
function setblur(e) {
  UE.getEditor('editor').blur();
  UE.dom.domUtils.preventDefault(e)
}
function insertHtml() {
  var value = prompt('  html  ', '');
  UE.getEditor('editor').execCommand('insertHtml', value)
}
function createEditor() {
  UE.getEditor('editor');
}
function getAllHtml() {
  return UE.getEditor('editor').getAllHtml();
}
function getContent() {
  return UE.getEditor('editor').getContent();
}
function getPlainTxt() {
  return UE.getEditor('editor').getPlainTxt();
}
function setContent(isAppendTo) {
  UE.getEditor('editor').setContent('', isAppendTo);  
}
function getText() {
  //                  ，     getText       ，       ，      
  var range = UE.getEditor('editor').selection.getRange();
  range.select();
  return UE.getEditor('editor').selection.getText();
}
function getContentTxt() {
  return UE.getEditor('editor').getContentTxt();
}
function hasContent() {
  return UE.getEditor('editor').hasContents();
}
function setFocus() {
  UE.getEditor('editor').focus();
}
function deleteEditor() {
  UE.getEditor('editor').destroy();
}
function getLocalData() {
  alert(UE.getEditor('editor').execCommand("getlocaldata"));
}
function clearLocalData() {
  UE.getEditor('editor').execCommand("clearlocaldata");
  alert("      ")
}

이상 에서 말 한 것 이 바로 본문의 전체 내용 이 니 여러분 들 이 좋아 하 시 기 를 바 랍 니 다.