Python의 Flask 프레임워크에 통합된 CKeditor 서식 있는 텍스트 편집기-파이썬 튜토리얼-php.cn

CKeditor는 현재 JavaScript로 작성된 가장 눈에 띄고 사용 가능한 웹페이지 편집기 중 하나입니다. 강력한 기능, 쉬운 구성, 크로스 브라우저, 다중 프로그래밍 언어 지원 및 오픈 소스의 특징을 가지고 있습니다. 인기가 많아 인터넷에서 관련 기술 문서를 쉽게 찾을 수 있으며, 국내의 많은 WEB 프로젝트와 대형 웹사이트에서 CKeditor를 사용하고 있습니다.

CKeditor 다운로드 CKeditor 공식 홈페이지를 방문하여 다운로드 페이지로 이동하여 Standard Package를 선택한 후(일반적으로 기능이 충분함) CKEditor 다운로드 버튼을 클릭하여 ZIP 형식의 설치 파일을 다운로드합니다. 더 많은 기능을 사용해보고 싶다면 전체 패키지를 다운로드하도록 선택할 수 있습니다.

CKeditor를 다운로드한 후 Flask 프로젝트의 static/ckeditor 디렉터리에 압축을 풀어주세요.

Flask 프로젝트에서 CKeditor 사용 Flask 프로젝트에서 CKeditor를 사용하려면 다음 두 단계만 수행하면 됩니다.

메인 스크립트 파일. CDN에서 로컬 파일이나 참조 파일을 가져올 수 있습니다. CKEDITOR.replace()를 사용하여 기존 태그를 CKEditor로 대체합니다. 샘플 코드:

A Simple Page with CKEditor This is my textarea to be replaced with CKEditor. // 用CKEditor替换 // 使用默认配置 CKEDITOR.replace('editor1'); 로그인 후 복사

CKeditor가 충분하기 때문에 두 번째 단계에서는 ckeditor라는 클래스 속성 값만 CKeditor가 자동으로 교체합니다. 예:

A Simple Page with CKEditor This is my textarea to be replaced with CKEditor. 로그인 후 복사

CKEditor 스크립트 파일은 CDN의 파일을 참조할 수도 있습니다. 다음은 여러 참조 링크입니다.

로그인 후 복사

기본 버전(미니 버전)

로그인 후 복사

표준 버전

로그인 후 복사

정식 버전 업로드 기능 활성화 기본 구성에서는 CKEditor가 업로드 기능을 활성화하지 않습니다. .구성을 수정하면 됩니다. 여러 관련 구성 값을 살펴보겠습니다.

filebrowserUploadUrl: 파일 업로드 경로. 설정된 경우 업로드 버튼이 링크, 이미지 및 플래시 대화 상자 창에 나타납니다.

filebrowserImageUploadUrl: 이미지 업로드 경로입니다. 설정하지 않으면 filebrowserUploadUrl 값이 사용됩니다.

filebrowserFlashUploadUrl: 플래시 업로드 경로입니다. 설정하지 않으면 filebrowserUploadUrl 값이 사용됩니다.

편의를 위해 여기서는 filebrowserUploadUrl 값만 설정하고 해당 값은 /ckupload/로 설정합니다(이 URL은 나중에 Flask에서 정의됩니다).

구성 값을 설정하는 두 가지 주요 방법은 다음과 같습니다.

방법 1: CKEditor 루트 디렉터리에 있는 구성 파일 config.js를 통해 설정:

CKEDITOR.editorConfig = function( config ) { // ... // file upload url config.filebrowserUploadUrl = '/ckupload/'; // ... }; 로그인 후 복사

방법 2: 설정값을 CKEDITOR.replace()에 매개변수로 넣습니다:

CKEDITOR.replace('editor1', { filebrowserUploadUrl: '/ckupload/', }); 로그인 후 복사

Flask가 업로드 요청을 처리합니다 CKEditor 업로드 기능은 통합된 인터페이스입니다. 즉, 하나의 인터페이스로 이미지 업로드, 파일 업로드, 플래시 업로드를 처리할 수 있습니다. 먼저 코드를 살펴보겠습니다.

def gen_rnd_filename(): filename_prefix = datetime.datetime.now().strftime('%Y%m%d%H%M%S') return '%s%s' % (filename_prefix, str(random.randrange(1000, 10000))) @app.route('/ckupload/', methods=['POST']) def ckupload(): """CKEditor file upload""" error = '' url = '' callback = request.args.get("CKEditorFuncNum") if request.method == 'POST' and 'upload' in request.files: fileobj = request.files['upload'] fname, fext = os.path.splitext(fileobj.filename) rnd_name = '%s%s' % (gen_rnd_filename(), fext) filepath = os.path.join(app.static_folder, 'upload', rnd_name) # 检查路径是否存在，不存在则创建 dirname = os.path.dirname(filepath) if not os.path.exists(dirname): try: os.makedirs(dirname) except: error = 'ERROR_CREATE_DIR' elif not os.access(dirname, os.W_OK): error = 'ERROR_DIR_NOT_WRITEABLE' if not error: fileobj.save(filepath) url = url_for('static', filename='%s/%s' % ('upload', rnd_name)) else: error = 'post error' res = """ window.parent.CKEDITOR.tools.callFunction(%s, '%s', '%s'); """ % (callback, url, error) response = make_response(res) response.headers["Content-Type"] = "text/html" return response 로그인 후 복사

업로드된 파일의 획득 및 저장 부분은 비교적 간단하며 표준 파일 업로드입니다. 여기에서는 주로 업로드가 성공한 후 다시 전화하는 방법에 대해 설명합니다.

CKEditor 파일이 업로드된 후 서버는 HTML 파일을 반환합니다. HTML 파일에는 JAVASCRIPT 스크립트가 포함되어 있습니다. JS 스크립트는 오류가 없으면 콜백 함수가 반환된 파일을 전송합니다. 처리를 위한 CKEditor의 URL입니다.

이 세 가지 매개 변수는 다음과 같습니다.

CKEditorFuncNum: 콜백 함수 일련 번호입니다. CKEditor는 URL 매개변수

URL: 업로드된 파일의 URL

오류: 오류 메시지를 통해 서버에 제출합니다. 오류가 없으면 빈 문자열 반환

블루프린트 사용 블루프린트는 대규모 애플리케이션에서 자주 사용되며 CKEditor의 단계와 앱이 통합되어 있습니다. 청사진 보기에서 보기는 기본적으로 동일합니다.

1. Blueprint를 생성할 때 Blueprint의 정적 디렉터리의 절대 경로를 지정해야 합니다.

demo = Blueprint('demo', static_folder="/path/to/static") 로그인 후 복사

2. 해당 URL은 블루프린트 엔드포인트

CKEDITOR.replace( "ckeditor_demo", { filebrowserUploadUrl: './ckupload/' } ); 로그인 후 복사

를 추가해야 합니다. 3. 엔드포인트 엔드포인트 값 설정

response = form.upload(endpoint=demo) 로그인 후 복사 더 많은 Python의 Flask 프레임워크 통합 CKeditor 서식 있는 텍스트 편집기와 관련된 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

Python의 Flask 프레임워크에 통합된 CKeditor 서식 있는 텍스트 편집기