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 是否允許瀏覽伺服器已上傳...