Inline Editing not work on Built Application

[baotnq]

Mô tả

• Với template Pillar (có cấu hình inline edit), khi dùng EasyBuilder bản source thì khi Right Click 2 lần thì inline editing cho các trường đã thiết lập => OK
• Nhưng với bản build (.exe), có thể thử với bản mới nhất vừa upload lên easywebhub.com, thì inline editing không hoạt động
• test lại xem có đúng ko và fix lại dùm nghe.

[nemesisqp]

Bản beta-10 đó sau master tới 21 commit mà changes

[baotnq]

@nemesisqp do tránh phải đổi download url trên web nên anh replace bản beta-10 thành bản build mới nhất, mà vẫn bị vậy.

Em thử lại bằng cách build .zip trên local, và test luôn dùm anh nghe.

[nemesisqp]

fix

 tag/bottom-bar.tag | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/tag/bottom-bar.tag b/tag/bottom-bar.tag
index baa3827f..da891f3c 100644
--- a/tag/bottom-bar.tag
+++ b/tag/bottom-bar.tag
@@ -216,6 +216,8 @@
             me.output.innerHTML = '';
             me.webview.src = ewhDataUri;

+            let isAsarMode = process.mainModule.filename.indexOf('app.asar') !== -1;
+            let prefixPath = isAsarMode ? process.resourcesPath + '\\app.asar\\' : '';
             me.webview.addEventListener('did-finish-load', Promise.coroutine(function*(event) {
                 try {
                     console.log('webpage finished load, start injecting');
@@ -224,13 +226,13 @@

                     if (!isJqueryExists) {
                         console.log('injecting jQuery');
-                        yield executeJavaScript((yield Fs.readFileAsync('assets/js/jquery.min.js')).toString());
+                        yield executeJavaScript((yield Fs.readFileAsync(prefixPath + 'assets/js/jquery.min.js')).toString());
                     }

                     // inject medium inline editor
-                    me.webview.insertCSS((yield Fs.readFileAsync('assets/css/medium-editor.min.css')).toString());
-                    me.webview.insertCSS((yield Fs.readFileAsync('assets/css/medium-editor-default.min.css')).toString());
-                    yield executeJavaScript((yield Fs.readFileAsync('assets/js/medium-editor.js')).toString());
+                    me.webview.insertCSS((yield Fs.readFileAsync(prefixPath + 'assets/css/medium-editor.min.css')).toString());
+                    me.webview.insertCSS((yield Fs.readFileAsync(prefixPath + 'assets/css/medium-editor-default.min.css')).toString());
+                    yield executeJavaScript((yield Fs.readFileAsync(prefixPath + 'assets/js/medium-editor.js')).toString());

                     setTimeout(function () {
                         executeJavaScript(`(function defer() { if (!window.MediumEditor) {

[baotnq]

@nemesisqp cái này push lên chưa em, sao anh tìm ko thấy trên github?

[baotnq]

@nemesisqp cái này anh build, test lại OK với default pillar website của em.

Tuy nhiên khi áp dụng với website khác, trang chi tiết thì không chạy được. https://github.com/easywebhub/newspaper/commit/db04c2f37986fe2c4466b5e4da037c3efeaee650

Hình chụp

Em xem và fix dùm nghe.

[baotnq]

@nemesisqp hỗ trợ dùm anh nghe, cảm ơn ku!

[nemesisqp]

done in easywebhub/easyapp@28e25b804465c630f2f1dc4ed4d75f395926fbc6 sẽ còn case tên file content có khoảng trắng

[baotnq]

anh test lại còn bị 2 lỗi như sau:

• trang chủ, bị lỗi như hình

• trang chi tiết, khi hệ thống lưu lại, thì phần contents, của file .md bị xoá mất, trở thành undefined.

em pull các repo newspaper trên, và test lại dùm anh nghe.

[nemesisqp]

fixed in easywebhub/easyapp@a573e088c832ee1ace2693c7cde26437b7aed12a

[baotnq]

@quocvo thử test lại tính năng trên để hiểu trước nghe. Inline Editing là tính năng cho phép, Right Click 2 lần vào text trên phần Preview nằm trong EasyBuilder, sẽ cho phép điều chỉnh và lưu lại luôn.

Tuy nhiên muốn có tính năng này, thì phần binding trong HTML, CSS phải có thêm các thông số, ví dụ data-ea-type, data-eq-object-patch, ...

Trong file layout, ví dụ index.html, gõ F1, chọn 1 biến có prefix :DATA ví dụ title, sẽ thấy sinh ra thông số này.

Em đọc kĩ phần comment trên để thử với website mẫu luôn nghe.

[baotnq]

@nemesisqp phần Preview trong EasyBuilder, khi Inline Edit trang chi tiết, thì Browser Reload sẽ load lại trang chủ, mất công vô lại. Giờ muốn điều chỉnh như thế này được ko

1. khi Reload sẽ giữ nguyên Url hiện tại
2. trên sidebar chọn vào 1 bài viết, có slug là bai-viet-xxx thì Preview sẽ load trang tương ứng, ví dụ http://localhost:3000/bai-viet-xxx

Cái 2. nếu mất thời gian, thì hướng dẫn cho @quocvo nắm cách vận hành, bạn ấy sẽ tìm cách thực hiện

[nemesisqp]

Cái review đó là 1 cái webview api nó có getUrl, setUrl thì set thẳng attribute src là được hoặc executeJavascript code change location với nó có mấy cái event navigate nên tùy muốn custom thì code tiếp thôi cái webview nó nằm trong file bottombar.tag cái file list bên trái thì chính là file file-list-flat.tag user click vào list item -> tính ra cái slug -> raise event cross tag cho bottom-bar setUrl cũng là 1 hướng Cái reload giữ url hiện tại thì nhìn api đoán đoán thì tạm thấy 2 hướng:

1. là khi inline edit trước khi write file content gọi pause api của browserSync, ghi file xong call resume nhưng se phải thêm code message cross process giữa app với browserSync trong process gulp, hướng này nhìn api đoán thôi test cái pause voi resume mới chắc được
2. disable hoàn toàn tính năng refresh của browserSync khi có edit thi gọi webview refresh, webview get set url src thì đều được mất công handle event edit tay thôi

[quocvo]

trên sidebar Cái này ở chỗ nào trên app vậy anh

[quocvo]

Mình có tool/script nào để insert inline edting vào tất cả các tag trong web chưa? Ý là khi mình edit bằng app thì trước khi edit nó tự động chèn những thuộc tính đó zô để enable inline editing rồi khi done tất cả thì sẽ remove mấy cái đó đi trả lại như ban đầu.

[baotnq]

@quocvo em xem mô tả bên trên của @nemesisqp gần nhất, có hiểu gì ko @baotnq : Cai' 2 thihieu idea con cai 1 thì chưa hiểu "nhưng se phải thêm code message cross process giữa app với browserSync trong process gulp"

[nemesisqp]

sidebar là cái list file ben trái ấy, chrome debugger inspect la thấy tên tag thôi, app chỉ mới dump insert mấy cái thuộc tính thôi muốn đi xa thêm phải chọc cái monaco editor