所见即所得编辑器_Froala所见即所得编辑器
所見即所得編輯器
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所見即所得的編輯器 Froala編輯器是一種輕巧的所見即所得的富文本編輯器，具有良好的平面設計。 這是第一個具有圖像調整大小的所見即所得編輯器，即使在移動設備上也可以使用。 編輯器通過默認按鈕涵蓋了許多功能，但有時我們可能需要添加其他行為。 本教程的目標是添加兩個自定義按鈕：一個按鈕，用于清除可編輯區域中的所有HTML，另一個按鈕用于在光標旁邊插入特定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所見即所得編輯器是一個易于包含且易于使用的插件。 它需要jQuery 1.10.2或更高版本以及名為Font Awesome的標志性字體。 因此，以下各行是您在網站上使用此插件所需要的：
<!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:
現在，只需調用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 ‘alwaysVisible’ 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:
此時，我們可以在可編輯區域內編寫和編輯所需的任何內容。 鍵入時或選擇要編輯的文本時，將顯示帶有默認編輯選項的彈出窗口(可通過“ alwaysVisible”選項自定義)。 這稱為內聯編輯。 我們還可以使用基本的編輯器，該編輯器始終將工具欄置于頂部。 為此，只需在初始化編輯器時禁用嵌入式模式：
<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:
通過選擇在編輯器中顯示的按鈕，更改其分組方式甚至創建我們自己的按鈕，可以輕松地自定義按鈕。 這可以通過使用“ customButtons”和“ buttons”選項來完成。 “ customButtons”選項是定義新按鈕的JSON。 按鈕定義應如下所示：
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.
–標題是當您將鼠標移到按鈕上時出現的工具提示。 如果使用的是翻譯，則必須確保將其添加到所用語言的翻譯數組中。
– icon is the icon of the button. It has two properties that need to be set:
–圖標是按鈕的圖標。 它具有兩個需要設置的屬性：
- type can be one of the following options: font (Font Awesome Icon), txt (simple text) or img (image). type可以是以下選項之一：字體(真棒字體圖標)，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是單擊按鈕時將調用的函數。 它將獲得編輯器實例作為參數。
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:
在通過“ customButtons” JSON定義新按鈕之后，我們必須將它們的名稱包含在“按鈕”選項中我們希望放置它們的位置：
<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]
[社交儲物柜]
現場演示
下載Froala編輯器
[/sociallocker]
[/ sociallocker]
翻譯自: https://www.script-tutorials.com/froala-wysiwyg-editor/
所見即所得編輯器
總結
以上是生活随笔為你收集整理的所见即所得编辑器_Froala所见即所得编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： multisim示波器、四踪示波器的使用
- 下一篇： Marvell 88e6131路由器芯