关于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
关于Froala Editor的简单使用的更多相关文章
- springboot 整合 Froala Editor 3
springboot项目中使用 Froala Editor 3,参考官网文档:https://www.froala.com/wysiwyg-editor/docs/overview 下载文件后,引入c ...
- QTAction Editor的简单使用（简洁明了）
1. 打开UI界面,选择如下图的模式 2. 添加资源名称并选择相应的资源,点击OK 3. 相应的资源就建立好了 4. 添加好的资源可以直接拖到MainWindow中
- 百度editor调用【图片上传阿里云】
百度editor调用简单,但是图片和文件上传阿里云就有点难度了.下面我详细说一下. 百度富文本编辑器下载地址:http://ueditor.baidu.com/website/download.htm ...
- 上传图片,语音,和富文本（webuploader,dropzone, froala）
首先是上传图片,使用的百度webuploader 自己修改后可以实例化多个uploader对象: HTML: <!DOCTYPE html> <html xmlns="ht ...
- 使用hexo+github搭建免费个人博客详细教程
[TOC] 本文目录(注意无法点击): 前言 体验更加排版请访问原文链接:http://blog.liuxianan.com/build-blog-website-by-hexo-github.htm ...
- [1]Telerik Extensions for ASP.NET MVC 中文教程（转）
http://demos.telerik.com/aspnet-mvc/ Telerik Extensions for ASP.NET MVC 是Telerik 公司专门针对Asp.net MVC 开 ...
- 可视化HTML编辑器
[荐] 可视化HTML编辑器 CKEditor CKEditor是新一代的FCKeditor,是一个重新开发的版本.CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛 ...
- Ubuntu跬步之图片管理digiKam
Ubuntu下自带了Image Viewer,具备基本的图片浏览功能. 偶尔有些图片需要分组,添加标注,幻灯片浏览等,所以找了款图片管理软件digiKam. 安装 Ubuntu Software Ce ...
- 使用GitHub+hexo搭建个人独立博客
前言 使用github pages服务搭建博客的好处有: 全是静态文件,访问速度快: 免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台: 可以随意绑定自己的域名,不仔细看的话 ...
随机推荐
- TClientDataSet的 fastscript封装
TClientDataSet的 fastscript封装 // 陈新光 2017-2-10// TClientDataSet's fastscript unit fs_ClientDataSet; i ...
- 手动安装windows的磁盘清理工具
All you really need to do is copy some files that are already located on your server into specific s ...
- 【经验之谈】适合学习的IT教程站点列表
① CSDN http://www.csdn.net/ ② gitHub https://github.com/ ③ 极客学院 http://www.jikexueyuan.com/ ...
- DELPHI的BPL使用
了解BPL和DLL的关系将有助于我们更好地理解DELPHI在构件制作.运用和动态.静态编译的工作方式.对初学DELPHI但仍对DELPHI开发不甚清晰的朋友有一定帮助.第一部分:有关包的介绍 一般我们 ...
- 算法——字符串匹配之BM算法
前言 Boyer-Moore算法是一种基于后缀匹配的模式串匹配算法(简称BM算法),后缀匹配就是模式串从右到左開始比較,但模式串的移动依旧是从左到右的.在实践中.BM算法效率高于前面介绍的<KM ...
- NHibernate剖析：Mapping篇之Mapping-By-Code(1):概览
ModelMapper概述 NHibernate3.2版本号集成Mapping-By-Code(代码映射),其设计思想来源于ConfORM.代码总体构思基于"Loquacious" ...
- WMS8_基本操作
建立分拣[收货.出货.领料] 点击仪表盘上的任何一个 All operations 链接切换至分拣 列表视图 点击 creae 按钮,建立一个新的分拣 part ...
- at android.widget.AbsListView$RecycleBin.addScrapView(AbsListView.java:)
错误提示 错误原因 參考链接 错误提示: at android.widget.AbsListView$RecycleBin.addScrapView(AbsListView.java:) 在Andro ...
- AVOS Cloud 技术支持系统开源了
非常高兴跟大家说.工单系统(技术支持系统)开源了.代码托管在了Github上. 假设还未见识过工单系统,请移步于 https://ticket.avosapps.com/ 这个系统是用 AVOS Cl ...
- kubernetes之计算机资源管理
系列目录 当你编排一个pod的时候,你也可以可选地指定每个容器需要多少CPU和多少内存(RAM).当容器请求特定的资源时,调度器可以更好地根据资源请求来确定把pod调度到哪个节点上.当容器请求限制特定 ...