ueditor、neditor 动态设置本地或线上访问前缀

mouyong 的个人博客 / 0 / 0 / 创建于 7年前 / 更新于 7年前

背景#

在引入百度的富文本编辑器、simple-ueditor 或 Neditor 后，开发中遇到这样的问题，a 项目通过富文本编辑器提交内容，内容中有图片，b 项目中需要访问到这些图片与内容。所以需要配置图片的访问前缀。本地配置一次，线上还得重新修改，显得有些麻烦。便通过 $_SERVER['HTTP_HOST'] 来动态设置访问前缀。

代码#

将如下内容保存至与 ueditor 同级目录的 EConfig.php。

<?php

if (isset($CONFIG) && is_array($CONFIG)) {
    $CONFIG = EConfig::init($CONFIG);
}

class EConfig
{
    protected $config = array();
    protected $urlPrefix;
    protected $pathFormat;

    protected function __construct(&$config)
    {
        $this->config = $config;
        $this->setUrlPrefix();
        $this->modifyConfigUrlPrefix();
        $this->modifyConfigPathFormat();
    }

    public static function init(&$config = array())
    {
        $instance = new static($config);
        return $instance->getConfig();
    }

    public function modifyConfigUrlPrefix()
    {
        $urlPrefix = $this->getUrlPrefix();

        $this->config['imageUrlPrefix'] = $urlPrefix; /* 上传图片访问路径前缀 */
        $this->config['scrawlUrlPrefix'] = $urlPrefix; /* 涂鸦图片访问路径前缀 */
        $this->config['snapscreenUrlPrefix'] = $urlPrefix; /* 截图图片访问路径前缀 */
        $this->config['catcherUrlPrefix'] = $urlPrefix; /* 远程图片访问路径前缀 */
        $this->config['videoUrlPrefix'] = $urlPrefix; /* 视频访问路径前缀 */
        $this->config['fileUrlPrefix'] = $urlPrefix; /* 文件访问路径前缀 */
        $this->config['imageManagerUrlPrefix'] = $urlPrefix; /* 图库管理器图片访问路径前缀 */
        $this->config['fileManagerUrlPrefix'] = $urlPrefix; /* 文件管理器文件访问路径前缀 */
    }

    public function modifyConfigPathFormat()
    {
        $config = $this->getConfig();

        $this->config['imagePathFormat'] = $this->getPathFormat($config['imagePathFormat']); /* 上传图片保存路径 */
        $this->config['scrawlPathFormat'] = $this->getPathFormat($config['scrawlPathFormat']); /* 涂鸦图片保存路径 */
        $this->config['snapscreenPathFormat'] = $this->getPathFormat($config['snapscreenPathFormat']); /* 截图图片保存路径 */
        $this->config['catcherPathFormat'] = $this->getPathFormat($config['catcherPathFormat']); /* 远程图片保存路径 */
        $this->config['videoPathFormat'] = $this->getPathFormat($config['videoPathFormat']); /* 视频保存路径 */
        $this->config['filePathFormat'] = $this->getPathFormat($config['filePathFormat']); /* 文件保存路径 */
        $this->config['imageManagerListPath'] = $this->getPathFormat($config['imageManagerListPath']); /* 图库管理器图片保存路径 */
        $this->config['fileManagerListPath'] = $this->getPathFormat($config['fileManagerListPath']); /* 文件管理器文件保存路径 */
    }

    public function getConfig()
    {
        return $this->config ?: array();
    }

    public function setUrlPrefix($urlPrefix = '')
    {
        $this->urlPrefix = $urlPrefix ?: "//{$_SERVER['HTTP_HOST']}";
        return $this->urlPrefix;
    }

    public function getUrlPrefix($default = '')
    {
        $urlPrefix = $this->urlPrefix ?: $this->setUrlPrefix($default);
        return $urlPrefix;
    }

    public function getPathFormat($pathFormat = '')
    {
        $pathFormat = substr($pathFormat, stripos($pathFormat, 'php') + strlen('php'));
        return $pathFormat;
    }
}

使用#

在 ueditor/php/controller.php 的 case 'config': 中引入文件即可

<?php
.
.
.
include(__DIR__.'/../../EConfig.php');
switch ($action) {
    case 'config':
        $result =  json_encode($CONFIG);
        break;
                .
                .
                .
}
.
.
.

目录结构#

neditor/
        |-- ...
        |--php
        |       |-- controller.php
        |-- ....
EConfig.php

toolbox 配置#

将以下内容保存为 /js/econfig.js

var config = {
  toolbars: [['bold', 'italic', 'underline', 'strikethrough', 'blockquote', 'insertunorderedlist', 'insertorderedlist', 'justifyleft','justifycenter', 'justifyright',  'emotion', 'link', 'simpleupload', 'insertimage', 'fullscreen']],
  elementPathEnabled: false,
  enableContextMenu: false,
  wordCount:false,
  emotionLocalization:true,
  imagePopup:false
}

使用#

将以下内容保存为 Common/common.php

<script src="/neditor/neditor.config.js"></script>
<script src="/neditor/neditor.all.min.js"> </script>
<script src="/neditor/i18n/zh-cn/zh-cn.js"></script>
<script src="/js/econfig.js"></script>

引入、申明编辑器，初始化编辑器

<?php include(__DIR__.'/../Common/common.php') ?>

<script id="editor" name="content" type="text/plain">
                这里写你的初始化内容
</script>

<script>var editor = UE.getEditor('editor', config).setPlaceholder('请输入内容')</script>