INYMCE 復制WORD里面帶圖文的文章,圖片可以直接顯示,使用TINYMCE編輯器從WORD保持原格式復制粘貼的辦法,VUE項目中的TINYMCE富文本編輯器如何從WORD中粘貼圖片上傳到七牛云,富文本插件TINYMCE使用CTRL+V粘貼圖片上傳到遠程服務器,關于tinymce粘貼圖片,粘貼word,一鍵導入word,粘貼word內容,網上能找到的方案不是特別多,都是通過HTML5提供的API來實現的。
粘貼word內容,粘貼word圖片,粘貼word圖文,
之前在網上也找過相關的資料,論壇里面也有網友交流過,也加過一些QQ群和微信群,但是結果都不太令人滿意。網上的文章基本上提了一些開源方案,項目組在評估過程中發現這些開源方案現在基本上都沒有人維護了,而且也聯系不到開發人員,項目組這邊不太敢用。產品不是我們公司自己開發的,如果遇到問題的話公司這邊要花很多成本來解決,客戶如果在使用過程中遇到問題的話也不好解決,如果客戶提出了定制開發和自定義的業務需求怎么辦,不能夠提供技術支持,也沒有維護服務,用的不放心。
大部分文章和回復都不太靠譜,基本上都是沒有實際的項目應用經驗。
復制word內容然后粘貼到tinymce富文本編輯器中,word里面的圖片自動上傳到服務器中,返回圖片和文字HTML,保留word文字的樣式,字體大小,字體顏色。
可以用快捷鍵(Ctrl+V)操作,
用戶發布新聞的時候是從word里面復制圖片和文字,然后將word圖文內容粘貼到web富文本編輯器中,希望能夠將word的圖片自動上傳到服務器中,服務器地址能夠自定義,
后端的話需要支持任意開發語言,比如ASP,ASP.NET,JSP,PHP,PYTHON等。只要是基于標準HTTP協議的都要支持。如果能夠不裝控件最好,
下載示例:
https://gitee.com/xproer/wordpaster-php-tinymce5x
將插件目錄復制到項目中
引入插件JS
初始化插件
添加快捷鍵(Ctrl + V)
添加插件
添加到工具欄
效果
若是要求不裝插件請使用zyOffice
http://www.ncmem.com/doc/view.aspx?id=8be16bc1ba8b4af9b38f33ba26d641f3
訂閱版報價單:https://drive.weixin.qq.com/s?k=ACoAYgezAAw70JsA8m
政企版報價單:https://drive.weixin.qq.com/s?k=ACoAYgezAAwuqJtN30#/
年費版報價單:https://drive.weixin.qq.com/s?k=ACoAYgezAAwFouDIB4#/
OEM版報價單:https://drive.weixin.qq.com/s?k=ACoAYgezAAwV00mQSY
產品源代碼:https://drive.weixin.qq.com/s?k=ACoAYgezAAwz13B5Tr
片
當我們在制作頁面的時候,通常會遇到圖片的三種表現形式,如下:
1、內容圖片
內容圖片是頁面中真正的內容,沒有內容圖片,就無法完整的理解頁面內容。如淘寶網上的商品展示圖片,這些圖片是網頁的一部分,它們能幫助你決定這個頁面的內容是否是你需要的。
內容圖片
2、布局圖片
布局圖片出現在頁面背景中,要想理解頁面的內容,它們不是必須的。如蘋果官網的這個圖片,沒有這個圖片也能理解頁面上文字描述的內容是什么意思。
布局圖片
3、交互圖片
圖中用紅色框起來的圖片會給你瀏覽頁面的時候帶來一些幫助,如搜索圖片,一看到就知道這里可以搜索想要的東西,購物車圖片可以看到選購的產品,箭頭圖片點擊可以看到更詳細的產品等。
交互圖片
在HTML中我們用 img 標簽創建圖片,英文是image的縮寫。
<img src="" alt="">
內容圖片
布局圖片是在CSS中被創建出來的,使用CSS中的background屬性,如:
1)background-color 定義背景顏色,設置背景圖片時,要始終設置背景顏色,確保背景圖片沒有成功時會顯示一個背景顏色
2)background-image 可以指向一個相對路徑或者絕對路徑來添加圖片。
3)background-repeat可以設置背景是否平鋪在容器中,包含四個關鍵字:
4)background-position 屬性可以控制背景圖片顯示在什么位置,包含兩個關鍵字,如:
background-position:top left 設置圖片顯示在容器的左上角,第一個關鍵字可以是top、center、bottom,第二個關鍵字可以是left、center、right
CSS中和背景相關的屬性可以簡寫在一行中,如:
background: #FF1298 url(images/logo.png) center right no-repeat;
首先是圖片的顏色color,image,position,repeat,CSS屬性能用簡寫就盡量用簡寫,簡寫比分開寫性能更高。
布局圖片
Web上最常用的三種圖像格式
1)Jpeg 可以展示一張照片或者復雜圖像
2)png最適合展示網頁插畫、logo和網頁小圖標
3)gif適合展示網頁插畫、logo和網頁小圖標
建議:
一般情況下用戶交互圖片都是一些小圖標,所以使用png或gif作為用戶交互圖片;使用CSS的background屬性以背景圖片的形式為網頁添加用戶交互圖片;推薦把用戶交互圖片放在同一個文件中,可以提高網絡和服務器性能,如:
交互圖片
交互圖片
具體如何操作呢?后續教頭會通過視頻給大家詳細演示,請繼續關注。
天小胖在coding的時候,遇到一個問題,就是要使用一個動態的文本作為div的背景,想著使用絕對定位堆疊來實現,或者偽元素實現,終歸不夠優雅,直到看到張鑫旭大佬的這篇文章,只能說,很當優雅!
在實際開發中,有時候希望文字內容可以作為背景圖片顯示,一方面是希望利用背景圖片的優勢,例如可以平鋪,另外一方面是常見的替換元素不能使用偽元素創建文字,此時只能寄希望與背景圖。
關鍵如何把文字變成背景圖呢?
通常CSS開發人員的做法是把文字導出來轉換成圖片,然后作為背景圖顯示,但是這樣成本有些高,也不利于日后的維護。
這里給大家介紹一種實用的技術,可以讓文字作為CSS背景圖片。
SVG雖然是XML語言構成的,但是本質上就是一個圖像,是可以作為圖像使用的,例如:
<img src="zhangxinxu.svg">
此時的zhangxinxu.svg就是一個圖像,同樣的,也可以作為背景圖顯示,例如:
.example {
background: url(zhangxinxu.svg);
}
但是,這里的SVG文件都是獨立的SVG文件,和把文字導出成PNG圖片沒有任何區別,根本沒有意義嘛!
對的,請不用急,是這樣的,SVG作為一個矢量圖像,和通常的位圖有一點不一樣,那就是SVG圖像可以直接以源代碼的方式內聯在Web頁面中。
關于這個特性,可以參考我之前的這篇文章:“學習了,CSS中內聯SVG圖片有比Base64更好的形式 ? 張鑫旭-鑫空間-鑫生活”。
例如下面是一段顯示文本的SVG代碼:
<svg xmlns="http://www.w3.org/2000/svg">
<text>文字內容</text>
</svg>
是可以直接作為background-image使用的,例如:
.by-zhangxinxu {
background-image: url('<svg xmlns="http://www.w3.org/2000/svg"><text>文字內容</text></svg>');
}
由于安全性限制,目前需要對部分字符進行轉義,因此,實際的CSS代碼是這樣的:
.exmaple {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext%3E文字內容%3C/text%3E%3C/svg%3E");
}
相比PNG圖像的文字背景,使用SVG內聯的好處在于,我們可以輕松修改文字的內容,同時我們可以隨意設置文字的字號大小,顏色、描邊效果等等。
但是,每次都手寫一段SVG代碼好難哦,尤其很多前端小伙伴對SVG并不是很熟悉。
不要緊,考慮到這種情況存在,我專門做了一個生成SVG文字背景圖的工具。
您可以狠狠地點擊這里:文字轉SVG圖像在線轉換工具 ? 張鑫旭-鑫空間-鑫生活
界面截圖示意如下:
最上面是配置區域,可以設置作為背景的文字內容,可以設置文字的顏色、透明度以及位置等信息。
中間是代碼區,左側是原始SVG,可以點擊圖標下載SVG文件到本地;右側是轉義的可以直接內聯使用的SVG代碼,HTML和CSS中均可內聯使用。
最下面是預覽區域。
如果需要其他配置項
實際開發中的需求是千變萬化的,工具目前內置的配置項不一定能覆蓋所有的場景,此時可以這么處理,直接修改左側文本域中的SVG代碼,此時右側的轉義SVG代碼會自動同步,例如,如果我們希望背景文字帶有旋轉效果,這樣可以作為水印圖片使用,則可以在已經生成的SVG代碼中的元素上設置45度旋轉相關的代碼。
一種方法是直接在<svg>元素上設置傳統DOM元素的CSS style設置,例如:
另外一種方法就是<text>元素上使用SVG元素自動的transform屬性進行設置,但是SVG中的transform變換坐標和CSS是很不一樣的,直接<text transform="rotate(-45)">是不會有預期的旋轉效果的,因為默認SVG的變換中心點是左上角,因此,設置transform="rotate(-45)"會讓文字不可見。
關于SVG的transform變換坐標體系可以參考我之前寫的這篇文章:“理解SVG transform坐標變換”
<text>元素也能圍繞中心點變換有2個方法,一種是使用translate()函數先偏移、然后再旋轉,然后在偏移復原,這種方法啰嗦了一點,另外一種方法就是使用SVG中rotate()函數的可選參數,也就是第2個參數,就是可以指定旋轉的中心點坐標,這個特性SVG獨有,Canvas中是沒有的。
代碼演示如下截圖所示:
其中,可以看到專門設置了SVG元素的width寬和height高,因為如果不設置,按照目前的CSS background-size的尺寸渲染規范,SVG的尺寸會采用容器的尺寸,rotate()函數的第2個參數就需要設置為容器元素的寬高的一半才能讓文字居中旋轉。
更新于 2022-01-25
dominant-baseline="middle" 只是近似垂直居中,如果 SVG 圖片高度較小,會看到往上偏移了一點距離,此時可以試試修改為 dominant-baseline="central"。
這里拋磚引玉,舉幾個使用文字作為背景圖的例子。
例如為防止截圖,會給頁面,或者聊天軟件背景等增加文字水印。
以前幾乎都是通過生成一個專門的PNG圖片實現,現在可以直接代碼內聯,例如點擊下面這個按鈕,大家就可以看到我這篇文章的實時水印效果了。
不要害怕,用力點擊我
相關CSS代碼如下所示:
.target {
background: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-size='14' fill-opacity='0.5' text-anchor='middle' dominant-baseline='middle' transform='rotate(-45, 100 100)'%3Ezhangxinxu.com%3C/text%3E%3C/svg%3E");
}
截圖效果如下所示:
常規的占位符都是在輸入框的左上方,或者右上方,如果我們希望提示的占位符在右下角,則就可以使用這里的文本圖像技術實現。
比方說下面這個多行文本域輸入框,當你輸入內容,右下角的提示內容就會消失,沒有內容的時候就又會顯示(實時效果,可以親自體驗下)。
相關HTML和CSS代碼如下所示:
<textarea class="custom-placeholder" required></textarea>
.custom-placeholder {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='100%25' y='96%25' font-size='12' fill='%23a2a9b6' font-family='system-ui, sans-serif' text-anchor='end'%3E富強民主文明和諧美麗%3C/text%3E%3C/svg%3E") no-repeat right 10px bottom 5px;
}
.custom-placeholder:valid {
background: none;
}
因為這里的文本是右對齊,下對齊,因此,設置text-anchor屬性值是end,同時x, y屬性值都是100%或者接近100%。
HTML5 <video>元素中的視頻如果因為地址錯誤等原因無法播放,是沒有辦法像普通元素那樣寫入一段錯誤提示文字,因為<video>元素是替換元素,寫在標簽里面的內容都會被忽略。
此時,可以讓視頻播放出錯的時候以背景圖的形式顯示文字就可以了。
比方說下面這個實時例子,就是一個故意寫錯了地址的MP4視頻,大家可以看到“視頻無法預覽”的白色提示文字,就是使用這篇文章提供的技術實現的。
相關代碼如下所示:
<video src="xxx.png" type="video/mp4" width="360" height="240" onerror="this.classList.add('error')"></video>
video.error{
background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-size='14' fill='%23ffffff' font-family='system-ui, sans-serif' text-anchor='middle' dominant-baseline='middle'%3E視頻無法預覽%3C/text%3E%3C/svg%3E") no-repeat center;
}
簡單易懂體驗絕佳老少皆宜。
如果想讓文字內容直接作為背景圖片顯示,可以使用SVG元素作為中間橋梁實現。
關鍵問題是SVG元素的獲得不太容易,因此,我就專門給大家開發了一個工具,通過簡單配置實現想要的CSS文字背景代碼。
同時介紹了如果通過修改左側輸入框得到自定義的文字背景效果。
最后,介紹了3個具有代表性的案例,展示了文字作為背景圖片的一些妙用,拋磚引玉,希望可以啟發大家在實際開發中的應用。
OK,技術本身并不難,難的是當遇到類似場景的時候可以想到可以直接使用代碼實現,而不是導出圖片。
好,以上就是本文的全部內容,感謝您的閱讀,如果您覺得本文內容還挺有幫助的,歡迎分享。
本文轉自張鑫旭大佬的分享,原文地址:如何讓文字作為CSS背景圖片顯示? ? 張鑫旭-鑫空間-鑫生活,張大佬經常分享一些很不錯的css idea,推薦大家經常刷刷他的博客,他的書也不錯,大家也可以買來讀一讀!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。