simditor富文本編輯器最新最簡單的使用方法

Simditor這個編輯器就不過多的介紹了，反正我個人感覺挺不錯，界面好看並且使用起來也特別簡單。

一、Simditor下載
官網鏈接https://simditor.tower.im/，可以直接下載zip壓縮包或者通過git來下載。
二、引入文件
你下載的東西可能會非常多，但我們需要用到的有

<link rel="stylesheet" type="text/css" href="[style path]/simditor.css" />

<script type="text/javascript" src="[script path]/jquery.min.js"></script>
<script type="text/javascript" src="[script path]/module.js"></script>
<script type="text/javascript" src="[script path]/hotkeys.js"></script>
<script type="text/javascript" src="[script path]/uploader.js"></script>
<script type="text/javascript" src="[script path]/simditor.js"></script>

把上面文件引入之後，我們就開始創建編輯器了
三、基本使用
寫html編輯器標籤

<textarea id="editor" placeholder="Balabala" autofocus></textarea>

初始化編輯器js

<script>
		$(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:'寫點什麼呢......',
			  defaultImage:'images/image.png',//插入圖片顯示的默認圖片
			  params:{
				  'key':'v'
			  },//在textarea中插入一個隱藏的輸入以存儲參數
			  pasteImage:true,//是否允許直接粘貼圖片
			  cleanPaste:true,//自動刪除粘貼內容中的所有樣式
			  upload:{
				  url:'/api/api.php',//後臺接收圖片地址
				  params:null,
				  fileKey:'uploadFile',//後臺接收圖片需要
				  connectionCount:3,//允許同時上傳圖片數
				  leaveConfirm:'正在上傳圖片',//如果在上傳文件時離開頁面，則會顯示此消息；
			  }
			});
		});
	</script>

如果不出意外的話，一個simditor編輯器已經出現了。

四、simditor上傳圖片
我們既然選擇了富文本編輯器，那麼上傳圖片一定是必不可少的一個功能，那麼我們來看看後臺應該怎麼寫
測試使用代碼

<?php
$arr=[
	'success'=>true,//true或false
	'msg' => 'message',
	'file_path'=> '/upload/1.png'
];
echo json_encode($arr);

使用測試代碼是想讓整個代碼先跑通，simditor對後臺返回的json格式要求就是上面那樣的，這有一點需要注意的是，不要使用return來返回數據要使用echo，至於爲什麼，這裏不多解釋了。
如果上面代碼你跑通了，那麼接收上傳的圖片並且保存一定是你想要的，往下看，

<?php
$image = $_FILES['uploadFile'];//對應初始化編輯器的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);

上面代碼只是簡單的把圖片保存到了$path這個路徑中了，至於上傳圖片重命名什麼的就簡單了，自己動手吧。