simditor 是一個基於瀏覽器的所見即所得的文本編輯器。Simditor 富文本編輯器, 支持多選圖片上傳, 視頻連接插入, HTML代碼編輯以及常用富文本按鈕，支持的瀏覽器：IE10、Firefox、Safari。

點擊這裏下載zip文件。你也可以安裝 Simditor bower 和 npm:

$ npm install simditor

$ bower install simditor

在 項目中使用 simditor

導入 simditor 樣式文件和 js 文件

<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>

請註意

simditor 是基於jQuery 和 module.js

hotkeys.js 用於綁定熱鍵

uploader.js 是上傳文件相關。你不需要導入此文件如果你不想上傳功能。

使用 simditor，首先，你需要一個 textarea 這樣的元素：

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

simditor 初始化：

var editor = new Simditor({
    textarea: $(‘#editor‘),
    upload: {
        url
 
: ‘{{ route(‘topics.upload_image‘) }}‘, // 處理上傳圖片的 URL；
        params: { _token: ‘{{ csrf_token() }}‘ }, //  Laravel 的 POST 請求必須帶防止 CSRF 跨站請求偽造的 _token 參數；
        fileKey: ‘upload_file‘, // 是服務器端獲取圖片的鍵值，我們設置為 upload_file;
        connectionCount: 3, // 最多只能同時上傳 3 張圖片；
        leaveConfirm: ‘文件上傳中，關閉此頁面將取消上傳。‘   //
 
 上傳過程中，用戶關閉頁面時的提醒。
    },
    pasteImage: true,  // 設定是否支持圖片黏貼上傳，這裏我們使用 true 進行開啟；
  });

textarea 是一個必需的選項。jQuery 對象、HTML 元素或選擇器字符串可以通過此選項。

一些可選的選項：

1. placeholder（默認的）simditor預留位置。使用默認的文本占位符屬性值。

2. toolbar（默認值：true）-顯示工具欄按鈕

3. toolbarFloat（默認值：true）固定在瀏覽器頂部工具欄滾動時。

4. toolbarHidden（默認：假）-隱藏工具欄。

5. defaultImage（默認：“圖像/圖像，PNG的）-默認圖像占位符。使用時插入圖片Simditor。

6. tabIndent（默認值：true）使用“Tab”鍵進行縮進。

7. params（默認：{ }）插入一個隱藏的輸入文本存儲參數（鍵值對）。

8. upload（默認：假）接受虛假或鍵-值對。上傳圖片的額外的選項。例如“URL”、“params”

9. pasteImage（默認：假）支持上傳圖像從剪貼板粘貼。用Firefox和Chrome只支持。

Simidtor 擴展

Simditor-Dropzone

這是 Simditor 的一個小插件，它可以讓『插入圖片』的功能支持 『拖拽上傳』。

使用

只需要在 simditor-all.js 後引入這個文件即可。

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

<!- ..  ***** .. ->
<script type="text/javascript" src="[script path]/simditor-dropzone.js"></script>

然後就可以『拖拽上傳插入圖片了』，無需做其它配置。

simditor-autosave

Simditor 的官方擴展，運用 HTML5 的 localStorage 技術來自動保存用戶輸入內容。

如何使用

在 Simditor 的基礎上額外引用 simditor-autosave 的腳本。

<script src="/assets/javascripts/simditor-autosave.js"></script>

simditor-autosave 配置

方法一：

直接在使用了 Simditor 對應的 textarea 中設置 data-autosave 屬性，其值將作為內容保存時的路徑。 例如下面的設置數據將保存在 url_path/editor-content/autosave/ 中

<textarea id="txt-content" data-autosave="editor-content" autofocus></textarea>

方法二：

在 Simditor 初始化時，直接寫入配置信息中,例如下面的設置，效果跟上面一樣， 數據也將保存在 url_path/editor-content/autosave/ 中

new Simditor({
  textarea: textareaElement,
  ...,
  autosave: ‘editor-content‘
})

方法三：

在 Simditor 初始化時，可直接指定數據保存路徑，如：

new Simditor({
  textarea: textareaElement,
  ...,
  autosavePath: ‘/url_path/editor-content/autosave‘
})

註意當方法一和方法二同時定義時，則優先選擇方法一中的參數作為保存時的路徑

另外，可通過 autosave: false 關閉自動保存。

Simditor 富文本編輯器多選圖片上傳、視頻連接插入