Vue2.0整合UEditor富文本编辑器(内含跨域上传图片和回显内容)

前面写了一篇关于vue整合wangEditor富文本编辑器,今天介绍由百度开源的UEditor富文本编辑器。两者相比之下:wangEditor比较轻量,易于使用。Ueditor稍显臃肿。不过功能齐全,其中有一些配置稍微复杂一点,话不多说直接开始:

1.从ueditor官网下载自己后端语言对应的源码,我用的后端语言是Java所以下载jsp版本的。UEditor源码官网
在这里插入图片描述
2.将下载好的压缩包解压之后放在自己项目的static目录下。当前操作是在本地进行的,所以要注意导入ueditor的目录问题。
在这里插入图片描述
3.编辑ueditor.config.js设置ueditor的路径

window.UEDITOR_HOME_URL = "/static/plugins/ueditor-1.4.3.3/";
var URL = window.UEDITOR_HOME_URL || getUEBasePath();

还可以配置ueditor的功能按钮 toolbars。还有其它的一些配置,请查看官网中的介绍
在这里插入图片描述
4.接下来打开/static/config/init.js,动态加载初始资源。实际上就是加载js文件。

/**
 * 动态加载初始资源
 */ 
;(function() {
   
  var resList = {
   
    js: [
      // 插件 - ueditor
      '/static/plugins/ueditor-1.4.3.3/ueditor.config.js',
      '/static/plugins/ueditor-1.4.3.3/ueditor.all.min.js',
      '/static/plugins/ueditor-1.4.3.3/lang/zh-cn/zh-cn.js',
    ]
  };

  // 脚本
  document.onreadystatechange = function () {
   
    if (document.readyState === 'interactive') {
   
      var i = 0;
      var _script = null;
      var createScripts = function () {
   
        if (i >= resList.js.length) {
   
          return;
        }
        _script = document.createElement('script');
        _script.src = resList.js[i];
        _script.onload = function () {
   
          i++;
          
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值