simditor 上传图片php,simditor富文本编辑器最新最简单的使用方法
Simditor這個(gè)編輯器就不過(guò)多的介紹了，反正我個(gè)人感覺(jué)挺不錯(cuò)，界面好看并且使用起來(lái)也特別簡(jiǎn)單。
一、Simditor下載
官網(wǎng)鏈接https://simditor.tower.im/，可以直接下載zip壓縮包或者通過(guò)git來(lái)下載。
二、引入文件
你下載的東西可能會(huì)非常多，但我們需要用到的有
把上面文件引入之后，我們就開(kāi)始創(chuàng)建編輯器了
三、基本使用
寫(xiě)html編輯器標(biāo)簽
初始化編輯器js
$(function(){
var editor = new Simditor({
textarea: $('#editor'),
toolbar: [
'title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale',
'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link',
'image', 'hr', '|', 'alignment'
],
placeholder:'寫(xiě)點(diǎn)什么呢......',
defaultImage:'images/image.png',//插入圖片顯示的默認(rèn)圖片
params:{
'key':'v'
},//在textarea中插入一個(gè)隱藏的輸入以存儲(chǔ)參數(shù)
pasteImage:true,//是否允許直接粘貼圖片
cleanPaste:true,//自動(dòng)刪除粘貼內(nèi)容中的所有樣式
upload:{
url:'/api/api.php',//后臺(tái)接收?qǐng)D片地址
params:null,
fileKey:'uploadFile',//后臺(tái)接收?qǐng)D片需要
connectionCount:3,//允許同時(shí)上傳圖片數(shù)
leaveConfirm:'正在上傳圖片',//如果在上傳文件時(shí)離開(kāi)頁(yè)面，則會(huì)顯示此消息；
}
});
});
如果不出意外的話，一個(gè)simditor編輯器已經(jīng)出現(xiàn)了。
四、simditor上傳圖片
我們既然選擇了富文本編輯器，那么上傳圖片一定是必不可少的一個(gè)功能，那么我們來(lái)看看后臺(tái)應(yīng)該怎么寫(xiě)測(cè)試使用代碼<?php
$arr=[
'success'=>true,//true或false
'msg' => 'message',
'file_path'=> '/upload/1.png'
];
echo json_encode($arr);
使用測(cè)試代碼是想讓整個(gè)代碼先跑通，simditor對(duì)后臺(tái)返回的json格式要求就是上面那樣的，這有一點(diǎn)需要注意的是，不要使用return來(lái)返回?cái)?shù)據(jù)要使用echo，至于為什么，這里不多解釋了。如果上面代碼你跑通了，那么接收上傳的圖片并且保存一定是你想要的，往下看，<?php
$image = $_FILES['uploadFile'];//對(duì)應(yīng)初始化編輯器的fileKey
$path='../uploads/4.jpg';
if($image){
move_uploaded_file($image['tmp_name'], $path);
}
$arr=[
'success'=>true,
'msg' => $image,
'file_path'=> $path
];
echo json_encode($arr);
上面代碼只是簡(jiǎn)單的把圖片保存到了$path這個(gè)路徑中了，至于上傳圖片重命名什么的就簡(jiǎn)單了，自己動(dòng)手試試吧。
總結(jié)
以上是生活随笔為你收集整理的simditor 上传图片php,simditor富文本编辑器最新最简单的使用方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 关于js继承
- 下一篇： hyperf框架QueryList（ph