xhEditor 텍스트 편집기를 Python의 Flask 사이트에 통합
- 高洛峰원래의
- 2017-03-03 13:37:061412검색
xhEditor 소개
xhEditor는 jQuery를 기반으로 개발된 간단하고 컴팩트하며 효율적인 시각적 HTML 편집기이며 IE 6.0 이상과 호환됩니다. , 파이어폭스 3.0+, 오페라 9.6+, 크롬 1.0+, 사파리 3.22+.
xhEditor는 제가 가장 좋아하는 편집기였으며 드래그 앤 드롭 업로드를 지원하는 최초의 편집기 중 하나이기도 했습니다. xhEditor는 그 당시에는 훌륭한 편집기였으며, 끌어서 놓기 기능이 제가 가장 좋아하는 기능이었습니다. 안타깝게도 개발이 중단되었습니다. xhEditor의 마지막 안정 버전은 1.1.14이며, 2년 넘게 업데이트되지 않았습니다(개발 버전 1.2.1은 2013년에 출시되었습니다). 작성자가 개발 및 유지 관리를 중단했으며 커뮤니티 포럼을 열 수 없습니다. 모두.
xhEditor는 jQuery를 기반으로 개발되었기 때문에 새로운 버전의 jQuery를 잘 지원하지 않습니다. jQuery 버전 1.4만이 가장 잘 지원됩니다.
더 이상 업데이트되지 않지만 서식 있는 텍스트 편집기가 필요한 일부 상황에서는 여전히 완벽한 기능을 제공합니다.
이 글에서는 1.1.14 버전을 예로 들어 Flask 프로젝트에서 xhEditor 편집기를 사용하는 방법과 이미지 업로드, 파일 업로드의 백엔드 기능을 구현하는 방법을 설명합니다.
xhEditor 주요 기능:
간소화된 Mini: 4개 파일의 초기 로드(다음 포함): 1 js(50k) + 2 css (10k) + 이미지 1개(5k), 총 65k. js, css 파일을 gzip으로 압축하여 전송하면 24k 정도까지 더 줄일 수 있습니다.
사용하기 쉬움: 간단한 호출 방법과 클래스 속성 추가만으로 텍스트 영역을 기능이 풍부한 시각적 편집기로 즉시 전환할 수 있습니다.
접근성: WAI-ARIA에 대한 포괄적인 지원, 정밀한 조작을 위한 풀 키보드 및 풀 음성 안내를 제공하여 완벽한 장벽 없는 액세스 경험을 제공하여 장애인이 멋진 글을 쓸 수 있도록 합니다. 삶.
내장 Ajax 업로드: HTML4 및 HTML5 업로드 지원(다중 파일 업로드, 실제 업로드 진행 및 파일 드래그 앤 드롭 업로드), 클립보드를 포함한 강력한 Ajax 업로드 내장 업로드 및 원격 캡처 업로드를 받고 완벽한 사용자 업로드 경험을 추구하세요.
Word 자동 정리: Word 코드를 자동으로 감지 및 정리하고 효율적이고 완벽한 Word 코드 필터링 솔루션을 제공하며 세부 정보 손실 없이 최적화되고 간소화된 코드를 생성합니다.
UBB 비주얼 편집: 완벽한 UBB 비주얼 편집 솔루션을 제공하여 시각적 편집의 편리함을 즐기면서 안전하고 효율적인 코드 저장을 얻을 수 있습니다.
Flask 프로젝트에서 xhEditor 사용
먼저 xhEditor 공식 웹사이트에서 xhEditor 편집기 버전 1.1.14를 다운로드한 후 압축을 풀어야 합니다.
Flask 프로젝트의 static/xheditor 디렉터리입니다.
xhEditor는 클래스 초기화와 JavaScript 초기화라는 두 가지 초기화 방법을 제공합니다. 클래스 초기화는 xheditor의 클래스 속성을 텍스트 영역으로 설정하기만 하면 자동으로 xhEditor 편집기가 됩니다. 페이지는 동시에 여러 편집기에 있을 수 있으며 이 클래스 속성에 매개변수를 추가할 수 있습니다. (PS: CKEditor에도 이 기능이 있습니다.)
이 두 가지 초기화 방법에 대해 공식 웹사이트에서는 매우 편리한 설정 마법사를 제공하므로 구성이 비교적 간단합니다.
샘플 코드:
<head>
<script type="text/javascript" charset="utf-8" src="{{ url_for('static', filename='xheditor/jquery/jquery-1.4.4.min.js') }}"></script>
<script type="text/javascript" charset="utf-8" src="{{ url_for('static', filename='xheditor/xheditor-1.1.14-zh-cn.min.js') }}"></script>
<style>.xheditor {width: 640px; height:320px;}</style>
</head>
<body>
<textarea id="content" name="content" class="xheditor {tools:'mfull'}"></textarea>
</body>
이제 xhEditor 편집기가 생겼습니다.
upImgUrl: 이미지 파일 업로드 수신 URL(예: /upload/), 내장 변수 {editorRoot}
upImgExt를 사용할 수 있습니다. : 이미지 업로드 전 로컬 파일 제한 확장자, 기본값: jpg, jpeg, gif, png
- 업로드된 파일 수신 URL이 /upload/라고 가정하면 편집기 초기화 코드는 다음과 같습니다.
-
<textarea class="xheditor {tools:'mfull',upImgUrl:'/upload/'}"></textarea> 다른 유형의 파일 업로드 설정 등.
HTML5의 전체 POST 데이터 흐름입니다. upload는 upload입니다. 파일의 전체 데이터와 로컬 파일 이름 및 기타 정보는 서버 변수 HTTP_CONTENT_DISPOSITION에 저장됩니다.
반환되는 콘텐츠는 표준이어야 합니다. json 문자열이며 구조는 다음과 같습니다.
{"err":"","msg":"200906030521128703.gif"} 或者 {"err":"","msg":{"url":"200906030521128703.jpg","localfile":"test.jpg","id":"1"}}
文件上传处理示例代码：
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('/upload/', methods=['GET', 'POST'])
def upload():
'''文件上传函数
本函数未做上传类型判断及上传大小判断。
'''
result = {"err": "", "msg": {"url": "", "localfile": ""}}
if request.method == 'POST' and 'filedata' in request.files:
# 传统上传模式，IE浏览器使用这种模式
fileobj = request.files['filedata']
fname, fext = os.path.splitext(fileobj.filename)
rnd_name = '%s%s' % (gen_rnd_filename(), fext)
fileobj.save(os.path.join(app.static_folder, 'upload', rnd_name))
result["msg"]["localfile"] = fileobj.filename
result["msg"]["url"] = '!%s' % \
url_for('static', filename='%s/%s' % ('upload', rnd_name))
elif 'CONTENT_DISPOSITION' in request.headers:
# HTML5上传模式，FIREFOX等默认使用此模式
pattern = re.compile(r"""\s.*?\s?filename\s*=\s*['|"]?([^\s'"]+).*?""", re.I)
_d = request.headers.get('CONTENT_DISPOSITION').encode('utf-8')
if urllib.quote(_d).count('%25') > 0:
_d = urllib.unquote(_d)
filenames = pattern.findall(_d)
if len(filenames) == 1:
result["msg"]["localfile"] = urllib.unquote(filenames[0])
fname, fext = os.path.splitext(filenames[0])
img = request.data
rnd_name = '%s%s' % (gen_rnd_filename(), fext)
with open(os.path.join(app.static_folder, 'upload', rnd_name), 'wb') as fp:
fp.write(img)
result["msg"]["url"] = '!%s' % \
url_for('static', filename='%s/%s' % ('upload', rnd_name))
return json.dumps(result)
远程抓图
一般情况下，当复制站外的图片时，我们希望可以把图片保存到本地，远程抓图就可以完成这个事情。
启用远程抓图功能，需要设置2个参数：
localUrlTest : 非本站域名测试正则表达式
remoteImgSaveUrl : 远程图片抓取接收程序URL
设置这2个参数之后，我们的编辑器初始化代码变成：
复制代码 代码如下:
这里表示抓取除localhost之外其它域名的图片。
远程抓图处理示例代码：
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('/uploadremote/', methods=['POST'])
def uploadremote():
"""
xheditor保存远程图片简单实现
URL用"|"分隔，返回的字符串也是用"|"分隔
返回格式是字符串，不是JSON格式
"""
localdomain_re = re.compile(r'https?:\/\/[^\/]*?(localhost:?\d*)\/', re.I)
imageTypes = {'gif': '.gif', 'jpeg': '.jpg', 'jpg': '.jpg', 'png': '.png'}
urlout = []
result = ''
srcUrl = request.form.get('urls')
if srcUrl:
urls = srcUrl.split('|')
for url in urls:
if not localdomain_re.search(url.strip()):
downfile = urllib.urlopen(url)
fext = imageTypes[downfile.headers.getsubtype().lower()]
rnd_name = '%s%s' % (gen_rnd_filename(), fext)
with open(os.path.join(app.static_folder, 'upload', rnd_name), 'wb') as fp:
fp.write(downfile.read())
urlreturn = url_for('static', filename='%s/%s' % ('upload', rnd_name))
urlout.append(urlreturn)
else:
urlout.append(url)
result = '|'.join(urlout)
return result更多xhEditor 텍스트 편집기를 Python의 Flask 사이트에 통합相关文章请关注PHP中文网！