Python의 Flask 프레임워크에 통합된 CKeditor 서식 있는 텍스트 편집기
- 高洛峰원래의
- 2017-03-03 13:39:151909검색
CKeditor는 현재 JavaScript로 작성된 가장 눈에 띄고 사용 가능한 웹페이지 편집기 중 하나입니다. 강력한 기능, 쉬운 구성, 크로스 브라우저, 다중 프로그래밍 언어 지원 및 오픈 소스의 특징을 가지고 있습니다. 인기가 많아 인터넷에서 관련 기술 문서를 쉽게 찾을 수 있으며, 국내의 많은 WEB 프로젝트와 대형 웹사이트에서 CKeditor를 사용하고 있습니다.
CKeditor 다운로드
CKeditor 공식 홈페이지를 방문하여 다운로드 페이지로 이동하여 Standard Package를 선택한 후(일반적으로 기능이 충분함) CKEditor 다운로드 버튼을 클릭하여 ZIP 형식의 설치 파일을 다운로드합니다. 더 많은 기능을 사용해보고 싶다면 전체 패키지를 다운로드하도록 선택할 수 있습니다.
CKeditor를 다운로드한 후 Flask 프로젝트의 static/ckeditor 디렉터리에 압축을 풀어주세요.
Flask 프로젝트에서 CKeditor 사용
Flask 프로젝트에서 CKeditor를 사용하려면 다음 두 단계만 수행하면 됩니다.
3f1c4e4b6b16bbbd69b2ee476dc4f83a 메인 스크립트 파일. CDN에서 로컬 파일이나 참조 파일을 가져올 수 있습니다.
CKEDITOR.replace()를 사용하여 기존 4750256ae76b6b9d804861d8f69e79d3 태그를 CKEditor로 대체합니다.
샘플 코드:
<!DOCTYPE html>
<html>
<head>
<title>A Simple Page with CKEditor</title>
<!-- 请确保CKEditor文件路径正确 -->
<script src="{{ url_for('static', filename='ckeditor/ckeditor.js') }}"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
// 用CKEditor替换<textarea id="editor1">
// 使用默认配置
CKEDITOR.replace('editor1');
</script>
</form>
</body>
</html>
CKeditor가 충분하기 때문에 두 번째 단계에서는 ckeditor라는 클래스 속성 값만 4750256ae76b6b9d804861d8f69e79d3 CKeditor가 자동으로 교체합니다. 예:
<!DOCTYPE html>
<html>
<head>
<title>A Simple Page with CKEditor</title>
<!-- 请确保CKEditor文件路径正确 -->
<script src="{{ url_for('static', filename='ckeditor/ckeditor.js') }}"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor1" class="ckeditor" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
</form>
</body>
</html>
CKEditor 스크립트 파일은 CDN의 파일을 참조할 수도 있습니다. 다음은 여러 참조 링크입니다.
<script src="//cdn.ckeditor.com/4.4.6/basic/ckeditor.js"></script>
기본 버전(미니 버전)
<script src="//cdn.ckeditor.com/4.4.6/standard/ckeditor.js"></script>
표준 버전
<script src="//cdn.ckeditor.com/4.4.6/full/ckeditor.js"></script>
정식 버전
업로드 기능 활성화
기본 구성에서는 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()에 매개변수로 넣습니다:
<script>
CKEDITOR.replace('editor1', {
filebrowserUploadUrl: '/ckupload/',
});
</script>
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 = """
<script type="text/javascript">
window.parent.CKEDITOR.tools.callFunction(%s, '%s', '%s');
</script>
""" % (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은 블루프린트 엔드포인트
<script src="{{url_for('.static', filename='ckeditor/ckeditor.js')}}"></script>
<script type="text/javascript">
CKEDITOR.replace(
"ckeditor_demo", {
filebrowserUploadUrl: './ckupload/'
}
);
</script>
를 추가해야 합니다. 3. 엔드포인트 엔드포인트 값 설정
response = form.upload(endpoint=demo)
더 많은 Python의 Flask 프레임워크 통합 CKeditor 서식 있는 텍스트 편집기와 관련된 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!