Froala简洁jquery富文本编辑器插件

演示  website 下载

Froala是一款简洁的富文本编辑器，基于jQuery+HTML5,支持自动保存,内联模式中,拼写检查,ajax请求,图片上传等更多功能。

1. 加载页面所需的CSS文件。

<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/froala_editor.min.css" rel="stylesheet" type="text/css">

2. 加载jQuery 库和froala_editor.min.jsFroala编辑插件。

<script src="jquery.min.js"></script> 
<script src="js/froala_editor.min.js"></script> 

3. 创建容器

<section id="editor">
<div id="edit">
编辑的内容
</div>
</section>

4. 插件初始化

<script>
$(function(){
$('#edit').editable({
inlineMode: false
})
});
</script>

5. 所有可用的选项。

<script>
$(function(){
$('#edit').editable({
autosave: false, // Enable autosave option. Enabling autosave helps preventing data loss.
autosaveInterval: 1000, // Time in milliseconds to define when the autosave should be triggered. 
saveURL: null, // Defines where to post the data when save is triggered. The editor will initialize a POST request to the specified URL passing the editor content in the body parameter of the HTTP request.
blockTags: ["n", "p", "blockquote", "pre", "h1", "h2", "h3", "h4", "h5", "h6"], // Defines what tags list to format a paragraph and their order. 
borderColor: "#252528", // Customize the appearance of the editor by changing the border color.
buttons: ["bold", "italic", "underline", "strikeThrough", "fontSize", "color", "sep", "formatBlock", "align", "insertOrderedList", "insertUnorderedList", "outdent", "indent", "sep", "selectAll", "createLink", "insertImage", "undo", "redo", "html"], // Defines the list of buttons that are available in the editor. 
crossDomain: false, // Make AJAX requests using CORS. 
direction: "ltr", // Sets the direction of the text.
editorClass: "", // Set a custom class for the editor element.
height: "auto", // Set a custom height for the editor element.
imageMargin: 20, // Define a custom margin for image. It will be visible on the margin of the image when float left or right is active.
imageErrorCallback: false,
imageUploadParam: "file", // Customize the name of the param that has the image file in the upload request.
imageUploadURL: "http://uploads.im/api", // A custom URL where to save the uploaded image.
inlineMode: true, // Enable or disable inline mode.
placeholder: "Type something", // Set a custom placeholder to be used when the editor body is empty.
shortcuts: true, // Enable shortcuts. The shortcuts are visible when you hover a button in the editor.
spellcheck: false, // Enables spellcheck.
typingTimer: 250, // Time in milliseconds to define how long the typing pause may be without the change to be saved in the undo stack.
width: "auto" // Set a custom width for the editor element.
})
});
</script>

会员登陆后即可下载资源文件。更多好用网站特效插件，请关注帝国模板之家。