基于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上有，地址一时找不到了）。

接下来开始贴代码：

<template>
<div>
<script :id=id type="text/plain"></script>
</div>
</template>
<script>
import '../../static/ueditor/ueditor.config.js'
import '../../static/ueditor/ueditor.all.min.js'
import '../../static/ueditor/ueditor.parse.min.js'
export default {
name: 'ueditor',
data () {
return {
editor: null,
_content: "",
loadComplete: false
}
},
props: {
id: {
type: String,
default: `editor_${new Date().getTime()}`
},
value: {
type: String,
default: ''
},
autoLoad: {
type: Boolean,
default: true
},
config: {
type: Object,
default: () => {
return {
initialFrameWidth: '100%',
initialFrameHeight: 350,
maximumWords:1000,
toolbars: [[
'fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'directionalityltr', 'directionalityrtl', 'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|', 'insertimage',
'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
'preview', 'searchreplace', 'drafts', 'help'
]]
}
}
}
},
watch: {
value: function(newVal, oldVal) {
if (this.editor) {
if (!!newVal && newVal !== this._content) {
this._content = newVal
this.setContent(this._content)
} else if(!newVal) {
this.setContent('')
}
}
},
},
mounted() {
this.$nextTick(() => {
if(this.autoLoad) {
this.init()
}
})
},
methods: {
init() {
UE.delEditor(this.id)
this.editor = UE.getEditor(this.id, this.config)
this.editor.addListener("ready", () => {
this.loadComplete = true
this.editor.setContent(this.value || '')
})
this.editor.addListener( 'contentChange', editor => {
this._content = this.editor.getContent()
this.$emit('input', this._content)
})
},
get() {
return this.editor
},
getContent() {
return this.editor.getContent()
},
setContent(value) {
if(this.loadComplete) {
this.editor.setContent(value)
}
}
},
destroyed() {
if(this.editor) {
this.editor.destroy()
}
}
}

</script>

还有就是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
4000
";
}

@Autowired
private ActionEnter actionEnter;

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

}

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

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