init

.babelrc

@@ -0,0 +1,6 @@
+{
+    "plugins": [
+        "@babel/plugin-proposal-class-properties",
+        "@babel/transform-react-jsx"
+    ]
+}

.gitignore

@@ -0,0 +1,9 @@
+.DS_Store
+phpunit.phar
+/vendor
+composer.phar
+composer.lock
+*.project
+.idea/
+/node_modules
+package-lock.json

README.md

@@ -0,0 +1,3 @@
+# dcat-admin-braft-editor
+
+[Braft Editor](https://github.com/margox/braft-editor) 是基于 draft-js 开发的美观易用的 React 富文本编辑器

composer.json

@@ -0,0 +1,32 @@
+{
+    "name": "tyrantg/dcat-admin-braft-editor",
+    "alias": "Braft Editor编辑器",
+    "description": "Dcat Admin扩展 - Braft Editor编辑器",
+    "type": "library",
+    "keywords": ["dcat-admin", "extension"],
+    "homepage": "https://github.com/tyrantg/dcat-admin-braft-editor",
+    "license": "MIT",
+    "authors": [
+        {
+            "name": "TyrantGenesis",
+            "email": "genesis489449701@gmail.com"
+        }
+    ],
+    "require": {
+        "php": ">=7.1.0",
+        "dcat/laravel-admin": "~2.0"
+    },
+    "autoload": {
+        "psr-4": {
+            "TyrantG\\BraftEditor\\": "src/"
+        }
+    },
+    "extra": {
+        "dcat-admin": "TyrantG\\BraftEditor\\DcatAdminBraftEditorServiceProvider",
+        "laravel": {
+            "providers": [
+                "TyrantG\\BraftEditor\\DcatAdminBraftEditorServiceProvider"
+            ]
+        }
+    }
+}

mix-manifest.json

@@ -0,0 +1,3 @@
+{
+    "/resources/assets/js/braft-editor.min.js": "/resources/assets/js/braft-editor.min.js"
+}

package.json

@@ -0,0 +1,30 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "npm run development",
+    "development": "mix",
+    "watch": "mix watch",
+    "watch-poll": "mix watch -- --watch-options-poll=1000",
+    "hot": "mix watch --hot",
+    "prod": "npm run production",
+    "production": "mix --production"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-transform-react-jsx": "^7.13.12",
+    "@vue/cli-plugin-babel": "^4.5.12",
+    "braft-editor": "^2.3.9",
+    "laravel-mix": "^6.0.6",
+    "postcss": "^8.1.14",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "resolve-url-loader": "^2.3.1",
+    "sass": "^1.20.1",
+    "sass-loader": "^8.0.0",
+    "vue": "^2.6.10",
+    "vue-loader": "^15.9.6",
+    "vue-template-compiler": "^2.6.10",
+    "vuera": "^0.2.7",
+    "webpack": "^5.23.0"
+  }
+}

resources/assets/js/braft-editor.min.js.LICENSE.txt

@@ -0,0 +1,56 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/*!
+ * Vue.js v2.6.12
+ * (c) 2014-2020 Evan You
+ * Released under the MIT License.
+ */
+
+/*!@license
+ * UAParser.js v0.7.28
+ * Lightweight JavaScript-based User-Agent string parser
+ * https://github.com/faisalman/ua-parser-js
+ *
+ * Copyright © 2012-2021 Faisal Salman <f@faisalman.com>
+ * Licensed under MIT License
+ */
+
+/** @license React v0.20.2
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react-dom-server.browser.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

resources/js/app.js

@@ -0,0 +1,10 @@
+import Vue from 'vue'
+
+import { VuePlugin } from 'vuera'
+Vue.use(VuePlugin)
+
+Vue.component('braft-editor', require('./components/BraftEditor.vue').default);
+
+new Vue({
+    el: '#app',
+});

resources/js/components/BraftEditor.vue

@@ -0,0 +1,43 @@
+<template>
+    <be class="braft-editor" :content="content"  @handleChange="handleEditorChange"></be>
+</template>
+
+<script>
+import BraftEditor from '../react/BraftEditor'
+
+export default {
+    props: {
+        name: {
+            type: String,
+            default: ''
+        },
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+        'be': BraftEditor
+    },
+    data() {
+        return {
+            content: ''
+        }
+    },
+    created() {
+        this.content = this.value
+    },
+    methods: {
+        handleEditorChange(e) {
+            $(`.braft[name=${this.name}]`).val(e.toHTML())
+        },
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.braft-editor {
+    border: 1px solid #e0e0e8;
+    border-radius: 4px;
+}
+</style>

resources/js/react/BraftEditor.js

@@ -0,0 +1,47 @@
+import React from 'react'
+// 引入编辑器组件
+import BraftEditor from 'braft-editor'
+// 引入编辑器样式
+import 'braft-editor/dist/index.css'
+
+export default class Editor extends React.Component {
+
+    state = {
+        // 创建一个空的editorState作为初始值
+        editorState: BraftEditor.createEditorState(null)
+    }
+
+    async componentDidMount () {
+        // 假设此处从服务端获取html格式的编辑器内容
+        // const htmlContent = await fetchEditorContent()
+        // 使用BraftEditor.createEditorState将html字符串转换为编辑器需要的editorStat
+        this.setState({
+            editorState: BraftEditor.createEditorState(this.props.content)
+        })
+    }
+
+    handleEditorChange = (editorState) => {
+        this.setState({ editorState })
+    }
+
+    render () {
+        const { editorState } = this.state
+        return (
+            <div>
+                <BraftEditor
+                    value={editorState}
+                    onChange={this.props.handleChange}
+                />
+            </div>
+        )
+
+    }
+
+}
+/*export default () => {
+    return (
+        <>
+            <Editor />
+        </>
+    );
+};*/

resources/views/braft-editor.blade.php

@@ -0,0 +1,16 @@
+<div class="{{$viewClass['form-group']}}">
+
+    <label class="{{$viewClass['label']}} control-label">{{$label}}</label>
+
+    <div class="{{$viewClass['field']}}">
+
+        @include('admin::form.error')
+
+        <braft-editor name="{{$name}}" value="{!! $value !!}"></braft-editor>
+
+        <input type="hidden" class="braft" name="{{$name}}" value="{{ old($column, $value) }}" />
+
+        @include('admin::form.help-block')
+
+    </div>
+</div>

src/BraftEditor.php

@@ -0,0 +1,15 @@
+<?php
+
+
+namespace TyrantG\BraftEditor;
+
+use Dcat\Admin\Form\Field;
+
+class BraftEditor extends Field
+{
+    protected $view = 'braft::braft-editor';
+
+    protected static $js = [
+        '/vendor/dcat-admin-extensions/tyrantg/dcat-admin-braft-editor/js/braft-editor.min.js',
+    ];
+}

src/DcatAdminBraftEditorServiceProvider.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace TyrantG\BraftEditor;
+
+use Dcat\Admin\Extend\ServiceProvider;
+use Dcat\Admin\Admin;
+use Dcat\Admin\Form;
+
+class DcatAdminBraftEditorServiceProvider extends ServiceProvider
+{
+	public function register()
+	{
+		//
+	}
+
+	public function init()
+	{
+		parent::init();
+
+        $this->loadViewsFrom(__DIR__.'/../resources/views', 'braft');
+
+        Admin::booting(function () {
+            Form::extend('braftEditor', BraftEditor::class);
+        });
+	}
+}

version.php

@@ -0,0 +1,7 @@
+<?php
+
+return [
+    '1.0.0' => [
+        'Initialize extension.',
+    ],
+];

webpack.mix.js

@@ -0,0 +1,17 @@
+const mix = require('laravel-mix');
+
+/*
+ |--------------------------------------------------------------------------
+ | Mix Asset Management
+ |--------------------------------------------------------------------------
+ |
+ | Mix provides a clean, fluent API for defining some Webpack build steps
+ | for your Laravel application. By default, we are compiling the Sass
+ | file for the application as well as bundling up all the JS files.
+ |
+ */
+
+mix.js('resources/js/app.js', 'resources/assets/js/braft-editor.min.js')
+    // .sass('resources/sass/app.scss', 'public/css')
+    .vue()
+    .sourceMaps()