1. 程式人生 > >Simditor:簡單快速的開源富文字編輯器

Simditor:簡單快速的開源富文字編輯器

Simditor是團隊協作工具Tower.im使用的富文字編輯器,基於jQuery開發。官方提供了簡潔的使用和再開發教程,指導開發者自己搭建Simditor開發環境和編寫Simditor擴充套件。


Simditor編輯器目前正被Tower.im產品使用。當初,Tower.im採用了一款開源編輯器,但隨著業務需求的不斷增長,原先使用的第三方開源編輯器已經滿足不了需求。為了更好地提供編輯和協作體驗,Tower團隊決定開發自己的編輯器。

主要特點

相比傳統的編輯器,Simditor主要特點是: 

  • 功能精簡,載入快速
  • 輸出格式化的標準HTML
  • 每一個功能都有非常優秀的使用體驗

使用

1. 官網下載Simditor檔案。

2. 在頁面中引用下面檔案:

<link media="all" rel="stylesheet" type="text/css" href="styles/font-awesome.css" />
<link media="all" rel="stylesheet" type="text/css" href="styles/simditor.css" />
<script type="text/javascript" src="scripts/jquery-2.0.3.js"></script>
<script type="text/javascript" src="scripts/module.js"></script>
<script type="text/javascript" src="scripts/uploader.js"></script>
<script type="text/javascript" src="scripts/simditor.js"></script>

3. 在嵌入編輯器的頁面中初始化 Simditor:

var editor = new Simditor({
  textarea: $('#textarea-id')
});

更加詳細的使用方法,可參考官網教程

(文/王子殿下)

相關推薦

Simditor簡單快速開源文字編輯

Simditor是團隊協作工具Tower.im使用的富文字編輯器,基於jQuery開發。官方提供了簡潔的使用和再開發教程,指導開發者自己搭建Simditor開發環境和編寫Simditor擴充套件。 Simditor編輯器目前正被Tower.im產品使用。當初,Tower.im採用了一款開源編輯器,但

怎樣快速使用文字編輯

富文字編輯器 富文字編輯器,Rich Text Editor, 簡稱 RTE, 是一種可內嵌於瀏覽器,所見即所得的文字編輯器。 富文字編輯器不同於文字編輯器,程式設計師可到網上下載免費的富文字編輯器內嵌於自己的網站或程式裡,方便使用者編輯文章或資訊。 使用 1.開啟Git Bash,

Django使用Djangoueditor文字編輯

Django使用Djangoueditor富文字編輯器 —————————————————————————————————————— 第一步: - 下載Djangoueditor壓縮包,將包解壓放到專案目錄資料夾下 - 下載地址:https://github.

angularjs中簡單使用kindeditor文字編輯

如何在angularjs中快速使用kindeditor富文字編輯器 ? 先引入相關的css樣式和js檔案: <!-- 富文字編輯器 --> <link rel="stylesheet" href="../plugins/kindedit

幾種知名開源文字編輯記錄和對比(僅供參考)

1、UEditor 百度的。 優點:外掛多,基本滿足各種需求,類似貼吧中的回覆介面。 缺點:不再維護,文件極少,使用並不普遍,圖片只能上傳到本地伺服器,如果需要上傳到其他伺服器需要改動原始碼,較為難辦,載入速度慢。 總結:小專案,可以用用,不推薦使用。 2、kindeditor 介面類似百度,效果很像 文

幾種知名開源文字編輯記錄和對比

1、UEditor 百度的。 優點:外掛多,基本滿足各種需求,類似貼吧中的回覆介面。 缺點:不再維護,文件極少,使用並不普遍,圖片只能上傳到本地伺服器,如果需要上傳到其他伺服器需要改動原始碼,較為難辦,載入速度慢。 總結:小專案,可以用用,不推薦使用。 2、ki

Flask學習10Flask專案整合文字編輯CKEditor 上傳圖片

CKEditor下載地址:https://ckeditor.com/ckeditor-4/download/ 訪問CKeditor官方網站,進入下載頁面,選擇Standard Package(一般情況

百度編輯UEEDITOR使用簡單介紹 UEditor表單提交和後臺互動詳解 最後更新對應的版本1.2.5.1 教程描述 文字編輯的使用開發中,表單提交有多種場景,編輯初始化有新增文章和編輯

UEditor表單提交和後臺互動詳解最後更新對應的版本:1.2.5.1 教程描述: 富文字編輯器的使用開發中,表單提交有多種場景,編輯器初始化有新增文章和編輯就文章兩種場景,提交表單有普通提交也有ajax提交表單兩種情景,此教程詳細講解這幾種場景下如何保證後臺正確拿到資料。 一、編輯器內容初始化(即往編

基於ABP做一個簡單的系統——實戰篇4.基於文字編輯,Razor模板引擎生成內容並匯出Word 填坑記錄

起因 需求是這樣的,有一種協議需要生成,協議的模板是可配置的,在生成過程中,模板中的內容可以根據約定的標記進行替換(就像mvc的razor模板一樣)。生成後的內容還需要匯出成word或pdf。 常見的使用場景比如租賃協議生成,郵件內容模板生成等等,不要傻傻的hard-code像‘#name#’這樣的標記了。

文字編輯圖片上傳失敗的BUG解決IndexErrorlist index out of range

富文字編輯器圖片上傳失敗的BUG解決 問題原因 我們將通過Django上傳的圖片儲存到了FastDFS中,而儲存在FastDFS中的檔名沒有後綴名(.png/.jpg/.jif),而ckeditor在處理上傳的檔名按照有後綴名來處理,所以會出現bug錯誤 解決方法 找到虛擬

文字編輯KindEdit使用方法

第一步:在jsp中加入富文字編輯器js的引用 第二步:在富文字編輯器出現的位置新增一個input 型別為textarea 第三步:呼叫js方法初始化富文字編輯器。 第四步:提交表單時,需要把富文字編譯的內容,與form表單中的內容進行同步,呼叫富文字編輯器的同步方

【js】kindeditor文字編輯簡單使用

首先去下載kindeditor的相關檔案 引入css以及js <link rel="stylesheet" href="js/kindeditor-4.1.10/themes/defaul

wangEditor文字編輯簡單使用

第二步:專案中引入js   第三步:jsp頁面中使用 <%@ page language="java" contentType="text/html; charset=UTF-8"

Django之文字編輯的使用,超級簡單~

前端顯示: Step1: pip3 install django-tinymce Step2: <script src="/static/tiny_mce/tiny_m

百度文字編輯UEditor使用簡單示例

HTML程式碼: <form id="f_edit" method="post"> <input name="id" type="hidden" value="${activit

ueditor文字編輯java使用及最簡單的配置(ssh)

之前用過ueditor,結果這兩天要用又忘了怎麼用了,寫個文件記錄下來 1. UEditor簡介 UEditor是由百度web前端研發部開發所見即所得富文字web編輯器,具有輕量,可定製,注重使用者體驗等特點,開源基於MIT協議,允許自由使

quill——簡單文字編輯

先介紹一下一般網頁如何實現 quill 富文字編輯器 引入 quill.js 檔案 <script src="https://cdn.quilljs.com/1.3.3/quill.j

在專案中使用文字編輯UEditor(開源文字編輯外掛)

第一步:下載UEditor所需要的所有檔案 此處用的是JSP-UTF-8版本 下載連結:http://ueditor.baidu.com/website/download.html 第二步:將下載檔案解壓至專案web目錄下 第三步:將資料夾下/jsp/lib目錄下的五個jar包拷貝至專案中的WEB-INF/

wangEditor 基於javascript和css開發的 Web文字編輯, 輕量、簡潔、易用、開源免費

介紹 wangEditor —— 輕量級 web 富文字編輯器,配置方便,使用簡單。支援 IE10+ 瀏覽器。 介面效果圖: 使用方法: 1、常規使用方法 注意,以下程式碼中無需引用任何 C

關於文字編輯ueditor(jsp版)上傳檔案到阿里雲OSS的簡單例項,適合新手

       本人菜鳥一枚,最近公司有需求要用到富文字編輯器,我選擇的是百度的ueditor富文字編輯器,閒話不多說,進入正題:一:ueditor的下載及安裝以及OSS的下載及引入我就不詳細說了,這裡說下要注意的幾點:        1,ueditor下載地址:點選開啟連結