當前位置:首頁 » 網頁前端 » 前端的富文本
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端的富文本

發布時間: 2023-08-24 03:58:48

『壹』 layui富文本上傳圖片後獲取不到焦點

layui富文慧謹本上傳圖片後獲取不到焦點通過以下方法解決。
1、使用spring3,springmvc,基碧攔前端layui,jdk7,tomcat7。
2、下載框架,引入js和css。
3、下載安裝3個必備的jar包,用於上傳圖片和json數據返回。1>:json-20131018.jar;搏胡2>:commons-fileupload-1.3.1.jar;3>:commons-io-2.2.jar

『貳』 前端用jQuery怎麼獲取到富文本ueditor web編輯器裡面的文字,圖片內容

UE.getPlainTxt() 可獲取到編輯器中的純文本內容,有段落格式

UE.getContentTxt() 可獲取到編輯器中的純文本內容,沒有段落格式;


ueditor 沒有提供直接獲取圖片的功能,可以UE.getContent() 獲取全部內容,使用正則表達式 篩選出圖片,我提供一個使用JAVA寫的篩選方法,前台js代碼類似:

Patternp_img=Pattern.compile("(<img[^>]+src\s*=\s*['"]([^'"]+)['"][^>]*>)");
Matcherm_img=p_img.matcher(content);
while(m_img.find()){
Stringimg=m_img.group(1);//m_img.group(1)為獲得整個img標簽m_img.group(2)為獲得src的值
}

可以打開ueditor.all.min.js 查看,裡面有所有支持的方法 注釋也都很明白

『叄』 富文本編輯器是什麼意思

富文本編輯器,Rich Text Editor, 簡稱 RTE, 是一種可內嵌於瀏覽器,所見即所得的文本編輯器。它是一種解決可一般的用戶不同html等網頁標記但是需要在網頁上設置字體的顏色、大小、樣式等信息問題一個文本編輯器。下面簡單的介紹一下富文本編輯器的用法和簡要的原理。

1、什麼是富文本編輯器?

拋開專業的定義,用自己的話來介紹一下到底什麼是富文本編輯器。先舉個簡單的例子,大家大多都使用過網上的一些博客系統或者論壇貼吧吧,那我們要發布一則文章或者消息的時候我們需要在後台設置一下這段文本的格式還有字體的大小粗細顏色等樣式,此時網頁上會有一個設置這些信息的菜單或者是一個網頁的文本編輯器,這個就是富文本編輯器的常見應用,如下圖:

富文本編輯器不同於我們平時的文本編輯器,但是其功能確實和我們的平時使用的word的是類似的,只不過富文本編輯器設置是解決不會編寫 HTML 的用戶並需要設置各種文本格式在我們的網頁上。

2、富文本編輯器的原理和應用

關於富文本編輯器的原理,一些人可能以為富文本編輯器的原理十分的復雜,事實上也並非如此,當然功能強大的編輯器自然會很難實現。網頁上的富文本編輯器的大致原理是使用JavaScript技術將用戶的輸入的內容和設置的樣式轉換為html、css等瀏覽器可以認識的代碼,其核心的實現技術就是JavaScript和html 、css等前端技術。

富文本編輯器的應用,比如做為一個網站的開發者,當我們需要一個發布文章的功能時候,用戶可能不知道html代碼,此時我們可以使用一些別人寫好的富文本編輯器嵌入到我們的程序中即可解決這一問題。

『肆』 請教前端達人,知乎的編輯器是怎樣實現這個功能的

在線富文本編輯器裡面,做以下操作:
選中一串文字,點擊「 B 」把它加粗。
把游標移到這串文字的中間,再點「 B 」。
輸入一些文字。
在大部分其他的編輯器裡面,到第二步的時候,剛才加粗的所有文字都回復了正常狀態:
step1: some bold text
step2: some bold text
step3: some inserted text bold text
而知乎的編輯器的效果是這樣:
step1: some bold text
step2: some bold text
step3: some inserted text bold text
從 HTML 上面看,它是把一個<b></b>節點拆成了三個節點:
<b>some</b>inserted text<b>bold text</b>.
問題是:在 contentEditable 上的編輯操作只能更新當前節點的文本內容,也就是說如果沒有 js 干預,效果是這樣:
<b>some inserted text bold text</b>
知乎的編輯器是怎樣完成分拆動作的?
監聽 keypress 事件?那輸入中文怎樣實現?
監聽 change ?

『伍』 前端用jQuery怎麼獲取到富文本ueditor web編輯器裡面的文字和圖片內容

在線文檔對UEditor說明不夠全面,收集了一些常用的方法和基本設置,以供參考。

1、創建編輯器

UE.getEditor('editor', {

initialFrameWidth:"100%" //初始化選項

})

精簡版

UE.getEditor('editor')

2、刪除編輯器

UE.getEditor('editor').destroy();

3、設置焦點

UE.getEditor('editor').focus();

4、獲取編輯器內容

UE.getEditor('editor').getContent()

5、編輯器是否有內容

UE.getEditor('editor').hasContents()

6、獲取編輯器內容純文本格式

UE.getEditor('editor').getContentTxt()

7、獲取帶格式的純文本

UE.getEditor('editor').getPlainTxt()

8、啟用編輯器

UE.getEditor('editor').setEnabled();

9、禁止編輯

UE.getEditor('editor').setDisabled('fullscreen');

10、獲取整個html內容

UE.getEditor('editor').getAllHtml()

11、常用設置

imageUrl:UEDITOR_HOME_URL + "../yunserver/yunImageUp.php", //圖片上傳介面

imagePath:"http://",

scrawlUrl:UEDITOR_HOME_URL + "../yunserver/yunScrawlUp.php",//塗鴉介面

scrawlPath:"http://",

fileUrl:UEDITOR_HOME_URL + "../yunserver/yunFileUp.php",//文件上傳介面

filePath:"http://",

catcherUrl:UEDITOR_HOME_URL + "php/getRemoteImage.php",//獲取遠程圖片介面

catcherPath:UEDITOR_HOME_URL + "php/",

imageManagerUrl:UEDITOR_HOME_URL + "../yunserver/yunImgManage.php",//圖片管理介面

imageManagerPath:"http://",

snapscreenHost:'ueditor..com',

snapscreenServerUrl:UEDITOR_HOME_URL + "../yunserver/yunSnapImgUp.php",//截圖介面

snapscreenPath:"http://",

wordImageUrl:UEDITOR_HOME_URL + "../yunserver/yunImageUp.php",//word圖片轉存介面

wordImagePath:"http://", //

getMovieUrl:UEDITOR_HOME_URL + "../yunserver/getMovie.php",//獲取視頻介面

lang:/^zh/.test(navigator.language || navigator.browserLanguage || navigator.userLanguage) ? 'zh-cn' : 'en',

langPath:UEDITOR_HOME_URL + "lang/",

webAppKey:"9HrmGf2ul4mlyK8ktO2Ziayd",

initialFrameWidth:860, //初始化寬度

initialFrameHeight:420, //初始化高度

focus:true //是否焦點

『陸』 ueditor富文本編輯器上傳圖片怎麼配置

1. 前端配置項
前端需要配置 serverUrl 參數,修改 ueditor.config.js 里的 serverUrl 參數,改成伺服器端路徑,參考:URL + 'php/controller.php'
2. 後端配置項
後端配置項在 php/config.json 里配置,不同的上傳有各自的配置項。
修改上傳圖片路徑的參數是 imagePathFormat ,改成你的圖片文件夾路徑即可。

『柒』 前端富文本如何分頁顯示

使用Spannable 設置樣式Spannable 可以對顏色和字體粗細等屬性進行樣式設置。首先使用 SpannableStringBuilder 構造文本內容,然後為文本設置 android.text.style 包中定義的樣式,常見的樣式有StrikethroughSpan、StyleSpan、ForegroundColorSpan等。例如,為某段文字內容加上帶顏色和刪除線的粗體樣式。最後,項目中用到了格式化字元串,所以只能採取第一種方式來避免樣式信息被清除。這里遇到一個非常奇葩的坑, fromHtml(String)無法正常顯示帶<strike>標簽的格式。解決辦法是結合使用spannable,這里通過其他span對象來確定樣式字元串的位置,然後採用方式進行處理。