帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

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

帝国模板之家 2020-11-05 网页特效 评论

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>

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

美梦,诞生在一瞬间,这短暂的喜悦,也就像泡沫一样,往往

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言