xnzj/wang-editor-fix 问题修复 & 功能扩展

解决BUG、新增功能、兼容多环境部署,快速响应你的开发需求

邮箱:yvsm@zunyunkeji.com | QQ:316430983 | 微信:yvsm316

xnzj/wang-editor-fix

Composer 安装命令:

composer require xnzj/wang-editor-fix

包简介

wangEditor extension for laravel-admin

README 文档

README

请使用 v1.2.2

请使用 v1.2.2

请使用 v1.2.2

修改了 render 方法

// Editor.php
    public function render()
    {
        $this->id = str_replace('.', '', $this->id . microtime(true));

        $config = (array) WangEditor::config('config');

        $config = json_encode(array_merge([
            'zIndex'              => 0,
            'uploadImgShowBase64' => true,
        ], $config, $this->options));

        $token = csrf_token();

        $this->script = <<<EOT
if (typeof index !== 'undefined') {
    var id = '$this->id' + index;
    var id_selector = '#' + id;
    var input_id = 'input-' + id;
    var input_id_selector = '#' + input_id;

    $("div[class^='has-many']").each(function(){
        if ($(this).hasClass('fields-group')){
            $(this).find("label[for='$this->id']").attr('for', id);
            $(this).find("div[id='$this->id']").attr('id', id);
            $(this).find("input[id='input-$this->id']").attr('id', input_id);
        }
    })
    if ($(id_selector).attr('initialized')) {
        return;
    }

    var E = window.wangEditor
    var editor = new E(id_selector);
    
    editor.customConfig.uploadImgParams = {_token: '$token'}
    
    Object.assign(editor.customConfig, {$config})
    
    editor.customConfig.onchange = function (html) {
        console.log(input_id_selector);
        $(input_id_selector).val(html);
    }
    editor.create();
    
    $(id_selector).attr('initialized', 1);
} else {
    if ($('#{$this->id}').attr('initialized')) {
        return;
    }
    var E = window.wangEditor
    var editor = new E('#{$this->id}');
    
    editor.customConfig.uploadImgParams = {_token: '$token'}
    
    Object.assign(editor.customConfig, {$config})
    
    editor.customConfig.onchange = function (html) {
        console.log('#input-$this->id');
        $('#input-$this->id').val(html);
    }
    editor.create();
    
    $('#{$this->id}').attr('initialized', 1);
}
EOT;
        return parent::render();
    }

这是一个laravel-admin扩展,用来将wangEditor集成进laravel-admin的表单中

laravel-admin extension
1.x 1.x
2.x 2.x

安装

// laravel-admin 1.x
composer require "xnzj/wang-editor-fix:1.*"

然后

php artisan vendor:publish --tag=laravel-admin-wangEditor

配置

config/admin.php文件的extensions,加上属于这个扩展的一些配置

    'extensions' => [

        'wang-editor' => [
        
            // 如果要关掉这个扩展,设置为false
            'enable' => true,
            
            // 编辑器的配置
            'config' => [
                
            ]
        ]
    ]

编辑器的配置可以到wangEditor文档找到,比如配置上传图片的地址上传图片

    'config' => [
        // `/upload`接口用来上传文件,上传逻辑要自己实现,可参考下面的`上传图片`
        'uploadImgServer' => '/upload'
    ]

使用

在form表单中使用它:

$form->editor('content');

上传图片

图片上传默认使用base64格式化后与文本内容一起存入数据库,如果要上传图片到本地接口,那么下面是这个接口对应的action代码示例:

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

public function upload(Request $request)
{
    $urls = [];

    foreach ($request->file() as $file) {
        $urls[] = Storage::url($file->store('images'));
    }

    return [
        "errno" => 0,
        "data"  => $urls,
    ];
}

Note: 配置路由指向这个action,存储的disk配置在config/filesystem.php中,这个需参考laravel官方文档。

支持

如果觉得这个项目帮你节约了时间,不妨支持一下;)

-1

License

Licensed under The MIT License (MIT).

xnzj/wang-editor-fix 适用场景与选型建议

xnzj/wang-editor-fix 是一款 基于 JavaScript 开发的 Composer 扩展包,目前已累计 16 次下载、GitHub Stars 达 0, 最近一次更新时间为 2021 年 08 月 29 日, 在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向: 「editor」 「extension」 「laravel-admin」 等业务场景。在实际项目中,围绕这些方向常见需要落地的问题包括:接口对接、性能调优、并发安全、与既有框架(Laravel / ThinkPHP / Yii / Webman 等)的兼容适配,以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 xnzj/wang-editor-fix 或与其功能相近的方案,如果你在选型或落地过程中遇到问题,例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查,欢迎联系我们协助评估。

围绕 xnzj/wang-editor-fix 我们能提供哪些服务?
定制开发 / 二次开发

基于 xnzj/wang-editor-fix 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复;针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维;也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ:316430983 微信:yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

统计信息

  • 总下载量: 16
  • 月度下载量: 0
  • 日度下载量: 0
  • 收藏数: 0
  • 点击次数: 8
  • 依赖项目数: 0
  • 推荐数: 0

GitHub 信息

  • Stars: 0
  • Watchers: 0
  • Forks: 27
  • 开发语言: JavaScript

其他信息

  • 授权协议: MIT
  • 更新时间: 2021-08-29