angular4/5的富文本插件angular2-froala-wysiwyg使用教程

本文链接：https://blog.csdn.net/i_quite/article/details/82624986

前端框架angualr4/5使用的富文本插件，网上找到了几种，每一种的优劣大家自己有空试一下吧，我这人懒得找，随便拿一种就上项目了，当然这样也很容易遇到坑，就给大家分享一下吧。

1.安装命令

npm i angular2-froala-wysiwyg

2.配置

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

然后，需要配置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包

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-web</artifactId>

</dependency>

效果图如下：

至此，这个功能很愉快的就完成了。