Froala 编辑器插件

17 Mar 2025 | 4 分钟阅读

在本文中，我们将了解如何使用 jQuery 的 Froala 编辑器插件。 Froala Editor 是有史以来最强大的 JavaScript 富文本编辑器之一。它也被称为 WYSIWYG HTML 编辑器。

以下是使用 jQuery 的 Froala 编辑器插件的各种示例。

示例 1

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of Froala editor plugin using jquery </title>  
        <meta name = "description"  
            content = "jQuery tooltip plugin" />  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<link href = "https: //cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel = "stylesheet" type = "text/css" />
<link href = "https: //cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/froala_editor.min.css" rel = "stylesheet" type = "text/css" />
<link href = "https: //cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/froala_style.min.css" rel = "stylesheet" type = "text/css" />
  <link rel = "stylesheet" type = "text/css"  href =" https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css">
  <link rel = "stylesheet" type = "text/css" href = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/char_counter.css">
  <link rel = "stylesheet" type = "text/css" href = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/code_view.min.css">
  <link rel = "stylesheet" type = "text/css" href = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/colors.min.css">
  <link rel = "stylesheet" type = "text/css"  href = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/emoticons.min.css">
  <link rel = "stylesheet" type = "text/css" href = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/file.min.css">
  <link rel = "stylesheet" type = "text/css" href = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/fullscreen.min.css">
  <link rel = "stylesheet" type = "text/css" href = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/image.min.css">
  <link rel = "stylesheet" type = "text/css" href = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/image_manager.min.css">
  <link rel = "stylesheet" type = "text/css" href = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/line_breaker.min.css">
  <link rel = "stylesheet" type = "text/css" href = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/quick_insert.min.css">
  <link rel = "stylesheet" type = "text/css" href = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/table.min.css">
  <link rel = "stylesheet" type = "text/css" href = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/video.min.css">
  <link rel = "stylesheet" type = "text/css"  href = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/special_characters.min.css">
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/froala_editor.min.js"> </script>
<script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"> </script>
  <script type = "text/javascript" src = https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"> </script>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/align.min.js"> </script>
<script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/char_counter.min.js"> </script>
  <script type = "text/javascript" src = 
?https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/code_beautifier.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/code_view.min.js"> </script>
<script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/colors.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/draggable.min.js"> </script>
<script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/emoticons.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/entities.min.js"> </script>
<script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/file.min.js"> </script>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/font_family.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/font_size.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/fullscreen.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/image.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/image_manager.min.js">  </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/inline_style.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/line_breaker.min.js"> </script>
<script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/link.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/lists.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/paragraph_format.min.js"> </script>
<script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/paragraph_style.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/quick_insert.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/quote.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/table.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/save.min.js"> </script>
<script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/url.min.js"> </script>
  <script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/video.min.js"> </script>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/special_characters.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/print.min.js"> </script>
</head>
<style>
#froala-editor {
  min-height: 200px;
  margin: 0px 8px 20px 40px;
  border: 1px solid #ccc;
}
h2 {  
  margin-top: 40px;  
  text-transform: none;  
  font-size: 1.75em;  
  font-weight: bold;  
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;  
  color: #999;   
  letter-spacing: -0.005em;   
  word-spacing: 1px;  
  letter-spacing: none;  
  text-align: center;  
}  
html {  
text-align: center;  
  height: 100%;  
  background: #2c3e50;  
  font-family: "Montserrat", sans-serif;  
  font-size: 16px;  
}  
body {  
  justify-content: space-around;  
  align-items: centre;  
  align-content: center;  
text-align: center;  
  height: 100%;  
  background: #2c3e50;  
  font-family: "Montserrat", sans-serif;  
  font-size: 16px;  
}  
h1 {  
  margin-top: 40px;  
  text-transform: none;  
  font-size: 1.75em;  
  font-weight: bold;  
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;  
  color: #999;   
  letter-spacing: -0.005em;   
  word-spacing: 1px;  
  letter-spacing: none;  
  text-align: center;  
}
</style>
<body>
  <h2> Example </h2>
  <h1> Jquery Froala Editor </h1>
  <div id = "froala-editor"> </div>
$(function() {
  $('div#froala-editor').froalaEditor({
    toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', '|', 'color', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', '-', 'insertLink', 'insertImage', 'insertVideo', 'insertFile', 'insertTable', 'specialCharacters', 'emoticons', '|', 'quote', 'insertHR', 'undo', 'redo', 'clearFormatting', 'selectAll', 'print', 'html', 'fullscreen'],
    pluginsEnabled: null
  })
});
</script>
</body>
</html>

说明

在上面的例子中，我们创建了一个 froala 编辑器的例子。这个编辑器具有所有功能，如粗体、斜体、段落样式等。

输出

以下是这个例子的输出。

下一个主题使用 jQuery 的仪表图表插件

← 上一个下一个 →

Froala 编辑器插件

示例 1

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

Froala 编辑器插件

示例 1

相关帖子

如何使用 jQuery 将 HTML 表格转换为 Excel 电子表格

使用 JQuery Ajax 的动态拖放表行

Skype 聊天 jQuery 插件

jQuery 翻页

使用 jQuery 的前后滑块

使用 jQuery 上传带有进度条的图像

使用 moment JS 更改 jquery 中的日期格式

在悬停时创建菜单项动画

水平可滚动时间线插件 - jTimeline

JQuery 日历

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器