一、加載必要資源
<link rel="stylesheet"> <!-- 必要資源 -->
<link rel="stylesheet"> <!-- 編輯器主題 -->
<script src="https://cdn.bootcss.com/froala-editor/3.1.0/js/froala_editor.pkgd.min.js"></script> <!-- 必要資源 -->
<script src="https://cdn.bootcss.com/froala-editor/3.0.6/js/languages/zh_cn.js"></script> <!-- 中文轉(zhuǎn)換腳本 -->
關(guān)于引入必要資源的幾點(diǎn)說明：
- Froala可以引入全功能代碼，也可以根據(jù)自己的需求分插件引入
- 以 .pkgd 結(jié)尾的文件就是全功能代碼
- 如果需要某幾個插件功能，可以先分別引入沒有帶 .pkgd 的js和css文件，再根據(jù)需要的功能另行引入其它插件文件
- Froala的CDN資源地址
二、創(chuàng)建HTML結(jié)構(gòu)
<div id="froala-editor">
<p>The buttons below will destroy and init the rich text editor again.</p>
</div>
三、編輯器創(chuàng)建
const editor = new FroalaEditor('#froala-editor');
四、參數(shù)
new FroalaEditor('#froala-editor', {
toolbarButtons: ['bold', 'italic'],
language: 'zh_cn'
});
1. 自定義工具欄
屬性：
toolbarButtons: 屏幕尺寸 >= 1200px 時使用的工具欄組
toolbarButtonsMD: >= 992px時使用
toolbarButtonsSM: >= 768px時使用
toolbarButtonsXS: < 768px時使用
取值：bold: 粗體、italic: 斜體、underline: 下劃線、strikeThrough: 刪除線、 fontFamily: 字體、fontSize: 字號、 paragraphFormat: 段落格式、 align: 字體對齊、textColor: 字體顏色、 backgroundColor: 背景顏色、formatOL: 有序列表、 formatUL: 無序列表、 indent: 縮進(jìn)、 outdent: 減少縮進(jìn)、emoticons: 表情符號、redo: 恢復(fù)、undo: 撤銷、insertImage: 插入圖片、 insertLink: 插入鏈接、 insertFile: 插入文件、 insertVideo: 插入視頻、subscript: 下標(biāo)、superscript: 上標(biāo)、 html: 查看html結(jié)構(gòu)、fullscreen: 全屏、 selectAll: 全選、 insertHR: 插入水平線、 insertTable: 插入表格
2. 中文
language: 'zh_cn' (前提是你已經(jīng)引入過JS腳本)
3. 圖片默認(rèn)寬度
imageDefaultWidth: 300
4. 事件
events: {
focus() {console.log('聚焦')},
blur() {console.log('失焦')},
contentChanged() {console.log('內(nèi)容改變，有一段延遲時間')},
'image.removed': function(img) {console.log('圖片刪除', img)},
'image.beforeUpload': function(files) {console.log('上傳的圖片: ', files[0])},
initialized() {console.log('編輯器初始化')},
destroy() {console.log('編輯器銷毀')},
'link.beforeInsert'() {console.log('鏈接插入前')},
contentChanged() {console.log('編輯器內(nèi)容變化')}
}
5. 鏈接樣式選項(xiàng)
linkStyles: {
class1: 'Class 1',
class2: 'Class 2',
a: 'b'
}
前面的屬性：體現(xiàn)在HTML結(jié)構(gòu)上的類名
后面的值：體現(xiàn)在編輯器中的選項(xiàng)
6. 鏈接預(yù)設(shè)
linkList: [
{
text: '鏈接錨文本',
href: '鏈接地址',
target: '_blank' // 新標(biāo)簽頁中打開
}
]
6. 回車鍵轉(zhuǎn)換HTML標(biāo)簽
屬性: enter
取值:
FroalaEditor.ENTER_DIV: 轉(zhuǎn)換為div標(biāo)簽
FroalaEditor.ENTER_P: 轉(zhuǎn)換為p標(biāo)簽
FroalaEditor.ENTER_BR: 轉(zhuǎn)換為br標(biāo)簽
7. 行內(nèi)工具欄
toolbarInline: true
8. 定位的z-index
zIndex: 10
9. 自定義顏色
colorsBackground: 背景顏色數(shù)組
colorsText: 字體顏色數(shù)組
colorsStep: 每行顯示幾個顏色塊
10. 編輯器寬度、高度設(shè)定
width: 500
height: 1000
heightMax: 最大高度
heightMin: 最小高度
11. 自定義選區(qū)行內(nèi)樣式選項(xiàng)
toolbarButtons: ['inlineStyle'], // 在工具欄中使用自定義樣式按鈕:
inlineStyles: { // 定義樣式選項(xiàng):
'Big Red': 'font-size: 20px; color: red;',
'Small Blue': 'font-size: 14px; color: blue;'
}
12. 自定義整行類名選項(xiàng)
toolbarButtons: ['paragraphStyle'], // 在工具欄中使用自定義整行樣式按鈕
paragraphStyles: { // 定義類名選項(xiàng)
class1: 'Class 1',
class2: 'Class 2'
}
13. 空白占位符
placeholderText: '這是編輯器空白占位文字'
14. 改變主題皮膚
theme: 'dark' 或 'gray' 或 'royal'(默認(rèn))
15. 定義一個Tab代表幾個空格
tabSpaces: 4
16. 自定義按鈕組
toolbarButtons: {
moreText: {
buttons: ['bold', 'italic', 'underline', 'strikeThrough', 'textColor'], // 按鈕組
align: 'left', // 按鈕組在工具欄上的位置(left、right)
buttonsVisible: 2 // 在工具欄主頁面中顯示前兩個，其余通過點(diǎn)擊更多按鈕查看
},
moreParagraph: {},
moreRich: {},
moreMisc: {}
}
- 自定義更多文字按鈕組: moreText
- 自定義更多段落按鈕組: moreText
- 自定義更多功能按鈕組: moreRich
- 自定義更多輔助按鈕組: moreMisc
17. 自定義字體
fontFamily: {
'宋體': '宋體',
'楷體': '楷體',
''
}
前面的鍵表示在CSS中引入的字體
后面的值表示在編輯器中顯示的字體列表項(xiàng)
18. 選中字體格式展示
顯示字體：fontFamilySelection: true
顯示文字大?。篺ontSizeSelection: true
顯示段落格式：paragraphFormatSelection: true
19. 保留刪除時的格式
keepFormatOnDelete: true
五、API接口
獲取html結(jié)構(gòu): editor.html.get()
設(shè)置編輯器內(nèi)容: editor.html.set()
往編輯器里插入內(nèi)容: editor.html.insert();
編輯器聚焦: editor.events.focus()
編輯器銷毀: editor.destroy()
html代碼結(jié)構(gòu)美化: editor.codeBeautifier.run(editor.html.get())
觸發(fā)編輯器命令(可以用這個接口來設(shè)置快捷鍵): editor.commands.exec('命令')
