所见即所得编辑器_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/

所见即所得编辑器