基于springboot+vue+element+ueditor实现前后端分离的富文本框实现

最近工作中用到了vue+element，springboot这种前后端分离的开发模式。vue+element开发还是轻松加愉快的，不爽的就是发现没有副文本框编辑器Orz~github一番，发现不少资源：vue-quill,vue-kinderitor,vue-ueditor...

刚开始时用的是vue-quill（https://github.com/surmon-china/vue-quill-editor, ps：虽然这货简单，扩展性也较强，但是提供的基本功能太少，在开发插件费时费力，所以pass掉）；

再来用了kindeditor（http://kindeditor.net/demo.php），这货也还好用。但是不是今天的主角；

最后就是主角ueditor了（http://ueditor.baidu.com/），在不跨域的情况下是没问题，但是单文件上上传跨域存在问题（对此功能直接放弃，对此部分的实现方式github上有，地址一时找不到了）。

接下来开始贴代码：

还有就是springboot对ueditor的支持。此处是在对1.4.3.3的源码进行了修改。

修改了ConfigManager的创建方式

/*
     * 通过一个给定的路径构建一个配置管理器， 该管理器要求地址路径所在目录下必须存在config.properties文件
     */
    private ConfigManager(UEditorConfig uEditorConfig) throws IOException {
        this.uEditorConfig = uEditorConfig;
        String configPath = uEditorConfig.getConfig();
        configPath = configPath == null || configPath.isEmpty() ? configFileName : configPath;
        this.initEnv(configPath);
    }

@ConfigurationProperties(prefix = "ueditor")
public class UEditorConfig {

    /**
     * config.json的文件存放地址
     */
    private String config;
    /**
     * 是否同统一上传地址：图片上传地址，视频上传地址...
     */
    private boolean unified;
    /**
     * 文件上传路径
     */
    private String uploadPath;
    /**
     * 文件url前缀
     */
    private String urlPrefix;

    public String getConfig() {
        return config;
    }

    public void setConfig(String config) {
        this.config = config;
    }

    public String getUploadPath() {
        return uploadPath;
    }

    public void setUploadPath(String uploadPath) {
        this.uploadPath = uploadPath;
    }

    public String getUrlPrefix() {
        return urlPrefix;
    }

    public void setUrlPrefix(String urlPrefix) {
        this.urlPrefix = urlPrefix;
    }

    public boolean getUnified() {
        return unified;
    }

    public void setUnified(boolean unified) {
        this.unified = unified;
    }
}

@Configuration
@EnableConfigurationProperties(UEditorConfig.class)
public class WebMvcConfiguration extends WebMvcConfigurerAdapter {

    @Autowired
    private UEditorConfig uEditorConfig;

    @Bean
    @ConditionalOnMissingBean(ActionEnter.class)
    public ActionEnter actionEnter() {
        ActionEnter actionEnter = new ActionEnter(ConfigManager.getInstance(uEditorConfig));
        return actionEnter;
    }

    @Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/upload/**").addResourceLocations("file:" + uEditorConfig.getUploadPath());
        super.addResourceHandlers(registry);
    }

    /**
     * 用于处理编码问题
     *
     * @return
     */
    @Bean
    public Filter characterEncodingFilter() {
        CharacterEncodingFilter characterEncodingFilter = new CharacterEncodingFilter();
        characterEncodingFilter.setEncoding("UTF-8");
        characterEncodingFilter.setForceEncoding(true);
        return characterEncodingFilter;
    }

}

@Controller
public class UeditorController {

	@RequestMapping("/")
	public String index(){
		return "ueditor";
	}

	@Autowired
	private ActionEnter actionEnter;

	@ResponseBody
	@RequestMapping("/ueditor/exec")
	public String exe(HttpServletRequest request){
		return actionEnter.exec(request);
	}

}

本例代码以上传github：https://github.com/MigoNoSalt/vue-ueditor

第一次发文，不妥之处，敬请海涵