關於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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM