WYSIWYG - 將工具欄中的小部件拖放到畫布中

我試圖創建一個基於Web的WYSIWYG編輯器，它由一個畫布和一個工具欄組成，例如文本對象，形狀對象，線條對象，圖像對象，視頻對象和照片庫對象。一個人可以點擊並拖動工具欄中的對象並將其放入畫布區域。一旦放置在畫布上，它們可以更改對象的屬性。他們可以改變的屬性是寬度，高度，顏色，Z指數等....WYSIWYG - 將工具欄中的小部件拖放到畫布中

有誰知道是否有一個現成的解決方案，我可以開始和自定義？如果沒有，那麼我應該知道哪些庫和技術可以從頭開始構建？

我主要是一個後端開發人員，所以我對HTML5和CSS3帶來的所有新東西的速度並不熟悉，所以不確定它們是否與我需要做的事情相關。

來源

2011-02-11 John

我們（@work）與帕多瓦大學（意大利 - 軟件工程課程）開展了一項旨在獲得網頁生成器的研究項目。這是一個所見即所得，你可以拖放工具欄中的小部件到畫布 :)不幸的是，用戶界面是意大利語，但代碼是非常好的。

這是一個開源項目，你可以看看@源。

已經使用的技術包括：

HTML5（<canvas>容易地表示形狀和容易放大/縮小）
的JavaScript/jQuery的
PHP（後端腳本保存/加載模板）

引用：http://sketchyoursite.sourceforge.net/（http://sourceforge.net/projects/sketchyoursite/）

編輯：另一種工具可幫助爲https://gomockingbird.com/mockingbird/

關於從頭開始，我建議你使用以下架構/技術：

HTML + CSS OBV的基本佈局（控件工具，畫布區域...）
噸的JS代表每個不同的對象。即你可以用一個純JS對象映射一個特定的小部件，這個JS對象可能有一些屬性。當您單擊畫布區域內的對象時，將呈現這些道具。當你想在區域內拖動一個對象時，調整它的大小等等，你應該使用一個js庫（我個人更喜歡mootools，因爲它通過Class系統簡化了OO）。
保存（XML，Json..DB？）和加載的服務器端腳本（Php，ruby，java ...）。

來源

2011-02-11 21:39:48 stecb

感謝，通過查看這些工具，我意識到這並不難，也創建了我自己的wysiwyg編輯器。 – John 2011-02-17 19:07:27

檢查http://fabric.js 我正在開發使用這種類似直徑，真棒支持DRAP降尺度圖工具

來源

2012-12-09 05:51:03 vinayrks

我最近碰到Hotglue迷迷糊糊的，它的工作原理一樣，但遺憾的是沒有畫布。我想他們（和我）會很樂意將它從div定位轉換到畫布，至少在他們的待辦事項清單中是一個遙遠的發佈。

來源

2013-02-02 13:40:02

WYSIWYG - 將工具欄中的小部件拖放到畫布中

回答

相關問題