所见即所得编辑器_Froala所见即所得编辑器
所見(jiàn)即所得編輯器
Froala WYSIWYG Editor Froala Editor is a lightweight WYSIWYG rich text editor with a nice flat design. It is the first WYSIWYG editor with image resize that works even on mobile devices. The editor covers a lot of functionalities through the default buttons, but we may sometimes need to add in another behaviour. The goal of this tutorial is to add two custom buttons: a button to clear all the HTML in the editable area and one to insert a specific HTML next to the cursor.
Froala所見(jiàn)即所得的編輯器 Froala編輯器是一種輕巧的所見(jiàn)即所得的富文本編輯器，具有良好的平面設(shè)計(jì)。 這是第一個(gè)具有圖像調(diào)整大小的所見(jiàn)即所得編輯器，即使在移動(dòng)設(shè)備上也可以使用。 編輯器通過(guò)默認(rèn)按鈕涵蓋了許多功能，但有時(shí)我們可能需要添加其他行為。 本教程的目標(biāo)是添加兩個(gè)自定義按鈕：一個(gè)按鈕，用于清除可編輯區(qū)域中的所有HTML，另一個(gè)按鈕用于在光標(biāo)旁邊插入特定HTML。
Froala WYSIWYG Editor is an easy to include and easy to use plugin. It requires jQuery 1.10.2 or higher and the iconic font named Font Awesome. So the following lines are all you need in order to use this plugin on your website:
Froala所見(jiàn)即所得編輯器是一個(gè)易于包含且易于使用的插件。 它需要jQuery 1.10.2或更高版本以及名為Font Awesome的標(biāo)志性字體。 因此，以下各行是您在網(wǎng)站上使用此插件所需要的：
<!DOCTYPE html> <html><head><link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css"<script src="http://code.jquery.com/jquery-1.10.2.js"></script><link href="../css/froala editor.min.css" rel="stylesheet" type="text/css"><script src="../js/froala editor.min.js"></script></head><body><!-- To add the editor on your website all you need is a line of HTML --><div id=”edit”></div></body> </html> <!DOCTYPE html> <html><head><link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css"<script src="http://code.jquery.com/jquery-1.10.2.js"></script><link href="../css/froala editor.min.css" rel="stylesheet" type="text/css"><script src="../js/froala editor.min.js"></script></head><body><!-- To add the editor on your website all you need is a line of HTML --><div id=”edit”></div></body> </html>Now just call the editable method and the editor will be initialized:
現(xiàn)在，只需調(diào)用editable方法，即可初始化編輯器：
<script>$(function() {$('#edit').editable()}); </script> <script>$(function() {$('#edit').editable()}); </script>At this point we can write and edit anything we want inside the editable area. A popup with the default editing options will appear as you type or when you select the text you want to edit (customizable through ‘a(chǎn)lwaysVisible’ option). This is called inline editing. We can also use a basic editor that always keeps a toolbar at the top. To do this just disable inline mode when you initialize the editor:
此時(shí)，我們可以在可編輯區(qū)域內(nèi)編寫和編輯所需的任何內(nèi)容。 鍵入時(shí)或選擇要編輯的文本時(shí)，將顯示帶有默認(rèn)編輯選項(xiàng)的彈出窗口(可通過(guò)“ alwaysVisible”選項(xiàng)自定義)。 這稱為內(nèi)聯(lián)編輯。 我們還可以使用基本的編輯器，該編輯器始終將工具欄置于頂部。 為此，只需在初始化編輯器時(shí)禁用嵌入式模式：
<script>$(function() {$('#edit').editable({inlineMode: false})}); </script> <script>$(function() {$('#edit').editable({inlineMode: false})}); </script>The buttons can be easily customized by choosing which of them appear in the editor, changing the way they are grouped or even create our own buttons. This can be done by using the ‘customButtons’ and ‘buttons’ options. The ‘customButtons’ option is a JSON that defines the new buttons. This is how a button definition should look like:
通過(guò)選擇在編輯器中顯示的按鈕，更改其分組方式甚至創(chuàng)建我們自己的按鈕，可以輕松地自定義按鈕。 這可以通過(guò)使用“ customButtons”和“ buttons”選項(xiàng)來(lái)完成。 “ customButtons”選項(xiàng)是定義新按鈕的JSON。 按鈕定義應(yīng)如下所示：
buttonName: {title: 'Title',icon: {type: 'icon-type',value: 'icon-value'},callback: function (editor) {} } buttonName: {title: 'Title',icon: {type: 'icon-type',value: 'icon-value'},callback: function (editor) {} }– title is the tooltip that appears when you go with mouse over a button. If you are using a translation, you have to make sure that you add it to the translation array of the language you are using.
–標(biāo)題是當(dāng)您將鼠標(biāo)移到按鈕上時(shí)出現(xiàn)的工具提示。 如果使用的是翻譯，則必須確保將其添加到所用語(yǔ)言的翻譯數(shù)組中。
– icon is the icon of the button. It has two properties that need to be set:
–圖標(biāo)是按鈕的圖標(biāo)。 它具有兩個(gè)需要設(shè)置的屬性：
- type can be one of the following options: font (Font Awesome Icon), txt (simple text) or img (image). type可以是以下選項(xiàng)之一：字體(真棒字體圖標(biāo))，txt(純文本)或img(圖像)。
- value has to be a Font Awesome class for font (fa fa-*), a character for txt or an URL to for img. 值必須是用于Font(fa fa- *)的Font Awesome類，用于txt的字符或用于img的URL。
– callback is the function that will be called when the button is hit. It will get the editor instance as argument.
– callback是單擊按鈕時(shí)將調(diào)用的函數(shù)。 它將獲得編輯器實(shí)例作為參數(shù)。
After we define the new buttons through the ‘customButtons’ JSON, we have to include their name in the ‘buttons’ option in the position where we want them to be placed:
在通過(guò)“ customButtons” JSON定義新按鈕之后，我們必須將它們的名稱包含在“按鈕”選項(xiàng)中我們希望放置它們的位置：
<script>$(function() {$('#edit').editable({// Define custom buttons.customButtons: {// Clear HTML button with text icon.clear: {title: 'Clear HTML',icon: {type: 'font',value: 'fa fa-times'},callback: function (editor){editor.setHTML('');}},// Insert HTML button.insertHTML: {title: 'Insert HTML',icon: {type: 'txt',value: '+'},callback: function (editor){// Focus on editor if it's not.if (!editor.selectionInEditor()) {editor.$element.focus();}// Insert HTML.editor.insertHTML('My new HTML');// Save HTML in undo stack.editor.saveUndoStep();}}},// Set what buttons to display with separator between them. Also include the name// of the buttons defined above in 'customButtons'.buttons: ['undo', 'redo' , 'bold', 'sep', 'clear', 'insertHTML']})}); </script> <script>$(function() {$('#edit').editable({// Define custom buttons.customButtons: {// Clear HTML button with text icon.clear: {title: 'Clear HTML',icon: {type: 'font',value: 'fa fa-times'},callback: function (editor){editor.setHTML('');}},// Insert HTML button.insertHTML: {title: 'Insert HTML',icon: {type: 'txt',value: '+'},callback: function (editor){// Focus on editor if it's not.if (!editor.selectionInEditor()) {editor.$element.focus();}// Insert HTML.editor.insertHTML('My new HTML');// Save HTML in undo stack.editor.saveUndoStep();}}},// Set what buttons to display with separator between them. Also include the name// of the buttons defined above in 'customButtons'.buttons: ['undo', 'redo' , 'bold', 'sep', 'clear', 'insertHTML']})}); </script>[sociallocker]
[社交儲(chǔ)物柜]
現(xiàn)場(chǎng)演示
下載Froala編輯器
[/sociallocker]
[/ sociallocker]
翻譯自: https://www.script-tutorials.com/froala-wysiwyg-editor/
所見(jiàn)即所得編輯器
總結(jié)
以上是生活随笔為你收集整理的所见即所得编辑器_Froala所见即所得编辑器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： multisim示波器、四踪示波器的使用
- 下一篇： Marvell 88e6131路由器芯