引入css：前两个必须引入

<link rel="stylesheet" href=" /static/froala_editor/css/froala_editor.css">
<link rel="stylesheet" href="/static/froala_editor/css/froala_style.css">

<link rel="stylesheet" href="/static/froala_editor/css/plugins/code_view.css">
<link rel="stylesheet" href="/static/froala_editor/css/plugins/image_manager.css">
<link rel="stylesheet" href="/static/froala_editor/css/plugins/image.css">
<link rel="stylesheet" href="/static/froala_editor/css/plugins/table.css">
<link rel="stylesheet" href="/static/froala_editor/css/plugins/video.css">

引入js：第一个必须引入

<script type="text/javascript" src="/static/froala_editor/js/froala_editor.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/align.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/code_beautifier.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/code_view.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/draggable.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/image.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/image_manager.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/link.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/lists.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/paragraph_format.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/paragraph_style.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/table.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/video.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/url.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/entities.min.js"></script>

使用：

<textarea id="content" placeholder="请输入新闻内容"></textarea>


var editor = new FroalaEditor("#content",{ // 注意设置的id
toolbarButton:['bold','italic'],
language:'zh_cn',
width: 500,
height:100,
toolbarButtons: ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', '|', 'color', 'emoticons', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', '-', 'insertLink', 'insertImage', 'insertTable', '|', 'quote', 'insertHR', 'undo', 'redo', 'clearFormatting', 'selectAll', 'html'],
quickInsertButtons: ['image', 'table', 'ol', 'ul']
// imageUploadURL: "http://192.168.1.86:8080/exampage/ques/ziliaoceshi.do",

});

参数设置：

placeholderText: '请输入内容', //默认填充内容
charCounterCount: true,//默认 显示字数
saveInterval: 0,//不自动保存,默认10000,0为不自动保存
width: 450, 宽度
height:500, 高度
charCounterMax: 3000, //最大字数限制,-1为不限制

imageUploadMethod：图片上传请求方式
imageUploadURL:图片上传路径
imageDefaultWidth: 200, //上传图片后的默认大小
imageUploadParams: {aid: '1'}, //上传图片时带的参数

language: 'zh_cn',

videoUploadURL：视频上传路径

toolbarButtons: ['bold', 'italic', 'underline', 'paragraphFormat', 'align','color','fontSize','insertImage','insertTable','undo', 'redo']

获取内容：

events: {
initialized: function () {
const editor = this;
this.el.closest('form').addEventListener('submit', function (e) {
console.log(editor.$oel.val());
e.preventDefault()
})
}
}