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文件中使用
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 pitchUp(MultipartFile file, HttpServletRequest request){
HashMap 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
然后，需要配置SpringBoot本地图片地址为网络访问地址，网上资料看到各种粘贴复制，把原来作者的成果都不知道变成什么样了，然后本宝宝陷入了各种坑中，真是头疼,最后根据springboot官网的资料https://docs.spring.io/spring-boot/docs/2.0.0.RELEASE/reference/htmlsingle/#boot-features-spring-mvc-static-content，再找了几篇文章终于解决了。
@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包
org.springframework.boot
spring-boot-starter-web
效果图如下：
至此，这个功能很愉快的就完成了。