在Spring Boot项目中添加富文本编辑器，通常需要以下步骤：
- 选择一个富文本编辑器库，比如
TinyMCE、CKEditor、Quill等。 - 在项目中引入所选择的富文本编辑器库。
- 在前端页面中添加编辑器并进行初始化。
- 后端提供接口来保存编辑器中的内容。
以下是一个使用TinyMCE作为例子的简单实现：
步骤1：添加TinyMCE依赖到build.gradle或pom.xml
<!-- 在HTML中引入TinyMCE -->
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>步骤2：初始化TinyMCE编辑器
在HTML文件中添加以下代码：
<textarea id="mytextarea">这里是初始化内容</textarea>
<script>
tinymce.init({
selector: '#mytextarea', // 选择器指定textarea
plugins: 'image code', // 加载的插件
toolbar: 'image code', // 工具栏中的图标
images_upload_url: '上传图片的后端接口URL',
file_picker_types: 'image',
file_picker_callback: function(cb, value, meta) {
// 自定义文件选择逻辑
}
});
</script>步骤3：后端接口
在Spring Boot Controller中添加以下方法：
import org.springframework.web.bind.annotation.*;
import org.springframework.http.ResponseEntity;
@RestController
public class EditorController {
@PostMapping("/content")
public ResponseEntity<String> saveContent(@RequestParam("content") String content) {
// 保存内容到数据库或执行其他逻辑
return ResponseEntity.ok("内容已保存");
}
@GetMapping("/content")
public ResponseEntity<String> getContent() {
// 从数据库获取内容或执行其他逻辑
return ResponseEntity.ok("这里是获取的内容");
}
@PostMapping("/uploadImage")
public ResponseEntity<String> uploadImage(@RequestParam("file") MultipartFile file) {
// 保存图片到服务器并返回图片URL
return ResponseEntity.ok("图片上传成功，URL为...");
}
}步骤4：配置跨域资源共享
如果前端和后端分离，可能需要配置跨域资源共享：
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") // 路径匹配
.allowedOrigins("*") // 允许的域
.allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的方法
.allowedHeaders("*") // 允许的头
.allowCredentials(true); // 是否允许凭据
}
}以上代码提供了一个简单的示例，实际使用时需要根据具体需求进行调整，比如安全性校验、异常处理等。