网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
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>
转载请注明来源:Froala简洁jquery富文本编辑器插件
本文永久链接地址:https://www.moyouyouw.cn/code/656.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论