当前位置: 首页 > 工具软件 > Froala Editor > 使用案例 >

Froala editor 2.9.5 使用

丌官运诚
2023-12-01

html代码

<div id="edit">

</div>

JS代码

//超大屏幕的功能按钮
var toolbarButtons = ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', '|', 'color', 'emoticons', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', 'insertHR', '-', 'insertLink', 'insertImage', 'insertVideo', 'insertFile', 'insertTable', 'undo', 'redo', 'clearFormatting', 'selectAll', 'html'];
//大屏幕的功能按钮
var toolbarButtonsMD = ['fullscreen', 'bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'color', 'paragraphStyle', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', 'insertHR', 'insertLink', 'insertImage', 'insertVideo', 'insertFile', 'insertTable', 'undo', 'redo', 'clearFormatting'];
//小屏幕的功能按钮
var toolbarButtonsSM = ['fullscreen', 'bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'insertLink', 'insertImage', 'insertTable', 'undo', 'redo'];
//手机的功能按钮
var toolbarButtonsXS = ['bold', 'italic', 'fontFamily', 'fontSize', 'undo', 'redo'];

//编辑器初始化
$('#edit').froalaEditor({
placeholderText: '请输入内容', //默认填充内容
charCounterCount: true,//默认 显示字数
saveInterval: 0,//不自动保存,默认10000,0为不自动保存
//theme : "dark",//主题:dark,red,gray,royal,注意需要引入对应主题的css
height: "450px",
toolbarBottom: false,//默认
toolbarButtonsMD: toolbarButtonsMD,
toolbarButtonsSM: toolbarButtonsSM,
toolbarButtonsXS: toolbarButtonsXS,
toolbarInline: false,//true选中设置样式,默认false
heightMin: 450,
charCounterMax: 3000, //最大字数限制,-1为不限制
// saveURL: '${ctx}/webmana/article/saveArticle', //自动保存的地址(body参数为html内容)
// saveParams: {postId: '1'}, //保存内容时传的参数
spellcheck: false, //是否允许浏览器对输入内容进行拼写检查

imageUploadMethod: 'POST',
imageUploadURL: 'http://i.froala.com/upload',//上传到本地服务器(配置的服务器) 处理该插件上传图片的后台方法地址,而不是你的图片要上传到的路径。 http://i.froala.com/upload 官方测试地址
//imageUploadParams: {pid: '1'}, //上传图片时带的参数
imageDefaultWidth: 200, //上传图片后的默认大小
//imageResizeWithPercent: true,//不设置这个,imageDefaultWidth的单位为像素,设置后为%

videoUploadURL: '${ctx}/webmana/attachment/uploadArticleVideo',
// enter: $.FroalaEditor.ENTER_BR, //设置回车键功能
language: 'zh_cn',
// toolbarButtons: ['bold', 'italic', 'underline', 'paragraphFormat', 'align','color','fontSize','insertImage','insertTable','undo', 'redo']
});
//获取富文本框内容

var html=$('#edit').froalaEditor('html.get', true);
 

转载于:https://www.cnblogs.com/abo666/p/11201117.html

 类似资料: