Froala编辑器使用

1.输入授权码:再引用编辑器的页面,

<script>

(function () {

const editorInstance = new FroalaEditor('#Con', {

key: '4NC5fE4D4E4A2J3C5B-16D2A2F3E2G2H2D3jefpF1F1E1D4F1C11C6C2E5B4==',

enter: FroalaEditor.ENTER_P,

placeholderText: null,

imageUploadURL: '@Url.Action("FileUpload","Product")',

imageUploadParams: {

id: 'my_editor'

}

})

})()

</script>

 

2.前台内容与编辑器内样式保持一直

A:在前端显示页面,引用css  

<link rel="stylesheet" href="~/froald_editor/css/froala_style.css">

B:在编辑器展示内容的外边嵌套2个div

     <div class="fr-wrapper" dir="auto"> 

          <div class="fr-element fr-view" dir="auto" contenteditable="true" aria-disabled="false" spellcheck="true">

             @Html.Raw(Model.Product.Con)

          </div>

      </div>