基于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;    }}

@Controllerpublic class UeditorController {@RequestMapping("/")public String index(){return "ueditor";}@Autowiredprivate ActionEnter actionEnter;@ResponseBody@RequestMapping("/ueditor/exec")public String exe(HttpServletRequest request){return actionEnter.exec(request);}}

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

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