最近在開發(fā)公司官網(wǎng)孤荣，需要用到資訊發(fā)布和產(chǎn)品發(fā)布等，因此要用到富文本編輯器峡碉，在使用tinymce時(shí)遇到一些問題近哟，記錄下來，以供參考：
一鲫寄、基本配置步驟：
1吉执、下載tinymce：網(wǎng)址 https://www.tinymce.com/download/
2疯淫、解壓文件，將tinymce文件夾復(fù)制到Flask項(xiàng)目的static文件夾下
3戳玫、在static/js目錄下新建tinymce_setup.js熙掺，并將下面的代碼復(fù)制進(jìn)去：
tinymce.init({
//選擇class為content的標(biāo)簽作為編輯器
selector: '#rich_content',
//方向從左到右
directionality: 'ltr',
//語言選擇中文
language: 'zh_CN',
//高度為400
height: 400,
width: '100%',
//工具欄上面的補(bǔ)丁按鈕
plugins: [
'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
'save table contextmenu directionality template paste textcolor',
'codesample imageupload',
'code paste',
],
//工具欄的補(bǔ)丁按鈕
toolbar: 'insertfile undo redo styleselect \
bold italic imageupload fontsizeselect forecolor backcolor emoticons \
alignleft aligncenter alignright alignjustify \
bullist numlist outdent indent \
link image \
print preview media fullpage \
codesample fullscreen ',
//字體大小
fontsize_formats: '10pt 12pt 14pt 18pt 24pt 36pt',
//按tab不換行
nonbreaking_force_tab: true,
imageupload_url: "submit-image",
paste_data_images: true,
});
4、在html文件中引入js文件
<script type="text/javascript" src="../../static/admin/js/jquery.form.min.js"></script>
<script src="../../static/admin/tinymce/js/tinymce/tinymce.min.js"></script>
5咕宿、效果圖
image.png
二币绩、遇到的問題及解決方法
1、圖文編輯時(shí)圖片上傳問題
image.png
a府阀、 圖片無法上傳（我使用的七牛云存儲(chǔ)）
解決方法是在后端view里面寫一個(gè)上傳方法submit_image, 路由必須和基本配置的第3點(diǎn)里的imageupload_url一致缆镣，否則無法上傳圖片：
@admin_bp.route('/submit-image', methods=['GET', 'POST'])
def submit_image():
'''富文本圖片上傳方法'''
file = request.files['file']
try:
img = file.read()
# print(img)
except Exception as e:
current_app.logger.error(e)
return jsonify(errno=RET.PARAMERR, errmsg="圖片讀取失敗")
try:
key = qiniu_image_store(img)
except Exception as e:
current_app.logger.error(e)
img_url = constants.QINIU_DOMIN_PREFIX + key
return '{"error":false,"path":"' + img_url + '"}'
b、提是crsf錯(cuò)誤
image.png
后臺(tái)錯(cuò)誤提示
127.0.0.1 - - [27/Oct/2018 13:45:50] "POST /admin/submit-image HTTP/1
.1" 400 -
原因：沒有添加crsf保護(hù)
但是要修改tinymce比較麻煩试浙，所以我這里就不添加保護(hù)董瞻，改為臨時(shí)關(guān)閉，在上傳圖片方法前面添加@csrf.exempt即可：
最終上傳圖片的方法為：
@admin_bp.route('/submit-image', methods=['GET', 'POST'])
@csrf.exempt
def submit_image():
'''富文本圖片上傳方法'''
file = request.files['file']
try:
img = file.read()
# print(img)
except Exception as e:
current_app.logger.error(e)
return jsonify(errno=RET.PARAMERR, errmsg="圖片讀取失敗")
try:
key = qiniu_image_store(img)
except Exception as e:
current_app.logger.error(e)
img_url = constants.QINIU_DOMIN_PREFIX + key
return '{"error":false,"path":"' + img_url + '"}'
2川队、圖文編輯效果
image.png
至此力细，解決問題！
