关于Froala Editor的简单使用
1.添加样式表
<!--核心样式表--> <linkrel="stylesheet"href="${ctx}/resources/froala_editor/css/froala_editor.min.css" /> <linkrel="stylesheet"href="${ctx}/resources/froala_editor/css/froala_style.min.css" /> <!--各个插件样式表,按需求使用--> <linkrel="stylesheet"href="${ctx}/resources/froala_editor/css/plugins/char_counter.css"> <linkrel="stylesheet"href="${ctx}/resources/froala_editor/css/plugins/code_view.css"> <linkrel="stylesheet"href="${ctx}/resources/froala_editor/css/plugins/colors.css"> <linkrel="stylesheet"href="${ctx}/resources/froala_editor/css/plugins/emoticons.css"> <linkrel="stylesheet"href="${ctx}/resources/froala_editor/css/plugins/file.css"> <linkrel="stylesheet"href="${ctx}/resources/froala_editor/css/plugins/fullscreen.css"> <linkrel="stylesheet"href="${ctx}/resources/froala_editor/css/plugins/image.css"> <linkrel="stylesheet"href="${ctx}/resources/froala_editor/css/plugins/image_manager.css"> <linkrel="stylesheet"href="${ctx}/resources/froala_editor/css/plugins/line_breaker.css"> <linkrel="stylesheet"href="${ctx}/resources/froala_editor/css/plugins/quick_insert.css"> <linkrel="stylesheet"href="${ctx}/resources/froala_editor/css/plugins/table.css"> <linkrel="stylesheet"href="${ctx}/resources/froala_editor/css/plugins/video.css"> <!--主题样式表,可选择使用--> <linkhref="${ctx}/resources/froala_editor/css/themes/dark.min.css"rel="stylesheet"type="text/css" /> <linkhref="${ctx}/resources/froala_editor/css/themes/red.min.css"rel="stylesheet"type="text/css" /> <linkhref="${ctx}/resources/froala_editor/css/themes/gray.min.css"rel="stylesheet"type="text/css" /> <linkhref="${ctx}/resources/froala_editor/css/themes/royal.min.css"rel="stylesheet"type="text/css" />
2.添加各个插件
<!--核心脚本--> <scripttype="text/javascript"src="${ctx}/resources/froala_editor/js/froala_editor.min.js"></script> <!--各个插件脚本--> <scripttype="text/javascript"src="${ctx}/resources/froala_editor/js/plugins/align.min.js"></script> <scripttype="text/javascript"src="${ctx}/resources/froala_editor/js/plugins/char_counter.min.js"></script> <scripttype="text/javascript"src="${ctx}/resources/froala_editor/js/plugins/code_beautifier.min.js"></script> <scripttype="text/javascript"src="${ctx}/resources/froala_editor/js/plugins/code_view.min.js"></script> <scripttype="text/javascript"src="${ctx}/resources/froala_editor/js/plugins/colors.min.js"></script> <scripttype="text/javascript"src="${ctx}/resources/froala_editor/js/plugins/draggable.min.js"></script> <scripttype="text/javascript"src="${ctx}/resources/froala_editor/js/plugins/emoticons.min.js"></script> <scripttype="text/javascript"src="${ctx}/resources/froala_editor/js/plugins/entities.min.js"></script> <scripttype="text/javascript"src="${ctx}/resources/froala_editor/js/plugins/file.min.js"></script> <scripttype="text/javascript"src="${ctx}/resources/froala_editor/js/plugins/font_family.min.js"></script> <scripttype="text/javascript"src="${ctx}/resources/froala_editor/js/plugins/font_size.min.js"></script> <scripttype="text/javascript"src="${ctx}/resources/froala_editor/js/plugins/fullscreen.min.js"></script> <scripttype="text/javascript"src="${ctx}/resources/froala_editor/js/plugins/image.min.js"></script> <scripttype="text/javascript"src="${ctx}/resources/froala_editor/js/plugins/image_manager.min.js"></script> <scripttype="text/javascript"src="${ctx}/resources/froala_editor/js/plugins/inline_style.min.js"></script> <scripttype="text/javascript"src="${ctx}/resources/froala_editor/js/plugins/line_breaker.min.js"></script> <scripttype="text/javascript"src="${ctx}/resources/froala_editor/js/plugins/link.min.js"></script> <scripttype="text/javascript"src="${ctx}/resources/froala_editor/js/plugins/lists.min.js"></script> <scripttype="text/javascript"src="${ctx}/resources/froala_editor/js/plugins/paragraph_format.min.js"></script> <scripttype="text/javascript"src="${ctx}/resources/froala_editor/js/plugins/paragraph_style.min.js"></script> <scripttype="text/javascript"src="${ctx}/resources/froala_editor/js/plugins/quick_insert.min.js"></script> <scripttype="text/javascript"src="${ctx}/resources/froala_editor/js/plugins/quote.min.js"></script> <scripttype="text/javascript"src="${ctx}/resources/froala_editor/js/plugins/table.min.js"></script> <scripttype="text/javascript"src="${ctx}/resources/froala_editor/js/plugins/save.min.js"></script> <scripttype="text/javascript"src="${ctx}/resources/froala_editor/js/plugins/url.min.js"></script> <scripttype="text/javascript"src="${ctx}/resources/froala_editor/js/plugins/video.min.js"></script> <!--语言脚本--> <scripttype="text/javascript"src="${ctx}/resources/froala_editor/js/languages/zh_cn.js"></script>
3.网页内容
<!--此处加载编辑器--> <divid='edit'></div><br/> <!--此处用于显示--> <preid="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
转载于:https://www.cnblogs.com/loveflycforever/p/5350453.html
关于Froala Editor的简单使用相关推荐
- JavaScript 所见所得文本编辑器 Froala Editor 4.0.17Crack
Froala Editor v4.0.17 清除格式工具现在可以从粘贴的内容中删除内联样式. 2023 年 1 月 24 日 - 9:07新版本 特征 清除格式工具现在可以从粘贴的内容中删除内联样式. ...
- 完美Crack:Froala Editor 4.0.16 Patch
基于 Web 的 JavaScript/HTML WYSIWYG 文本编辑器. Froala Editor 是一个用 JavaScript 编写的轻量级 WYSIWYG HTML 编辑器,可为您的应用 ...
- Froala Editor JavaScript WYSIWYG HTML 编辑器
Froala Editor JavaScript WYSIWYG HTML 多用途.易于使用的 WYSIWYG 编辑器,优雅 每次点击,我们都会让网络编辑变得更简单.更强大.更愉快 安全.快速.智能和 ...
- froala editor富文本编辑器出现验证失败的解决方法
froala editor富文本编辑器出现验证失败的解决方法 出现这种情况,首先要下载源码包地址 https://www.froala.com/wysiwyg-editor 之后引用本地的 froal ...
- Froala Editor内容中删除内联样式
Froala Editor内容中删除内联样式 易于集成-编辑器可以在任何时间内集成到任何类型的项目中.它只需要基本的JavaScript和HTML编码知识. 流行-HTML编辑器在开发人员中很流行,它 ...
- 四旋翼无人机学习第13节--Padstack Editor的简单使用
文章目录 0 前言 1 绘制MP2120 QFN10封装焊盘(初步学习) 1.1 数据手册确定焊盘种类 1.2 软件设置焊盘1 1.3 软件设置焊盘2 2 绘制DM9000A LQFP48L封装焊盘( ...
- Froala Editor 插入的表格 页面展示问题 样式消失
在froala编辑器里 显示表格样式如下: 但是获取的html,拿出来显示 样式却丢了 处理方法: 在显示界面 引入 froala_style.min.css文件 绘制html的区域的容器 引用 fr ...
- 四旋翼无人机学习第14节--PCB Editor简单绘制封装-自动生成封装
文章目录 1 前言 1.1 网络获取 1.2 封装软件生成 1.3 立创商城封装转化 1 前言 在之前的博客中,我们绘制了封装所需的焊盘,有了焊盘我们就可以绘制封装啦.当然封装的获取有很多途径,下面我 ...
- MicroPython支持图形化编辑了:Python Editor带你轻松玩转MicroPython
当你看到这篇文章的时候,显然你已经阅读了很多类似的文章,那么本篇文章会深入讲解一些新手的需求,提供详细的建议,当然我不会告诉你具体怎么做,一切答案都是肤浅的. 就拿我自己来说,初步接触编程的阶段是兴奋 ...
- 第一款Micropython图形化编辑器—Python Editor
2019独角兽企业重金招聘Python工程师标准>>> 当你看到这篇文章的时候,显然你已经阅读了很多类似的文章,那么本篇文章会深入讲解一些新手的需求,提供详细的建议,当然我不会告诉你 ...
最新文章
- 刘铁岩谈机器学习:随波逐流的太多,我们需要反思
- 771. Jewels and Stones 宝石与石头
- WindowsAPI中PostMessage与SendMessage的区别
- 仓储模式到底是不是反模式?
- 【opencv学习】【读取图像、视频、摄像头】
- java printstream 覆盖了_Java PrintStream clearError()方法与示例
- 香橙派用什么系统最好_oa办公系统是什么系统?国内oa办公自动化软件哪家最好?...
- SQLServer 2000中,存储过程和用户自定义函数具体的区别??
- 5-5 常用系统接口
- 【带权二分】bzoj2654 tree
- 动态规划法求最大字段和时间复杂度_面试必备——手撕代码(1)“最大子序列和”...
- 前端注释那些事儿:看懂这篇,提高代码质量So easy
- 高斯消去法,列主元法,LU分解法python程序
- 免费的html模板开源网站
- 【Hack The Box】linux练习-- SneakyMailer
- 浏览器Chrome被hao123劫持亲测最有效方式-(Lin)
- 百万钱包借款时填资料一直显示服务器异常,百万钱包有连续放款失败,然后突然推过的吗?我已经失败四五...
- 机械师星辰15电脑开机一直黑屏怎么重装电脑系统?
- 腾讯视频QLV格式转换为MP4格式 1
- Word插入的表格如何拆分单元格
热门文章
- 全国省市县区乡镇级别的矢量文件(百度网盘可下载)
- java计算机毕业设计企业员工工资管理系统源码+系统+数据库+lw文档+mybatis+运行部署
- 程序员必学电脑计算机专业英语词汇 12 (153 单词)(完)
- rsyslog,journalctl
- WPS表格乘的结果和计算机的不一样,同版本wps两个电脑显示不一样怎么办
- JQuery视频总结
- uni-app开发APP上架应用市场遇到的坑
- 编译原理学习笔记之上下文无关文法
- 黄金分割法求极值 matlab,利用matlab实现黄金分割法求极值问题-北京理工大学-机械优化设计.doc...
- 关于Ruby的语言特点