作者 主題: html 可視化  (閱讀 15275 次)

0 會員 與 1 訪客 正在閱讀本文。

p9256

  • 懷疑的國中生
  • **
  • 文章數: 41
  • 性別: 男
    • 檢視個人資料
    • 網站目錄
html 可視化
« 於: 2010-12-13 18:45 »
hi
大家好

如何用PHP 或 python
寫可視化編輯的方式
就像是
<img src='img.jpg'>
會轉換成圖示
這要往哪個方向去找呢??

謝謝

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
回覆: html 可視化
« 回覆 #1 於: 2010-12-13 20:02 »
如何用PHP 或 python
寫可視化編輯的方式
就像是
<img src='img.jpg'>
會轉換成圖示
這要往哪個方向去找呢??

html wysiwyg editor ?

如果是的話, 用上面字串 google 看看

p9256

  • 懷疑的國中生
  • **
  • 文章數: 41
  • 性別: 男
    • 檢視個人資料
    • 網站目錄
回覆: html 可視化
« 回覆 #2 於: 2010-12-13 20:49 »
不知道要怎麼形容

大約就是將html 處理過後
直接貼上編輯器上 就會顯示 圖示
而不是html碼

謝謝

TyroneYeh

  • 俺是博士!
  • *****
  • 文章數: 2396
  • 性別: 男
    • 檢視個人資料
回覆: html 可視化
« 回覆 #3 於: 2010-12-14 06:35 »
看起來感覺就是「所見即所得」的編輯,跟 Y 大的意思一樣哩!
--
TyroneYeh

hikohan

  • 俺是博士!
  • *****
  • 文章數: 1288
    • 檢視個人資料
回覆: html 可視化
« 回覆 #4 於: 2010-12-14 09:01 »
最完美的wysiwyg

按下print screen後,剪下你需要的,然後當作圖貼上。(內建小畫家就可以啦)

XD
lifeIsFunWithPHP.

micmic3

  • 俺是博士!
  • *****
  • 文章數: 1692
    • 檢視個人資料
回覆: html 可視化
« 回覆 #5 於: 2010-12-14 09:11 »
最完美的wysiwyg

按下print screen後,剪下你需要的,然後當作圖貼上。(內建小畫家就可以啦)

XD
其實這個方法有時還不錯.....尤其是要將 excel 或 word 貼上網頁時
« 上次編輯: 2010-12-14 09:12 由 micmic3 »

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
回覆: html 可視化
« 回覆 #6 於: 2010-12-14 11:47 »
不知道要怎麼形容

大約就是將html 處理過後
直接貼上編輯器上 就會顯示 圖示
而不是html碼

樓主要不要先找點資料看看, 了解一下什麼是『wysiwyg 所見即所得』!?

p9256

  • 懷疑的國中生
  • **
  • 文章數: 41
  • 性別: 男
    • 檢視個人資料
    • 網站目錄
回覆: html 可視化
« 回覆 #7 於: 2010-12-14 15:09 »
謝謝大家回覆我

因該說我表達真的很不好
一開始有說 可無用php 或 python 的方式
我想知道wysiwyg的原理 然後是否可以用php 或 python 的方式來達成
這一方面要參考哪裡呢?
還是一個是瀏覽器端 跟一個是伺服器端 所以是無法達成的呢??

謝謝

hikohan

  • 俺是博士!
  • *****
  • 文章數: 1288
    • 檢視個人資料
回覆: html 可視化
« 回覆 #8 於: 2010-12-14 15:35 »
不行。

沒辦法。

請你放棄。

--

用了google doc的wy***,心得就是難用,該剪沒剪,還是自己用螢幕截圖。

你會比google團隊強嗎?也許有可能,再說吧。
lifeIsFunWithPHP.

fillano

  • 鑽研的研究生
  • *****
  • 文章數: 526
    • 檢視個人資料
回覆: html 可視化
« 回覆 #9 於: 2010-12-14 16:03 »
所見即所得編輯器,例如ckeditor, tinymce等,應該都是用Javascript+html做出來的,其實不太關PHP的事。
Sapere aude! Habe Mut, dich deines eigenen Verstandes zu bedienen! ist also der Wahlspruch der Aufklärung.

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
回覆: html 可視化
« 回覆 #10 於: 2010-12-14 17:05 »
謝謝大家回覆我

因該說我表達真的很不好
一開始有說 可無用php 或 python 的方式
我想知道wysiwyg的原理 然後是否可以用php 或 python 的方式來達成
這一方面要參考哪裡呢?
還是一個是瀏覽器端 跟一個是伺服器端 所以是無法達成的呢??


你是要在瀏覽器的網頁裡編寫文章時直接先看到效果? 還是編寫完送出後才看到效果?

如果是前者, 那就是要用 html wysiwyg editor
如果是後者, 那用什麼都沒差, 看你送出什麼內容給瀏覽器顯示

p9256

  • 懷疑的國中生
  • **
  • 文章數: 41
  • 性別: 男
    • 檢視個人資料
    • 網站目錄
回覆: html 可視化
« 回覆 #11 於: 2010-12-14 18:01 »

你是要在瀏覽器的網頁裡編寫文章時直接先看到效果? 還是編寫完送出後才看到效果?

如果是前者, 那就是要用 html wysiwyg editor
如果是後者, 那用什麼都沒差, 看你送出什麼內容給瀏覽器顯示

我複製 這段碼 <img src='http://phorum.study-area.org/Smileys/classic/cry.gif'>

貼上 可視化編輯器上 他不會顯示為圖示 只會顯示<img src='http://phorum.study-area.org/Smileys/classic/cry.gif'>

要如何複製html碼 貼上 可視化編輯器上 直接就顯示 是圖示

謝謝

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
回覆: html 可視化
« 回覆 #12 於: 2010-12-14 19:11 »
我複製 這段碼 <img src='http://phorum.study-area.org/Smileys/classic/cry.gif'>
貼上 可視化編輯器上 他不會顯示為圖示 只會顯示<img src='http://phorum.study-area.org/Smileys/classic/cry.gif'>
要如何複製html碼 貼上 可視化編輯器上 直接就顯示 是圖示

這個我就不清礎了, 幾年前試用過某幾套, 但是覺得不好用, 用不順手就沒再用
樓主可能需要自己爬一下編輯器的原始碼, 看看它是怎麼處理圖片的

fillano

  • 鑽研的研究生
  • *****
  • 文章數: 526
    • 檢視個人資料
回覆: html 可視化
« 回覆 #13 於: 2010-12-14 19:42 »
一般的可視化編輯器,都會提供原始碼編輯及可視化編輯(WYSIWYG)的編輯模式。你在可視化編輯模式中貼上一段html原始碼,他會特別把他「修改」成純文字。如果你是要貼上html原始碼,那你要進入原始碼編輯模式。
Sapere aude! Habe Mut, dich deines eigenen Verstandes zu bedienen! ist also der Wahlspruch der Aufklärung.

p9256

  • 懷疑的國中生
  • **
  • 文章數: 41
  • 性別: 男
    • 檢視個人資料
    • 網站目錄
回覆: html 可視化
« 回覆 #14 於: 2010-12-14 19:55 »
一般的可視化編輯器,都會提供原始碼編輯及可視化編輯(WYSIWYG)的編輯模式。你在可視化編輯模式中貼上一段html原始碼,他會特別把他「修改」成純文字。如果你是要貼上html原始碼,那你要進入原始碼編輯模式。

我就是想簡化這樣 直接貼上html原始碼,但不透過進入原始碼編輯模式

原先以為會有什麼函式可以轉的

那目前也只能看看可視化編輯器怎麼轉的了

真的謝謝大家的幫忙

fillano

  • 鑽研的研究生
  • *****
  • 文章數: 526
    • 檢視個人資料
回覆: html 可視化
« 回覆 #15 於: 2010-12-15 08:38 »
建議你用「html」+「execCommand」當作關鍵字搜尋一下,會有很多相關資料;另外會跟編輯器相關的應該還有range + selection。幾年前看過HTMLArea的原始碼,印象中他是用一個textarea做原始碼輸入,用一個iframe做可視化編輯。不過很久沒有研究過,不知道目前比較常見的編輯器怎樣實作。

如果想要了解編輯器的原理,這篇是不錯的進入點: http://dev.opera.com/articles/view/rich-html-editing-in-the-browser-part-1/

總之,編輯器架構相當複雜,要用某個「函式」做到你想要的功能,應該有困難。如果您研究出來,也分享一下吧。
Sapere aude! Habe Mut, dich deines eigenen Verstandes zu bedienen! ist also der Wahlspruch der Aufklärung.

TyroneYeh

  • 俺是博士!
  • *****
  • 文章數: 2396
  • 性別: 男
    • 檢視個人資料
回覆: html 可視化
« 回覆 #16 於: 2010-12-15 09:11 »
你這個應該是做自動預覽的功能吧?

最近有看到類似的功能,如下網址,在新增評語的地方輸入,下方自動會有預覽
http://trac.edgewall.org/demo-0.12/ticket/1502#comment

例如輸入這個資訊,他下方就會出現圖示
代碼: [選擇]
test [[Image(http://www.edgewall.org/chrome/common12/trac_logo_mini.png)]]
--
TyroneYeh

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
回覆: html 可視化
« 回覆 #17 於: 2010-12-15 09:55 »
你這個應該是做自動預覽的功能吧?

樓主應該是要能輸入 html 文章內容有 <img> 時可以自動轉成圖片顯示
一般的 html wysiwyg editor 貼圖都是要另外輸入 url
如果編輯器沒支援這功能, 應該是要直接改編輯器
在貼上資料時搜尋是否有 <img> 標籤
然後轉成 html wysiwyg editor 接受的格式

p9256

  • 懷疑的國中生
  • **
  • 文章數: 41
  • 性別: 男
    • 檢視個人資料
    • 網站目錄
回覆: html 可視化
« 回覆 #18 於: 2010-12-15 19:14 »

樓主應該是要能輸入 html 文章內容有 <img> 時可以自動轉成圖片顯示
一般的 html wysiwyg editor 貼圖都是要另外輸入 url
如果編輯器沒支援這功能, 應該是要直接改編輯器
在貼上資料時搜尋是否有 <img> 標籤
然後轉成 html wysiwyg editor 接受的格式

我原本是想說 任何一段html 直接貼上就可以 顯示
<img> 是我拿來當的例子

建議你用「html」+「execCommand」當作關鍵字搜尋一下,會有很多相關資料;另外會跟編輯器相關的應該還有range + selection。幾年前看過HTMLArea的原始碼,印象中他是用一個textarea做原始碼輸入,用一個iframe做可視化編輯。不過很久沒有研究過,不知道目前比較常見的編輯器怎樣實作。

如果想要了解編輯器的原理,這篇是不錯的進入點: http://dev.opera.com/articles/view/rich-html-editing-in-the-browser-part-1/

總之,編輯器架構相當複雜,要用某個「函式」做到你想要的功能,應該有困難。如果您研究出來,也分享一下吧。

昨天有用firefox 的 firebug 看了一下也是看到用一個iframe

真是謝謝大家的幫忙

TyroneYeh

  • 俺是博士!
  • *****
  • 文章數: 2396
  • 性別: 男
    • 檢視個人資料
回覆: html 可視化
« 回覆 #19 於: 2010-12-18 10:24 »
markItUp 編輯器的功能,可以看看參考看看!! 輸入界面是 html,他可以自動預覽! 感覺還不錯
--
TyroneYeh

p9256

  • 懷疑的國中生
  • **
  • 文章數: 41
  • 性別: 男
    • 檢視個人資料
    • 網站目錄
回覆: html 可視化
« 回覆 #20 於: 2010-12-18 21:17 »
markItUp 編輯器的功能,可以看看參考看看!! 輸入界面是 html,他可以自動預覽! 感覺還不錯

感覺上還不錯 謝謝你

see7di

  • 懷疑的國中生
  • **
  • 文章數: 51
  • 性別: 男
    • 檢視個人資料
    • http://7di.net
回覆: html 可視化
« 回覆 #21 於: 2010-12-20 19:23 »
不知道你已經找到了沒有,我自己開發了一個,你可以看一下
http://hi.baidu.com/see7di/blog/item/e4881a24623f4e2dd40742a8.html

如果有需要那你就mail我

see7di

  • 懷疑的國中生
  • **
  • 文章數: 51
  • 性別: 男
    • 檢視個人資料
    • http://7di.net
回覆: html 可視化
« 回覆 #22 於: 2010-12-30 18:26 »
你看看這個吧,這個在全球比較出名,支持多國語言,支持自己定制tools,支持一個頁面放置多個editor,而且open source

這是他的demo,你可以從他的網站download
http://ckeditor.com/demo