angular4/5的富文字外掛angular2-froala-wysiwyg使用教程
前端框架angualr4/5使用的富文字外掛，網上找到了幾種，每一種的優劣大家自己有空試一下吧，我這人懶得找，隨便拿一種就上專案了，當然這樣也很容易遇到坑，就給大家分享一下吧。
1.安裝命令
npm i angular2-froala-wysiwyg2.配置
2.1 在.angular-cli.json檔案中配置，angular6的好像改成了angular.json檔案。
"scripts": [ ... "../node_modules/jquery/dist/jquery.min.js", "../node_modules/froalaeditor/js/froala_editor.pkgd.min.js", "../node_modules/froala-editor/js/languages/zh_cn.js" ], "styles": [ "styles.less", "../node_modules/font-awesome/css/font-awesome.css", "../node_modules/froalaeditor/css/froala_editor.pkgd.min.css", "assets/laydate/theme/default/laydate.css" ], "addons": [ "../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)" ],
2.2在app.module.ts或share.module.ts模組中配置
根據本專案，一般引入外掛都使用在share.module.ts模組中。
網上說根據這種情況配置，直接呼叫模組的forRoot()方法，但是我看到這兩個模組裡面都只有一個forRoot()方法，而且這樣裝載模組的forRoot()方法頁面都提示找不到元件，無奈試了幾次，發現直接裝載到模組就可以了。
網上教程:在app.module.ts檔案中配置
imports: [ CommonModule, FormsModule, RouterModule, ReactiveFormsModule, AlainThemeModule.forChild(), DelonABCModule, DelonACLModule, FroalaEditorModule.forRoot(), FroalaViewModule.forRoot(), ...THIRDMODULES ],
個人裝載：在share.module.ts檔案中
個人喜歡把外掛都封裝在一個數組中，再用es6的陣列解析字串語法裝載到模組中。
const THIRDMODULES = [
NgxViewerModule,
NgZorroAntdModule,
CountdownModule,
UEditorModule,
NgxTinymceModule,
FroalaEditorModule,
FroalaViewModule,
// NzSchemaFormModule
];3.使用方法
html檔案中使用
<div [froalaEditor]="option" [(froalaModel)]="froalaText" (froalaModelChange)="froalaChange($evenet)"></div>
ts檔案中使用
ngOnInit() {
this.option = {
language: 'zh_cn', // 配置語言
placeholderText: '請輸入內容', // 文字框提示內容
charCounterCount: true, // 是否開啟統計字數
charCounterMax: 4000, // 最大輸入數
// 注意導航條的配置, 按照官方的文件,無法配置,使用toolbarButtons來配置了。
toolbarButtons: ['fullscreen', '|', 'bold', 'italic', 'underline', 'strikeThrough', 'align', 'insertLink', 'insertImage', 'insertHR', 'subscript', 'superscript'],
codeMirror: false, // 高亮顯示html程式碼
codeMirrorOptions: { // 配置html程式碼引數
tabSize: 4
},
// 上傳圖片，視訊等穩健配置
imageUploadURL: 'http://localhost:8008/emanager/sns/pitchUp',
imageUploadParams: {}, // 介面其他傳參,預設為空物件{},
imageUploadMethod: 'POST',
};
}
// 獲取輸入的資料(資料為html資料，但是不能輸入html語法，否則會發生資料轉義)
froalaChange(event) {
console.log(this.froalaText);
}4.效果圖
5.資料格式
最終獲取到的資料大家都能猜到了，那就是html資料，我們只要把這個html轉成字串儲存到資料庫，最後前端按照格式顯示，那基本上就完成了。
6.資料解析、優化、儲存
6.1、 angular2-froala-wysiwyg顯示圖片需要的資料型別。
{"link":"http://xx.xx.xx.xx:xxxxx/xx.jpg"}6.2、 我重點說一下SpringBoot專案是如何在本地生成angular2-froala-wysiwyg可顯示的圖片資料型別，當然，有配置和搭建圖片伺服器的同學自動忽略即可。
首先，通過angular2-froala-wysiwyg獲取本地的檔案，進入到SpringBoot專案的Controller層儲存檔案的方法中。
@ResponseBody
@PostMapping(value="pitchUp")
public Map<String,String> pitchUp(MultipartFile file, HttpServletRequest request){
HashMap<String, String> map = new HashMap<>();
if(!file.isEmpty()){
try {
String fileName = file.getOriginalFilename();//儲存時的檔名
String suffix = fileName.substring(fileName.lastIndexOf("."));//檔案字尾帶點
String name= UUID.randomUUID()+suffix;//新檔名 防止重複
String path = "C:/upLoad/"+ name;
FileCopyUtils.copy(file.getInputStream(), new FileOutputStream(path));
String contextpath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort();
String url = contextpath + "/img/"+name; // 格式http://127.0.0.1:8008/md5.jpg
log.info("本地圖片地址"+path);
log.info("網路訪問地址"+url);
map.put("link", url);
} catch (IOException e) {
log.error("檔案訪問異常"+e.getMessage(),e);
}
}
return map;
}圖片上傳的結果如下：
本地圖片地址C:/upLoad/f2eda2ba-a628-40a0-9669-c4891394546f.png
網路訪問地址http://localhost:8008/img/f2eda2ba-a628-40a0-9669-c4891394546f.png
@Configuration
public class MyWebAppConfigurer implements WebMvcConfigurer {
/**
* 訪問外部檔案配置，訪問專案外部檔案
*/
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
//配置server虛擬路徑，handler為當前專案靜態資原始檔中訪問的目錄，locations為files相對應的本地路徑
registry.addResourceHandler("/img/**").addResourceLocations("file:C:/upLoad/");
}
}對了，實現WebMvcConfigurer 類首先需要匯入spring-boot-starter-web的jar包
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>效果圖如下：
至此，這個功能很愉快的就完成了。