关于Froala Editor的简单使用

1.添加样式表

<!-- 核心样式表 -->
<link rel="stylesheet" href="${ctx}/resources/froala_editor/css/froala_editor.min.css" />
<link rel="stylesheet" href="${ctx}/resources/froala_editor/css/froala_style.min.css" />
<!-- 各个插件样式表，按需求使用 -->
<link rel="stylesheet" href="${ctx}/resources/froala_editor/css/plugins/char_counter.css">
<link rel="stylesheet" href="${ctx}/resources/froala_editor/css/plugins/code_view.css">
<link rel="stylesheet" href="${ctx}/resources/froala_editor/css/plugins/colors.css">
<link rel="stylesheet" href="${ctx}/resources/froala_editor/css/plugins/emoticons.css">
<link rel="stylesheet" href="${ctx}/resources/froala_editor/css/plugins/file.css">
<link rel="stylesheet" href="${ctx}/resources/froala_editor/css/plugins/fullscreen.css">
<link rel="stylesheet" href="${ctx}/resources/froala_editor/css/plugins/image.css">
<link rel="stylesheet" href="${ctx}/resources/froala_editor/css/plugins/image_manager.css">
<link rel="stylesheet" href="${ctx}/resources/froala_editor/css/plugins/line_breaker.css">
<link rel="stylesheet" href="${ctx}/resources/froala_editor/css/plugins/quick_insert.css">
<link rel="stylesheet" href="${ctx}/resources/froala_editor/css/plugins/table.css">
<link rel="stylesheet" href="${ctx}/resources/froala_editor/css/plugins/video.css">
<!-- 主题样式表，可选择使用 -->
<link href="${ctx}/resources/froala_editor/css/themes/dark.min.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/resources/froala_editor/css/themes/red.min.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/resources/froala_editor/css/themes/gray.min.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/resources/froala_editor/css/themes/royal.min.css" rel="stylesheet" type="text/css" />

2.添加各个插件

<!-- 核心脚本 -->
<script type="text/javascript" src="${ctx}/resources/froala_editor/js/froala_editor.min.js"></script>
<!-- 各个插件脚本 -->
<script type="text/javascript" src="${ctx}/resources/froala_editor/js/plugins/align.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/froala_editor/js/plugins/char_counter.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/froala_editor/js/plugins/code_beautifier.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/froala_editor/js/plugins/code_view.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/froala_editor/js/plugins/colors.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/froala_editor/js/plugins/draggable.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/froala_editor/js/plugins/emoticons.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/froala_editor/js/plugins/entities.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/froala_editor/js/plugins/file.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/froala_editor/js/plugins/font_family.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/froala_editor/js/plugins/font_size.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/froala_editor/js/plugins/fullscreen.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/froala_editor/js/plugins/image.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/froala_editor/js/plugins/image_manager.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/froala_editor/js/plugins/inline_style.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/froala_editor/js/plugins/line_breaker.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/froala_editor/js/plugins/link.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/froala_editor/js/plugins/lists.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/froala_editor/js/plugins/paragraph_format.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/froala_editor/js/plugins/paragraph_style.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/froala_editor/js/plugins/quick_insert.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/froala_editor/js/plugins/quote.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/froala_editor/js/plugins/table.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/froala_editor/js/plugins/save.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/froala_editor/js/plugins/url.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/froala_editor/js/plugins/video.min.js"></script>
<!-- 语言脚本 -->
<script type="text/javascript" src="${ctx}/resources/froala_editor/js/languages/zh_cn.js"></script>

3.网页内容

<!-- 此处加载编辑器 -->
<div id=‘edit‘></div><br/>
<!-- 此处用于显示 -->
<pre id="view"></pre>

4.初始化/废弃编辑器

$(‘#edit‘).froalaEditor({});
$(‘#edit‘).froalaEditor(‘destroy‘);

5.我的配置，可用

$(function () {
        $(‘#edit‘).on(‘froalaEditor.initialized‘, function (e, editor) {
            editor.events.bindClick($(‘body‘), ‘#save‘, function () {
                var fs = editor.html.get();
                editor.events.focus();
            });
        }).on(‘froalaEditor.initialized‘, function (e, editor) {
            editor.events.bindClick($(‘body‘), ‘#release‘, function () {
                var fs = editor.html.get();
                $("#msgForm").submit();
                editor.events.focus();
            });
        }).froalaEditor({
            heightMin: 450,
            heightMax: 800,
            placeholderText: ‘‘,
            pastePlain: true,
            theme: ‘gray‘,
            fontFamilySelection: true,
            fontSizeSelection: true,
            paragraphFormatSelection: true,
            toolbarStickyOffset: 53,
            toolbarButtons: [‘fullscreen‘, ‘|‘, ‘insertLink‘, ‘insertImage‘, ‘insertVideo‘, ‘insertFile‘, ‘insertTable‘, ‘|‘, ‘quote‘, ‘insertHR‘, ‘subscript‘, ‘superscript‘, ‘undo‘, ‘redo‘, ‘-‘, ‘bold‘, ‘italic‘, ‘underline‘, ‘strikeThrough‘, ‘|‘, ‘fontFamily‘, ‘|‘, ‘fontSize‘, ‘|‘, ‘color‘, ‘emoticons‘, ‘inlineStyle‘, ‘-‘, ‘paragraphFormat‘, ‘|‘, ‘paragraphStyle‘, ‘align‘, ‘formatOL‘, ‘formatUL‘, ‘outdent‘, ‘indent‘, ‘clearFormatting‘],
            imageAllowedTypes: [‘jpeg‘, ‘jpg‘, ‘png‘, ‘gif‘],
            imageDefaultWidth: 100,
//             imageInsertButtons: [‘imageBack‘, ‘|‘, ‘imageUpload‘, ‘imageByURL‘],
//             imageUploadURL: ‘/upload_image‘,
            imageManagerLoadURL: ‘http://i.froala.com/assets/photo1.jpg‘,
            fileUploadURL: ‘/upload_file‘,
            language: ‘zh_cn‘
        });
    });

6.下面是一些笔记，未整理的内容

正在研究froala_editor2.2.2
<div id=‘edit‘></div>
<br/>
<pre id="eg-previewer" class="prettyprint">
</pre>
$(‘#edit‘).froalaEditor({
heightMin: 100,
heightMax: 200
});
启用在线代码编辑器
<!-- Code Mirror CSS file. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
<!-- Include the plugin CSS file. -->
<link rel="stylesheet" href="../css/plugins/code_view.min.css">
<!-- Code Mirror JS files. -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
<!-- Include the plugin JS file. -->
<script type="text/javascript" src="../js/plugins/code_view.min.js"></script>
初始化/销毁编辑器
$(‘#edit‘).froalaEditor({});
$(‘#edit‘).froalaEditor(‘destroy‘);
获得内容
$(‘div#froala-editor‘).froalaEditor(‘html.get‘);
自定义添加按钮
$(function() {
$.FroalaEditor.DefineIcon(‘insertHTML‘, {NAME: ‘plus‘});
$.FroalaEditor.RegisterCommand(‘insertHTML‘, {
title: ‘Insert HTML‘,
focus: true,
undo: true,
refreshAfterCallback: true,
callback: function () {
this.html.insert(‘Some Custom HTML.‘);
this.undo.saveStep();
this.html.set(‘‘);
this.events.focus();
}
});

$(‘div#froala-editor‘).froalaEditor({
toolbarButtons: [
‘bold‘, ‘italic‘, ‘underline‘, ‘paragraphFormat‘, ‘formatOL‘,
‘formatUL‘, ‘insertHTML‘, ‘undo‘, ‘redo‘, ‘html‘
]
})
});
自定义组合按钮
$.FroalaEditor.DefineIcon(‘my_dropdown‘, {NAME: ‘cog‘});
$.FroalaEditor.RegisterCommand(‘my_dropdown‘, {
title: ‘Advanced options‘,
type: ‘dropdown‘,
focus: false,
undo: false,
refreshAfterCallback: true,
options: {
‘v1‘: ‘Option 1‘,
‘v2‘: ‘Option 2‘
},
callback: function (cmd, val) {
console.log (val);
},
// Callback on refresh.
refresh: function ($btn) {
console.log (‘do refresh‘);
},
// Callback on dropdown show.
refreshOnShow: function ($btn, $dropdown) {
console.log (‘do refresh when show‘);
}
});

$(‘div#froala-editor‘).froalaEditor({
toolbarButtons: [‘bold‘, ‘italic‘, ‘formatBlock‘, ‘my_dropdown‘]
})
});
绑定事件
$(function() {
$(‘div#froala-editor‘)
.on(‘froalaEditor.initialized‘, function (e, editor) {
editor.events.bindClick($(‘body‘), ‘a#get-text‘, function () {
editor.html.set(‘‘);
editor.events.focus();
});
})
.froalaEditor()
});

图片工具按钮
<!-- Include the plugin js file. -->
<script src="../js/plugins/image.min.js"></script>
imageEditButtons:
图片样式工具按钮自定义
<style>
.class1 {
border-radius: 10%;
border: 2px solid #efefef;
}

.class2 {
opacity: 0.5;
}
</style>
$(function() {
$(‘div#froala-editor‘).froalaEditor({
// Define new image styles.
imageStyles: {
class1: ‘Class 1‘,
class2: ‘Class 2‘
},
})
});
文字方向
direction: rtl / ltr
中文
language: "zh_cn"
自定义超链接样式
$(function() {
$(‘div#froala-editor‘).froalaEditor({
// Define new link styles.
linkStyles: {
class1: ‘Class 1‘,
class2: ‘Class 2‘
},
})
});
自定义设置超链接地址
$(function() {
$(‘div#froala-editor‘).froalaEditor({
linkList: [
{
text: ‘Froala‘,
href: ‘https://froala.com‘,
target: ‘_blank‘
},
{
text: ‘Google‘,
href: ‘https://google.com‘,
target: ‘_blank‘
},
{
text: ‘Facebook‘,
href: ‘https://facebook.com‘
}
]
})
});
最大字符数
charCounterMax: 140,
输入框提示
placeholderText: ‘Start typing something...‘
当pasteplain选项启用，froala WYSIWYG HTML编辑器过滤器粘贴的内容并只保留纯文本通过去除所有丰富的格式。
pastePlain: true
弹出编辑
<div id="froala-editor" style="display: inline-block;">
Click here to edit this text in a Froala popup.
</div>
$(function() {
$(‘div#froala-editor‘).froalaEditor({
editInPopup: true
})
});
全工具
toolbarButtons: [‘fullscreen‘, ‘bold‘, ‘italic‘, ‘underline‘, ‘strikeThrough‘, ‘subscript‘, ‘superscript‘, ‘fontFamily‘, ‘fontSize‘, ‘|‘, ‘color‘, ‘emoticons‘, ‘inlineStyle‘, ‘paragraphStyle‘, ‘|‘, ‘paragraphFormat‘, ‘align‘, ‘formatOL‘, ‘formatUL‘, ‘outdent‘, ‘indent‘, ‘-‘, ‘insertLink‘, ‘insertImage‘, ‘insertVideo‘, ‘insertFile‘, ‘insertTable‘, ‘|‘, ‘quote‘, ‘insertHR‘, ‘undo‘, ‘redo‘, ‘clearFormatting‘, ‘selectAll‘, ‘html‘],
使用iframe编辑的内容将被放置在一个iframe和网页的其他部分分离。
iframe: true
点击才初始化编辑器
initOnClick: true
内部编辑器
toolbarInline: true,
编辑器样式
theme: ‘royal‘
编辑器是否跟随
toolbarSticky: false
编辑框移动
toolbarStickyOffset: 100
实时获得html代码显示
$(function() {
$(‘div#froala-editor‘)
.on(‘froalaEditor.contentChanged froalaEditor.initialized‘, function (e, editor) {
$(‘pre#eg-previewer‘).text(editor.codeBeautifier.run(editor.html.get()))
$(‘pre#eg-previewer‘).removeClass(‘prettyprinted‘);
prettyPrint()
})
.froalaEditor()
});
实时获得编辑内容显示
$(function() {
$(‘div#froala-editor‘).froalaEditor()
.on(‘froalaEditor.contentChanged‘, function (e, editor) {
$(‘#preview‘).html(editor.html.get());
})
});
工具条
toolbarButtons:(≥ 1200px) [‘bold‘, ‘italic‘, ‘underline‘, ‘insertLink‘, ‘undo‘, ‘redo‘],
toolbarButtonsMD:(≥ 992px)
toolbarButtonsSM:(≥ 768px)
toolbarButtonsXS:(< 768px)
右下角计数器
charCounterCount: false,

toolbarVisibleWithoutSelection: true
可用插件
pluginsEnabled: [‘image‘, ‘link‘, ‘draggable‘],
回车键是div还是br
enter: $.FroalaEditor.ENTER_DIV
enter: $.FroalaEditor.ENTER_BR
快捷键可用
shortcutsEnabled: [‘bold‘, ‘italic‘]
设置tab按钮空格数目
tabSpaces: 4

其他一个按钮的编辑
<button id="edit" class="r-btn highlight text-small">Button</button>
$(function() {
$(‘button#edit‘).froalaEditor()
.on(‘froala.editor.contentChanged‘, function () {
console.log (‘content changed‘);
})
});
div
textarea

时间： 2024-10-03 21:53:32

关于Froala Editor的简单使用的相关文章

QTAction Editor的简单使用（简洁明了）

1. 打开UI界面,选择如下图的模式 2. 添加资源名称并选择相应的资源,点击OK 3. 相应的资源就建立好了 4. 添加好的资源可以直接拖到MainWindow中 原文地址:https://www.cnblogs.com/fanhua666/p/12080579.html

可视化HTML编辑器

[荐] 可视化HTML编辑器 CKEditor CKEditor是新一代的FCKeditor,是一个重新开发的版本.CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站. 可配合使用的扩展有 文件管理器KCFinder 在线演示:h...更多CKEditor信息 最新新闻: CKEditor 4.5.6 发布,可视化 HTML 编辑器 2015年12月10日 [荐] 可视化HTML编辑器 KindEditor KindEditor 是一套开源的在

zabbix配置及邮件短信报警

Zabbix邮件报警的大致流程如下: 监控主机---->监控项---->触发器---->告警动作---->告警方式---->告警用户 首先添加监控项 1.添加受监控项的主机 组态---主机---右上角"创建主机" 弹出主机创建页面 上图填完后先不要点存档,而是点击左上角的模板,选择要使用的模板(可选择多个模板,一个模板中包含一个或多个监控项目),也可以在"模板"选项中创建一个新的模板,选择完模板后点添加,再点 存档 在主机列表中点击被监

第十四，十五周微职位

1.搭建一套自动以运维工具Cobbler系统: 一.PXE 简述及介绍 预启动执行环境(Preboot eXecution Environment,PXE,也被称为预执行环境)是让计算机通过网卡独立地使用数据设备(如硬盘)或者安装操作系统.PXE当初是作为Intel的有线管理体系的一部分,Intel和 Systemsoft于1999年9月20日公布其规格(版本2.1).通过使用像网际协议(IP).用户数据报协议(UDP).动态主机设定协定(DHCP).小型文件传输协议(TFTP)等几种网络协议和

[Zabbix] 如何实现邮件报警通知以及免费短信报警通知

 前提条件: (1) zabbix服务器端已经成功安装并且运行. (2) zabbix客户端已经成功建立并且运行. 1 下载并且安装msmtp软件 Wget http://sourceforge.net/projects/msmtp/files/msmtp/1.4.32/msmtp-1.4.32.tar.bz2/download   tar jxvf msmtp-1.4.32.tar.bz2 cd msmtp-1.4.32 ./configure--prefix=/usr/local/msmtp

Java Swing JTable API

利用 JTable 类,可以以表格的形式展示数据,可设置允许用户编辑数据.JTable 本身不拥有或者缓存数据:它只是数据的视图.这里有一个放在滚动面板上的典型表格: 本文展示如何完成一些常见的表格相关的任务:包括以下部分: (1)创建一个简单的表格 (2)向容器添加表格 (3)改变每每一栏的宽度 (4)用户选择 (5)创建表格模型 (6)监听数据改变 (7)点燃数据改变事件 (8)概念:编辑器和渲染器 (9)使用自定义渲染器 (10)为单元格指定提示工具 (11)为列头指定提示工具 (12)排

在JTable单元格上 加入组件,并赋予可编辑能力 [转]

表格(单元格放置组件) 对于JTable单元格的渲染主要是通过两个接口来实现的,一个是TableCellRenderer另一个是TableCellEditor,JTable默认是用的是DefaultCellRenderer和DefaultCellEditor,这两个都是在类似JTextfield的一个JComponent的基础上来实现的,如果我们需要在JTable的单元格内放置特殊的控件或者绘制出特殊的效果,就要实现TableCellRenderer和TableCellEditor接口,在其上绘

使用Ribbon Workbench来修改停用、激活按钮的权限

在实施的过程中,有时会遇到客户为了管控使用人员的操作或防止使用人员通过停用后再激活来绕开部分逻辑,需要对激活.停用按钮赋予单独的权限.但很遗憾,在Dyanmics CRM中,并没有把停用.激活按钮单独做为一项权限来进行配置,基本上,只有拥有写的权限,就可以随意激活或者停用一条记录.因此,可以考虑通过修改Ribbon按钮的Display Rule或者Enable Rule来变相地实现权限的控制. 修改Ribbon可以通过导出解决方案再编辑XML的方式,但这种方式操作繁琐且容易出错导致Ribbon无

[Zabbix] 怎样实现邮件报警通知以及免费短信报警通知

 前提条件: (1) zabbixserver端已经安装成功而且执行. (2) zabbixclient已经成功建立而且执行. 1 下载而且安装msmtp软件 Wget http://sourceforge.net/projects/msmtp/files/msmtp/1.4.32/msmtp-1.4.32.tar.bz2/download   tar jxvf msmtp-1.4.32.tar.bz2 cd msmtp-1.4.32 ./configure--prefix=/usr/local