关于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服务搭建博客的好处有: 全是静态文件,访问速度快: 免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台: 可以随意绑定自己的域名,不仔细看的话 ...
随机推荐
- 使用python一步一步搭建微信公众平台
https://my.oschina.net/yangyanxing/blog/159215 http://www.ziqiangxuetang.com/django/python-django-we ...
- java高级编程－使用反射强制给private字段赋值
转自:http://blog.csdn.net/yaerfeng/article/details/7103397 今天项目中遇到了一个问题,要调用一个类,并获取这个类的属性进行赋值然后将这个类传递到方 ...
- 深入Android渲染机制
1.知识储备 CPU: 中央处理器,它集成了运算,缓冲,控制等单元,包括绘图功能.CPU将对象处理为多维图形,纹理(Bitmaps.Drawables等都是一起打包到统一的纹理). GPU:一个类似于 ...
- 关于SharePoint 讨论板的一些知识
关于SharePoint 讨论板的一些知识 近期公司项目可能要用到讨论板.需求是这种: 怎样在回复中仅仅让查看登陆者和讨论主题公布者的信息. 比方我公布 ...
- RecyclerView onItemClick button和布局都有单击事件时的处理方式
RecyclerView为了给开发人员提供更大的自由度.没有默认的提供onItemClick接口. 网上有一种比較简单的实现方式 , 适用于不须要针对item里面某个button做特殊处理的情况 我眼 ...
- yarn 基本用法
1.初始化一个新的项目 yarn init 2.添加一个依赖包 yarn add [package] yarn add [package]@[version] yarn add [package]@[ ...
- SpringMVC：走通一个SpringMVC
我们现在使用SpringMVC来做一个小的用户管理系统,由于重点在学习SpringMVC,这里我们就不用数据库了. 该小系统实现的功能是:1.登录,不做用户名密码的正确性判断,任何用户名+密码都可以成 ...
- MapReduce框架在Yarn上的具体解释
MapReduce任务解析 在YARN上一个MapReduce任务叫做一个Job. 一个Job的主程序在MapReduce框架上实现的应用名称叫MRAppMaster. MapReduce任务的Tim ...
- NYOJ 905 卡片游戏
卡片游戏 时间限制:1000 ms | 内存限制:65535 KB 难度:1 描写叙述 小明近期宅在家里无聊.于是他发明了一种有趣的游戏.游戏道具是N张叠在一起的卡片,每张卡片上都有一个数字,数字 ...
- C++ 中的几种初始化
前言 阅读C++教材时,想必你听过复制初始化,直接初始化,值初始化这三个概念吧.笔者本人常将其混淆,遂在此记录下它们的具体含义以便日后查阅. 复制初始化( copy-initialization ) ...