背景

管理后台需要对相关文章进行管理, 涉及到富文本编辑器.

在此采用基于百度 ueditor 编辑器(已停止维护) 二开的 neditor 编辑器(美观, 大气, 简洁). 并为其集成 135 编辑器. 以达到可以快捷使用 135 编辑器模板功能, 并且不失美观的特性.

下方是关于集成的步骤记录.

实践

// 135 编辑器配置
// 1. 下载 neditor 编辑器, 解压至项目访问目录
// 2. 下载 135 编辑器, 135EditorDialogPage.html, 保存至 neditor/dialogs/135editor/ 目录
// 3. 下载 135 编辑器, 135editor.js, 保存至 neditor/dialogs/135editor/ 目录
// 4. 编辑 135EditorDialogPage.html 文件内容, 修改 internal.js 引入为正确地址, 如: src="../internal.js"
// 5. 编辑 135editor.js, 内容修改为下方 diff 代码, 使用 dialog 编辑, 关闭 window.open 编辑. 避免在移动端打开 135 编辑器页面后, 无法返回表单页面.

// neditor 配置修改
// 1. 修改 neditor.config.js, 关闭 inputFilter, 避免 135 编辑的文章, 样式被 xss 过滤
// 2. 修改 neditor.config.js, 关闭 outputXssFilter, 避免 135 编辑无法正确获取将要编辑文章, 样式被 xss 过滤
// 3. 保存 edtior.blade.php 到 resources/view/editor.blade.php

// dcat-admin 配置 neditor 编辑器
// dcat-admin 配置 neditor 编辑器
// 1. 保存 NEditor.php 到 app/Admin/Extensions/Form 目录下
// 2. 配置 NEditor::Js 常量, 引入正确的 js 地址
// 3. 配置 NEditor::serverUrl 属性, 修改文件上传地址
// 4. 配置 NEditor::neditorHomeUrl 属性, 修改 neditor 访问地址
// 5. 配置 NEditor::neditorConfigOptions 属性, 修改, 这里可以配置编辑器默认的工具栏
// 6. 在 app/Admin/bootstrap.php 增加 Form::extend('neditor', \App\Admin\Extensions\Form\NEditor::class); 配置, 定义 @editor 资源便恶魔, 全局引入资源
Admin::asset()->alias('@neditor', [
    // 为了方便演示效果，这里直接加载CDN链接，实际开发中可以下载到服务器加载
    'js' => \App\AdminTenant\Extensions\Form\NEditor::JS,
    'css' => \App\AdminTenant\Extensions\Form\NEditor::CSS,
]);
\Dcat\Admin\Admin::requireAssets('@neditor');
Form::extend('neditor', \App\AdminTenant\Extensions\Form\NEditor::class);

diff --color -u 135editorold.js 135editor.js

diff --color -u 135editorold.js 135editor.js

--- 135editorold.js     2022-01-06 23:14:21.000000000 +0800
+++ 135editor.js        2022-05-03 22:24:19.944000000 +0800
@@ -1,4 +1,4 @@
-UE.registerUI('135editor',function(editor,uiName){
+UE.registerUI('135editor', function (editor, uiName) {
     // var dialog = new UE.ui.Dialog({
     //     iframeUrl: editor.options.UEDITOR_HOME_URL+'dialogs/135editor/135EditorDialogPage.html',
     //     cssRules:"width:"+ parseInt(document.body.clientWidth*0.9) +"px;height:"+(window.innerHeight -50)+"px;",
@@ -9,36 +9,45 @@
     // dialog.fullscreen = false;
     // dialog.draggable = false;
 
-    var editor135;
-    function onContentFrom135(event) {
-        if (typeof event.data !== 'string') {
-            if(event.data.ready) {
-                editor135.postMessage(editor.getContent(),'*');
-            }
-            return;
-        };
-
-        if(event.data.indexOf('<') !== 0) return;
-
-        editor.setContent(event.data);
-        editor.fireEvent("catchRemoteImage");
-        window.removeEventListener('message', onContentFrom135);
-    }
+    // var editor135;
+
+    // function onContentFrom135(event) {
+    //     if (typeof event.data !== 'string') {
+    //         if (event.data.ready) {
+    //             editor135.postMessage(editor.getContent(), '*');
+    //         }
+    //         return;
+    //     };
+
+    //     if (event.data.indexOf('<') !== 0) return;
+
+    //     editor.setContent(event.data);
+    //     editor.fireEvent("catchRemoteImage");
+    //     window.removeEventListener('message', onContentFrom135);
+    // }
 
     var btn = new UE.ui.Button({
-        name:'btn-dialog-' + uiName,       
-        className:'edui-for-135editor',
-        title:'135编辑器',
-        onclick:function () {
-            // dialog.render();
-            // dialog.open();
+        name: 'btn-dialog-' + uiName,
+        className: 'edui-for-135editor',
+        title: '135编辑器',
+        onclick: function () {
+            var dialog = new UE.ui.Dialog({
+                iframeUrl: editor.options.UEDITOR_HOME_URL+'dialogs/135editor/135EditorDialogPage.html',
+                cssRules:"width:"+ parseInt(document.body.clientWidth*0.9) +"px;height:"+(window.innerHeight -50)+"px;",
+                editor:editor,
+                name:uiName,
+                title:"135编辑器"
+            });
+            dialog.render();
+            dialog.open();
 
             // 由于登录存在跨域问题，请使用如下方式调用135编辑器
-            editor135 = window.open('https://www.135editor.com/simple_editor.html?callback=true&appkey=')
-            
-            window.removeEventListener('message', onContentFrom135);
-            window.addEventListener('message', onContentFrom135, false);
+            // editor135 = window.open(
+            //     'https://www.135editor.com/simple_editor.html?callback=true&appkey=')
+
+            // window.removeEventListener('message', onContentFrom135);
+            // window.addEventListener('message', onContentFrom135, false);
         }
     });
     return btn;
-},undefined);
\ No newline at end of file
+}, undefined);
\ No newline at end of file

135editor.js

UE.registerUI('135editor', function (editor, uiName) {
    // var dialog = new UE.ui.Dialog({
    //     iframeUrl: editor.options.UEDITOR_HOME_URL+'dialogs/135editor/135EditorDialogPage.html',
    //     cssRules:"width:"+ parseInt(document.body.clientWidth*0.9) +"px;height:"+(window.innerHeight -50)+"px;",
    //     editor:editor,
    //     name:uiName,
    //     title:"135编辑器"
    // });
    // dialog.fullscreen = false;
    // dialog.draggable = false;

    // var editor135;

    // function onContentFrom135(event) {
    //     if (typeof event.data !== 'string') {
    //         if (event.data.ready) {
    //             editor135.postMessage(editor.getContent(), '*');
    //         }
    //         return;
    //     };

    //     if (event.data.indexOf('<') !== 0) return;

    //     editor.setContent(event.data);
    //     editor.fireEvent("catchRemoteImage");
    //     window.removeEventListener('message', onContentFrom135);
    // }

    var btn = new UE.ui.Button({
        name: 'btn-dialog-' + uiName,
        className: 'edui-for-135editor',
        title: '135编辑器',
        onclick: function () {
            var dialog = new UE.ui.Dialog({
                iframeUrl: editor.options.UEDITOR_HOME_URL+'dialogs/135editor/135EditorDialogPage.html',
                cssRules:"width:"+ parseInt(document.body.clientWidth*0.9) +"px;height:"+(window.innerHeight -50)+"px;",
                editor:editor,
                name:uiName,
                title:"135编辑器"
            });
            dialog.render();
            dialog.open();

            // 由于登录存在跨域问题，请使用如下方式调用135编辑器
            // editor135 = window.open(
            //     'https://www.135editor.com/simple_editor.html?callback=true&appkey=')

            // window.removeEventListener('message', onContentFrom135);
            // window.addEventListener('message', onContentFrom135, false);
        }
    });
    return btn;
}, undefined);

neditor.blade.php

<div class="{{$viewClass['form-group']}}">
    <label class="{{$viewClass['label']}} control-label">{{$label}}</label>
    <div class="{{$viewClass['field']}}">
        @include('admin::form.error')
        <textarea id="{{ $editor_id }}" name="{{ $name}}" placeholder="{{ $placeholder }}" {!! $attributes !!} >{!! $value !!}</textarea>
        @include('admin::form.help-block')
    </div>
</div>

<script init="{!! $selector !!}">
    var options = {{ Js::from($config) }};
    var editor = UE.getEditor('{{ $editor_id }}', options);
</script>

<style>
    .edui-button.edui-for-135editor .edui-button-wrap .edui-button-body .edui-icon{
        background-image: url("//static.135editor.com/img/icons/editor-135-icon.png") !important;
        background-size: 85%;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>

NEditor.php

<?php

namespace App\AdminTenant\Extensions\Form;

use Illuminate\Support\Arr;

class NEditor extends \Dcat\Admin\Form\Field
{
    const JS = [
        '/neditor/neditor.config.js',
        '/neditor/neditor.all.min.js',
        '/neditor/neditor.service.js',
        '/neditor/i18n/zh-cn/zh-cn.js',
        '/neditor/third-party/browser-md5-file.min.js',

        '/neditor/dialogs/135editor/135editor.js',
    ];

    const CSS = [
        //
    ];
    
    protected static $js = NEditor::JS;

    protected static $css = NEditor::CSS;

    protected $view = 'neditor';

    public static $serverUrl = '/dashboard/files/upload';

    public static $neditorHomeUrl = '/tenancy/assets/neditor/';

    public static $neditorConfigOptions = <<<OPTIONS
{
    "UEDITOR_HOME_URL": "",
    "serverUrl": "",
    "allowDivTransToP": false,
    "inputXssFilter": false,
    "outputXssFilter": false,
    "initialFrameHeight": 320,
    "toolbars": [
        [
            "135editor",
            "fullscreen",
            "source",
            "|",
            "undo",
            "redo",
            "|",
            "bold",
            "italic",
            "underline",
            "fontborder",
            "strikethrough",
            "rowspacingtop",
            "rowspacingbottom",
            "lineheight",
            "removeformat",
            "formatmatch",
            "autotypeset",
            "blockquote",
            "pasteplain",
            "|",
            "forecolor",
            "backcolor",
            "insertorderedlist",
            "insertunorderedlist",
            "selectall",
            "cleardoc",
            "|",
            "superscript",
            "subscript"
        ]
    ]
}
OPTIONS;

    protected $config = [];

    public function setNeditorhomeUrl()
    {
        $this->config('UEDITOR_HOME_URL', static::$neditorHomeUrl);

        return $this;
    }

    public function setServerUrl()
    {
        $this->config('serverUrl', static::$serverUrl);

        return $this;
    }

    protected function config($key = '', $value = '')
    {
        if (!$this->config) {
            $this->config = json_decode(static::$neditorConfigOptions, true) ?? [];
        }

        if ($key) {
            $this->config = Arr::set($this->config, $key, $value);
        }
        
        return $this->config;
    }

    public function render()
    {
        $config = $this->setNeditorhomeUrl()
            ->setServerUrl()
            ->config();
            
        $this->addVariables([
            'editor_id' => 'neditor_'.uniqid(),
            'config' => $config,            
        ]);

        return parent::render();
    }
}

背景

实践

截图