Django KindEditor 부 텍스트 편집기 사용 추가

2616 단어 djangokindeditor
KindEditor 프로필:
KindEditor 는 웹 사이트 에서 보 이 는 편집 효 과 를 얻 을 수 있 도록 하 는 온라인 HTML 편집기 입 니 다.개발 자 는 KindEditor 로 전통 적 인 다 중 텍스트 입력 상자(textarea)를 시각 화 된 부 텍스트 입력 상자 로 바 꿀 수 있 습 니 다.
KindEditor 는 자바 스 크 립 트 를 사용 하여 작성 하여 자바,.NET,PHP,ASP 등 프로그램 과 빈 틈 없 이 통합 할 수 있 으 며 CMS,쇼핑 몰,포럼,블 로그,Wiki,이메일 등 인터넷 응용 프로그램 에서 사용 하기에 적합 합 니 다.
Django Admin 에 KindEditor 를 넣 으 면 딱딱 한 textarea 보다 훨씬 좋 습 니 다.가입 후 효 과 는 다음 과 같 습 니 다:
1.static 파일 경로 설정
KindEditor 는 JavaScript 로 작 성 된 것 으로 static files 에 속 하기 때문에 Django 에 static 경 로 를 설정 해 야 합 니 다.
우선 프로젝트 디 렉 터 리 에 static 폴 더 를 새로 만 듭 니 다.여기 서 주의해 야 할 것 은 myapp/아래 static 폴 더 를 static 파일 로 저장 하 는 디 렉 터 리 로 만 들 면 Django 에서 자신의 static 파일 을 검색 할 수 없습니다.
만 든 후,settings 에 static 파일 디 렉 터 리 를 설정 합 니 다.다음 코드 추가

STATIC_URL = '/static/'
STATICFILES_DIRS = (
 os.path.join(BASE_DIR, 'static'),
)
2,다운로드 KindEditor
KindEditor 를 다운로드 하여 압축 을 풀 고 쓸모없는 asp,asp.NET,phop,jsp,examples 파일 을 삭제 한 후 static 디 렉 터 리 에 복사 합 니 다.KindEditor 는 js 파일 에 일이 있 는 편집기 이기 때문에 js/editor 디 렉 터 리 를 설정 하고 KindEditor 코드 를 디 렉 터 리 에 복사 합 니 다.
이렇게 static/js/editor/kindeditor-4.1.7
3.admin 백 스테이지 관리 중 html 페이지 에 JavaScript 코드 추가
kinditor-4.1.7 디 렉 터 리 에 config.js 파일 을 새로 만 듭 니 다.내용 은 다음 과 같 습 니 다.

KindEditor.ready(function(K) {
 window.editor = K.create('#id_content',{
  //     
  width:'800px',
  height:'200px',
 });
});
4.admin.py 의 관리 클래스 에 class Media 를 추가 하고 js 파일 을 도입 합 니 다.
여 기 는 완전한 admin.py 예제 입 니 다.
비고:class 는 admin.site.register 앞 에 있어 야 합 니 다.그렇지 않 으 면 프로그램 이 잘못 보고 되 어 define 이 없 음 을 표시 합 니 다.

from django.contrib import admin
from .models import category,tags,article
# Register your models here.
class articleAdmin(admin.ModelAdmin):
 list_display = ('id','title','create_time','change_time','type') #      
 search_fields = ('title') #       
 class Media:
  #       HTML     js  ,          STATIC_URL/
  js = (
   '/static/js/editor/kindeditor-4.1.7/kindeditor-all.js',
   '/static/js/editor/kindeditor-4.1.7/lang/zh_CN.js',
   '/static/js/editor/kindeditor-4.1.7/config.js',
  )
admin.site.register(category)
admin.site.register(tags)
admin.site.register(article,articleAdmin)
총결산
이상 은 이 글 의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가 치 를 가지 기 를 바 랍 니 다.여러분 의 저희 에 대한 지지 에 감 사 드 립 니 다.더 많은 내용 을 알 고 싶다 면 아래 링크 를 보 세 요.

좋은 웹페이지 즐겨찾기