关于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服务搭建博客的好处有: 全是静态文件,访问速度快: 免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台: 可以随意绑定自己的域名,不仔细看的话 ...
随机推荐
- javascript 函数初探 (六)--- 闭包初探#2
首先,我们需要声明一个全局函数的占位符.尽管这种占位符不是必须的,但最好还是声明一下,然后我们重新将函数F()定义一下: var inner; var F = fucntion(){ var b = ...
- ubuntu允许mysql远程连接
ubuntu允许mysql远程连接 第一步: vim /etc/MySQL/my.cnf找到bind-address = 127.0.0.1 注释掉这行,如:#bind-address = 127.0 ...
- TIdHTTPServer制作REST中间件
TIdHTTPServer制作REST中间件 使用DELPHI7+INDY9开发 // 陈新光 2017-2-21// LIS数据同步服务器// 浏览器输入:http://127.0.0.1:8000 ...
- android中如何发送一个广播
1.首先要声明广播 private BroadcastReceiver mBroadcastReceiver = new BroadcastReceiver() { @Override public ...
- sql的一些知识_高级
1.视图 http://www.cnblogs.com/wang666/p/7885934.html 2.存储过程 http://www.cnblogs.com/wang666/p/7920748.h ...
- 使用canvas 的api 实现 图片的显示 及 压缩
在移动端压缩图片并且上传主要用到filereader.canvas 以及 formdata 这三个h5的api.逻辑并不难.整个过程就是: (1)用户使用input file上传图片的时候,用file ...
- [LeetCode][Java] Best Time to Buy and Sell Stock IV
题目: Say you have an array for which the ith element is the price of a given stock on day i. Design a ...
- mysql 找出外键等约束
找出employee表的所有外键约束 select TABLE_NAME,COLUMN_NAME,CONSTRAINT_NAME, REFERENCED_TABLE_NAME,REFERENCED_C ...
- AOSP ON MAKO(在NEXUS 4上刷ANDROID 4.4 源代码包-下载/配置/编译/刷机)
AOSP ON MAKO(在NEXUS 4上刷ANDROID 4.4 源代码包-下载/配置/编译/刷机) 特别感谢google官方文档及AOSP源代码开放 參考链接: https://source.a ...
- shell-判断循环
shell条件测试 test 每个完整的合理的编程语言都具有条件判断的功能. bash可以使用test命令,[]和()操作,还有if/then结构 字符串判断 -n string 判断字符串长度非零 ...