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

2021-08-14 19:04:57 字數 2350 閱讀 7465

2、直接上**:

charset="utf-8">

name="viewport"

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

quilldemotitle>

rel="stylesheet"

href="quill.snow.css">

rel="stylesheet"

href="quill.bubble.css">

body

#editor

style>

head>

id="editor_header"

style="display: none;">

class="ql-size">

value="small">

option>

selected>

option>

value="large">

option>

value="huge">

option>

select>

class="ql-bold">

button>

class="ql-script"

value="sub">

button>

class="ql-script"

value="super">

button>

id="my_button">

button>

div>

id="editor">

div>

src="quill.js">

script>

/* 編輯器操作條選項 */

var *******options = [

['bold', 'italic', 'underline', 'strike'], //開關按鈕

['blockquote', 'code-block'],

[, ], //自定義按鈕值

[, ],

[, ], // 上標/下標

[, ], // 減少縮排/縮排

, // 文字方向

, // 自定義下拉

,[, ], //使用主題的預設下拉,,

['clean'], //移除格式化

['image'],

['video'],

['formula'] //需要載入cdnjs.cloudflare.com/ajax/libs/katex/0.7.1/katex.min.js

];/* 例項化編輯器 */

var quill = new quill('#editor', */

// 或者 ******* :'#editor_header'

*******:*******options //指定編輯器操作條

},theme: 'snow', //主題,有兩種,snow和bubble

placeholder:'請輸入',

readonly: false

});/* 傳入布林值,控制編輯器是否可用 */

quill.enable();

//失去焦點

//獲得焦點

/* 事件的繫結 */

quill.on('text-change', function

(delta, olddelta, source) );

'text-change', handler); //事件的解綁

/* 向編輯器中插值 */

quill.clipboard.dangerouslypastehtml('hello worldnew line

'); //向編輯器中插入html片段

quill.settext('hello!'); //向編輯器中插入文字

/* 獲取編輯器中的值 */

console.log(quill.getcontents());

/* 自定義按鈕 */

var mybtn = document.queryselector("#my_button");

mybtn.addeventlistener("click",function

())

script>

body>

html>

getcontents()獲取的值是以delta來展現的:

3、基於vue的quill-editor

一款免費的文字編輯器Notepad

notepad 是 windows作業系統下的一套文字編輯器 軟體版權許可證 gpl 有完整的中文化介面及支援多國語言編寫的功能 utf8技術 notepad 功能比 windows 中的 notepad 記事本 強大,除了可以用來製作一般的純文字說明檔案,也十分適合編寫電腦程式 notepad 不...

富文字編輯器

關於使用富文字編輯器的一些小坑 官網 1.專案 片 editor fail function xhr,editor,result custominsert function insertimg,result,editor this.editor.create this.editor.txt.html...

富文字編輯器

富文字編輯器,rich text editor,簡稱 rte,它提供類似於 microsoft word 的編輯功能。常用的富文字編輯器 kindeditor ueditor ckeditor 在頁面中新增js 用於初始化kindeditorallowfilemanager 是否允許瀏覽伺服器已上傳...