editor 패키지 사용코드로 수정

xpressengine · May 23, 2016 · 0b436bd · 0b436bd
1 parent b33d475
commit 0b436bd
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 50 deletions.
diff --git a/assets/service.js b/assets/service.js
@@ -61,7 +61,7 @@
                         this.renderItems();
 
                         this.setTotalCnt(this.getTotalCnt() + 1);
-                    }.bind(this), self.props.config.useWysiwyg);
+                    }.bind(this), self.props.config.editor);
 
                 form.render(this._getFormBox());
 
@@ -309,7 +309,7 @@
                         self.spotIn(child);
                         item.removeForm();
                         self.renderItems();
-                    }, self.props.config.useWysiwyg));
+                    }, self.props.config.editor));
 
                     self.state.ing = false;
                 });
@@ -343,7 +343,7 @@
                             item.setChanged();
                             self.replace(item);
                             self.renderItems();
-                        }, self.props.config.useWysiwyg);
+                        }, self.props.config.editor);
 
                         item.setForm(form);
                     };
@@ -594,12 +594,12 @@
         },
     };
 
-    function Form(dom, mode, callback, useEditor)
+    function Form(dom, mode, callback, editorData)
     {
         this.dom = dom;
         this.mode = mode;
         this.callback = callback;
-        this.useEditor = useEditor;
+        this.editorData = editorData;
         this.editor = null;
         this.container = null;
     }
@@ -614,19 +614,20 @@
 
             this.container = container;
 
-            if (this.useEditor === true) {
+            if (this.editorData !== null) {
                 this.initEditor();
             }
 
             this._eventBind();
         },
         initEditor: function () {
-            if (typeof(xe3CkEditor) !== 'function') {
+            if (typeof(XEeditor) == 'undefined') {
                 return ;
             }
 
             var textarea = $('textarea', this.dom)[0],
-                editor = xe3CkEditor(textarea, {
+                editor = XEeditor.getEditor(this.editorData.name);
+                editor.create(textarea, {
                     "height": 200,
                     "fileUpload":{
                         "upload_url": url("/file/upload"),
@@ -637,8 +638,11 @@
                         "hashtag_api": url("/suggestion/hashTag"),
                         "mention_api": url("/suggestion/mention")
                     }
-                });
+                }, this.editorData.config, this.editorData.tools);
 
+            // todo
+            // todo: event interface 필요
+            // todo
             editor.on('focus', function () {
                 $(textarea).triggerHandler('focus');
             });
@@ -651,8 +655,8 @@
             this.editor = editor;
         },
         editorSync: function () {
-            if (this.useEditor && this.editor) {
-                this.editor.setData($('textarea', this.dom).val());
+            if (this.editor) {
+                this.editor.setContents($('textarea', this.dom).val());
             }
         },
         getDom: function () {
@@ -705,7 +709,7 @@
         this.dom = dom;
         this.mode = 'certify';
         this.callback = callback;
-        this.useEditor = false;
+        this.editorData = null;
         this.editor = null;
         this.container = null;
     }

diff --git a/src/CommentUIObject.php b/src/CommentUIObject.php
@@ -15,6 +15,7 @@
 use View;
 use XeFrontend;
 use XeSkin;
+use XeEditor;
 use Xpressengine\Plugins\Comment\Exceptions\InvalidArgumentException;
 
 /**
@@ -62,18 +63,57 @@ public function render()
 
         $config = $handler->getConfig($instanceId);
 
-        XeFrontend::js('/assets/core/common/js/toggleMenu.js')->appendTo('head')->before('/assets/vendor/react/react-with-addons.js')->load();
-        XeFrontend::js('/assets/core/common/js/temporary.js')->appendTo('head')->before('/assets/vendor/react/react-with-addons.js')->load();
-        XeFrontend::js($plugin->assetPath().'/service.js')->appendTo('head')->load();
+        $this->loadDependencies();
+        $this->initAssets();
+
+        $props = [
+            'targetId' => $target->getUid(),
+            'instanceId' => $instanceId,
+            'targetAuthorId' => $target->getAuthor()->getId(),
+            'config' => [
+                'reverse' => $config->get('reverse'),
+                'editor' => null,
+            ]
+        ];
+
+        /** @var \Xpressengine\Editor\AbstractEditor $editor */
+        $editor = $config->get('useWysiwyg') ? XeEditor::get($instanceId) : null;
+
+        if ($editor) {
+            $editor->setArguments(false);
+
+            $props['config']['editor'] = [
+                'name' => $editor->getName(),
+                'config' => $editor->getConfigData(),
+                'tools' => $editor->getTools(),
+            ];
+        }
 
-//        $skin = Skin::getInstance($plugin->getId());
         $skin = XeSkin::getAssigned($plugin->getId());
         $view = $skin->setView('container')->setData(compact('config'))->render();
 
-        $view = View::make(sprintf('%s::views.uio', $plugin->getId()),
-            array_merge(compact('instanceId', 'target', 'config'), ['inner' => $view])
-        )->render();
+        $view = View::make(sprintf('%s::views.uio', $plugin->getId()), [
+            'target' => $target,
+            'editor' => $editor,
+            'inner' => $view,
+            'props' => json_enc($props)
+        ])->render();
 
         return $view;
     }
+
+    protected function loadDependencies()
+    {
+        XeFrontend::css('/assets/core/common/css/temporary.css')->load();
+        XeFrontend::js('/assets/core/common/js/temporary.js')->appendTo('head')->before('/assets/vendor/react/react-with-addons.js')->load();
+        XeFrontend::js('/assets/core/common/js/toggleMenu.js')->appendTo('head')->before('/assets/vendor/react/react-with-addons.js')->load();
+    }
+
+    protected function initAssets()
+    {
+        XeFrontend::css(app('xe.plugin.comment')->assetPath() . '/css/default.css')->load();
+        XeFrontend::js(app('xe.plugin.comment')->assetPath() . '/service.js')->appendTo('head')->load();
+
+        XeFrontend::translation(['xe::autoSave', 'xe::tempSave']);
+    }
 }
diff --git a/views/skin/user/default/container.blade.php b/views/skin/user/default/container.blade.php
@@ -1,25 +1,3 @@
-{{ XeFrontend::css(app('xe.plugin.comment')->assetPath() . '/css/default.css')->load() }}
-{{ XeFrontend::css('/assets/core/common/css/temporary.css')->load() }}
-
-{{ XeFrontend::js('/assets/core/common/js/toggleMenu.js')->appendTo('head')->load() }}
-
-@if($config->get('useWysiwyg'))
-{{ XeFrontend::css('/plugins/ckeditor/assets/ckeditor/xe3.css')->load() }}
-
-{{ XeFrontend::js([
-    '/assets/vendor/jQuery-File-Upload/js/vendor/jquery.ui.widget.js',
-    '/assets/vendor/jQuery-File-Upload/js/jquery.iframe-transport.js',
-    '/assets/vendor/jQuery-File-Upload/js/jquery.fileupload.js',
-    '/plugins/ckeditor/assets/ckeditor/ckeditor.js',
-    '/plugins/ckeditor/assets/ckeditor/styles.js',
-    '/plugins/ckeditor/assets/ckeditor/xe3.js',
-    '/plugins/ckeditor/assets/plugins/append.js'
-    ])->appendTo('body')->load() }}
-@endif
-
-{{ XeFrontend::translation(['xe::autoSave', 'xe::tempSave']) }}
-
-
 <div class="comment_header">
     <p class="total_count"><span class="total_count_num __xe_comment_cnt">0</span>{{ xe_trans('xe::ea') }} {{ xe_trans('xe::comment') }}</p>
 </div>

diff --git a/views/uio.blade.php b/views/uio.blade.php
@@ -1,18 +1,14 @@
+@if($editor)
+    {{ $editor->render() }}
+@endif
+
 <div id="comment-area-{{ $target->getUid() }}">
     {!! $inner !!}
 </div>
 
 <script type="text/javascript">
     $(function () {
-        var props = {
-            targetId: '{{ $target->getUid() }}',
-            instanceId: '{{ $instanceId }}',
-            targetAuthorId: '{{ $target->getAuthor()->getId() }}',
-            config: {
-                reverse: eval('({{ $config->get('reverse') ? 'true' : 'false' }})'),
-                useWysiwyg: eval('({{ $config->get('useWysiwyg') ? 'true' : 'false' }})')
-            }
-        };
+        var props = {!! $props !!};
         comment.urlPrefix = '{{ Config::get('xe.routing.fixedPrefix') }}';
         comment.init(props, $('#comment-area-{{ $target->getUid() }}')[0]);
     });