2. 程式人生 > >一款輕便的富文字編輯器---Quill

一款輕便的富文字編輯器---Quill

阿新 • • 發佈：2019-02-11
/* 編輯器操作條選項 */ var toolbarOptions = [ ['bold', 'italic', 'underline', 'strike'], //開關按鈕 ['blockquote', 'code-block'], [{'header': 1}, {'header': 2}], //自定義按鈕值 [{'list': 'ordered'}, {'list': 'bullet'}], [{'script'
: 'sub'}, {'script': 'super'}], // 上標/下標 [{'indent': '-1'}, {'indent': '+1'}], // 減少縮排/縮排 [{'direction': 'rtl'}], // 文字方向 [{'size': ['small', false, 'large', 'huge']}], // 自定義下拉 [{'header': [1, 2, 3, 4, 5, 6, false]}], [{'color': []}, {'background'
: []}], //使用主題的預設下拉 [{'font': []}], [{'align': []}], ['clean'], //移除格式化 ['image'], ['video'], ['formula'] //需要載入cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js ]; /* 例項化編輯器 */ var
quill = new Quill('#editor', { /*debug: 'info',*/ modules: { //formula: true, //公式；需要載入cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js //syntax: true, //高亮；需要載入cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js /*toolbar: { container:"#editor_header" }*/ // 或者 toolbar :'#editor_header' toolbar:toolbarOptions //指定編輯器操作條 }, theme: 'snow', //主題，有兩種，snow和bubble placeholder:'請輸入', readOnly: false }); /* 傳入布林值，控制編輯器是否可用 */ quill.enable(); //quill.blur(); //失去焦點 //quill.focus(); //獲得焦點 /* 事件的繫結 */ quill.on('text-change', function(delta, oldDelta, source) { console.log(delta); console.log(oldDelta); console.log(source); console.log(quill.container.firstChild.innerHTML); //獲取當前富文字編輯器例項的內容（帶html標籤） }); //quill.off('text-change', handler); //事件的解綁 /* 向編輯器中插值 */ quill.clipboard.dangerouslyPasteHTML('&nbsp;<b>Hello World</b><p>new line</p>'); //向編輯器中插入html片段 quill.setText('Hello!'); //向編輯器中插入文字 /* 獲取編輯器中的值 */ console.log(quill.getContents()); /* 自定義按鈕 */ var myBtn = document.querySelector("#my_button"); myBtn.addEventListener("click",function(){ console.log('my-btn') })

相關推薦

一款輕便的富文字編輯器---Quill

/* 編輯器操作條選項 */ var toolbarOptions = [ ['bold', 'italic', 'underline', 'strike'], //開關按鈕 ['blockqu

React中使用富文字編輯器Quill，支援貼上圖片

最近專案中需要用到富文字編輯器，並且客戶明確提出需要實現可以直接截圖貼上到文字框中。 由於我們的前端是用react寫的，於是就去參考了知乎的實現，發現知乎的富文字框是可以直接貼圖進去的，但由於看不到原始碼，只能瀏覽器除錯看了一下，發現他就是一個可編輯的div，

富文字編輯器Quill的簡單React封裝

最近要在React專案中實現富文字編輯器，我在基於不同外掛實現多種版本之後，體會到了Quill的強大，決定在專案中使用Quill實現富文字編輯器功能。 大多數富文字編輯器都有所見即所得的（指不能進行擴充套件）的問題，這意味著我們很難或者不可能對其進行自定義滿足一些特定的需求

一文入門富文字編輯器

簡介 富文字編輯器，能夠使web頁面像word一樣，實現對文字的編輯，通常應用在一些文字處理比較多的系統中。現在業界有很多成熟的富文字編輯器，比如功能齊全啊TinyMCE、輕量高效的wangEditor、百度出品的UEditor等。富文字編輯器很多，但是卻很少思考如何從零開始，實現一個富文字編輯器。本文主要簡

現代富文字編輯器Quill的模組化機制

    DevUI是一支兼具設計視角和工程視角的團隊，服務於華為雲DevCloud平臺和華為內部數箇中後臺系統，服務於設計師和前端工程師。官方網站：devui.designNg元件庫：ng-devui（歡迎Star） 引言 本文基於DevUI的富文字編輯器開發實踐和Quill原始碼寫成。

現代富文字編輯器Quill的內容渲染機制

DevUI是一支兼具設計視角和工程視角的團隊，服務於華為雲DevCloud平臺和華為內部數箇中後臺系統，服務於設計師和前端工程師。官方網站：devui.designNg元件庫：ng-devui（歡迎Star） 引言 在 Web 開發領域，富文字編輯器（ Rich Text Editor ）是一個使用場景非常

RichEditor——一款基於RecyclerView實現的富文字編輯器實現方案(支援圖文、轉義生成MarkDown、粗體、斜體、下劃線、刪除線、超連結、標題等)

前言 對於富文字編輯器的實現，首先我們肯定會想到實現的編輯器需要支援的幾個必要特性： 1.涉及大量文字，圖片，文字樣式的展示與編輯。 2.涉及極其複雜的使用者互動。 目前Github上我所瞭解的富文字編輯器基本上實現方式基於兩種： * 1.基於WebView

vue專案中富文字編輯器vue-quill-editor的使用

前端開發過程中，會遇到在頁面上加入富文字編輯器，在vue專案中開發遇到這一需求的時候，我們可以使用富文字編輯器vue-quill-editor，話不多說，先上一張效果圖： 1）安裝 vue-quill-editor 依賴 npm install vue

【Vue】quill-editor富文字編輯器元件的運用與修改配置使圖片上傳到伺服器

前言：Vue的生態已經越來越繁榮，越來越多有趣好用的元件加入的生態中了。quill-editor富文字編輯器就是很好用的元件之一。 一、quill-editor的安裝與使用 ①、安裝 npm install vue-quill-editor --save ②、

Vue專案中使用ueditor富文字編輯器(一)

Ueditor專案下載地址：http://ueditor.baidu.com/website/ 這裡使用php版本（如果後端是java就下載完整版和php版，在完整原始碼版中有java的程式碼，

前端入門-富文字編輯器(一)

背景需求 技術需求：擴充套件 富文字編輯器  功能 技術調研 目標：本著不重複造輪子，集中精力解決業務邏輯。其實主要是沒技術實力.... 方向：尋找開源的富文字編輯器； 發現 各個開源的都差不多(技術菜，看不出區別)，傳統的編輯器太龐大，適合移動端的較少 結果：公司最近在

整理15款實用javascript富文字編輯器

百度UEditor UEditor是由百度web前端研發部開發所見即所得富文字web編輯器，具有輕量，可定製，注重使用者體驗等特點，開源基於MIT協議，允許自由使用和修改程式碼... 2bootstrap-wysiwyg bootstrap-wysiwyg 為Bo

quill——簡單的富文字編輯器

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

4款Bootstrap線上富文字編輯器

Bootstrap 已經大大簡化響應式 web 開發，但是，如果再加上不用手動一點點敲程式碼，而是可以快速選擇你想要使用的 Bootstrap 元件，然後直接將其拖進你的畫板中，開發是否會變得更加輕鬆？！ 這便是所謂的所見即所得（What you see is what

在Vue專案使用quill-editor帶樣式編輯器（更改插入圖片和視訊） 運用vue-quilt-editor編寫富文字編輯器 自定義圖片路徑 獲取後臺返回路徑

一、首先在main.js  引入 vue-quilt-editorimport VueQuillEditor from 'vue-quill-editor'import 'quill/dist/quill.core.css'import 'quill/dist/quill.s

富文字編輯器UEditor自定義工具欄（一、基礎配置與字型、背景色、行間距、超連結實現）

導讀：UEditor 是由百度「FEX前端研發團隊」開發的所見即所得富文字web編輯器，功能強大，可定製，是一款優秀的國產線上富文字編輯器，編輯器內可插入圖片、音訊、視訊等。 一、UEditor自定義工具欄效果圖如下： 二、UEditor富文字編輯器環境搭建及專案引用 環境搭建不再贅述，請自行查閱或者參考以

兩款富文字編輯器——Kindeditor+UEditor

菜菜君最近第一次使用富文字編輯器，折騰了半天才摸到了一點門道。先概括一下。kindeditor比UEditor的功能少，但是也算五臟俱全，基本的功能都有了。另外，UEditor的介面感覺更好看。但是，菜菜君覺得，UEditor用起來更復雜啊啊啊啊！至少，菜菜君現在還沒弄好.

Vue +Element UI +vue-quill-editor 富文字編輯器及插入圖片自定義

1.安裝npm install vue-quill-editor --save2.在main.js中引入import VueQuillEditor from 'vue-quill-editor' im

Vue基於vue-quill-editor富文字編輯器使用心得

vue-quill-editor的guthub地址，現在市面上有很多的富文字編輯器，我個人還是非常推薦Vue自己家的vue-quill-deitor，雖然說只支援IE10+,但這種問題，帥給別人吧！ 那麼我們直擊正題，在vue中使用quill呢，我們需要npm進行安裝，安裝命令如下： npm ins

vue中安裝使用Quill富文字編輯器

1、安裝依賴npm install vue-quill-editor --save注：我在已有的vue專案中（含有已安裝的依賴，即node_modules資料夾）直接進行安裝並不成功，報錯，沒有截圖，但