1. 程式人生 > >layui富文字編輯器前端無法取值

layui富文字編輯器前端無法取值

首先,需要簡單說下layui這個框架,個人覺得屬於那種比較好用的框架,包括他的極簡流暢的彈框,很適合那種主要寫後端的程式設計師和快速開發的團隊

本期主要講的是layui富文字編輯器這個東西,他的模式是在某個textarea的基礎上建立了一個富文字編輯器,也就是說你填寫在富文字編輯器的值其實是放在編輯器裡面的,並沒有放在之前的textarea中,你獲取textarea的值的時候需要先把富文字編輯器的值同步到之前的textarea中,然後才能通過textarea獲取對應的值

主要程式碼如下:

下圖是通過瀏覽器生成的js樣式:


通過上圖可以發現目前富文字編輯器的值與建立的textarea的值沒有關係

注意:我這裡用的彈出框動態渲染來做的,不管是靜態的還是動態的,一定要在富文字編輯器修飾完成之後才可以同步值,因為html他是按照從上到下的順序來載入的

如圖:需要再提交之前同步資料:  layedit.sync(indexs);

indexs  這個引數是建立富文字編輯器後生成的索引,只有通過他才可以取出富文字編輯器的值,

如果跟我一樣採用的是動態渲染最好把indexs定義成全域性的,不然 在yes這個方法中是拿不到indexs

然後就可以用id選擇器的val()屬性去獲取了。

還有一點就是執行上傳的 時候的返回值,一定要遵循他的規則:

"{\"code\":0,\"msg\":\"上傳成功
\",\"data\":{\"src\":\""+request.getContextPath() + "/upload/home/"+tempName+ "\"}}";
src後面的圖片路徑以自己的具體專案為主,這裡僅供參考

相關推薦

layui文字編輯前端無法

首先,需要簡單說下layui這個框架,個人覺得屬於那種比較好用的框架,包括他的極簡流暢的彈框,很適合那種主要寫後端的程式設計師和快速開發的團隊 本期主要講的是layui富文字編輯器這個東西,他的模式是在某個textarea的基礎上建立了一個富文字編輯器,也就是說你填寫在富文

Layui文字編輯,賦,樣式

<span id="body_app">                      <textarea id="demo" style="display: none;"></textarea>            </span>

解決layui文字編輯需要提交兩次才生效的問題

<textarea lay-verify="article_desc" name="content" id="demo" style="display: none;"> var fwb = layedit.build('demo'); form.verify({ articl

layui文字編輯layedit增加上傳視訊與音訊功能

改動效果: layui2.4.3並沒有視訊、音訊等上傳功能,不過還好,目前有一個基於layui2.4.3的layedit擴充套件,增加了視訊上傳、字型顏色等等。 首先去下載一個layedit擴充套件檔案:中轉站 根據說明替換layedit.js,直接呼叫就會出現上面的效果,注意,編

layui文字編輯表單提交獲取不到內容

form.verify({ content: function (value) { if (value.length > 500) { return '內容請輸入至多500個字元';

layui文字編輯注意點

點選開啟一個修改資訊的頁面,同時顯示已有的資訊,由於layui 富文字編輯器設定初始化必須在build之前,所有每次點選修改的時候只有第一次點選會build,猜測可能是快取問題,造成無法獲取到資料,原因還是因為資料必須在build之前被設定進去。禁用該頁面的瀏覽器快取即可。

springmvc和layui文字編輯實時上傳圖片功能實現

本文將介紹 springmvc 上傳功能實現,以及layui 前端外掛的使用,尤其是其富文字編輯器的上傳圖片介面的實現。 一、開發準備 1、layui 官網:http://www.layui.com/ 點選"立即下載"可以獲取前端框架,沒有使用過的朋友可以自行了解下。 下載

tp5 整合 layui文字編輯

一睹芳容 1 去官網:http://www.layui.com/     下載layui 1 2 3 4 5 6 7 8 9 10 11 12 13

前端框架Layui關於文字編輯layedit找不到或者setContent有問題

後臺請求能拿到資料,但是使用val()或者html()給富文字賦值時出現了問題。資料時有時無,最後去社群看到了setContent方法,但是使用又遇到了問題。 最後又去找了一下看到。要把layedit.js裡的setContent中的lyedit.sync改成this.sync

Kz.layedit-layui.layedit文字編輯拓展

摘要:   本外掛基於layui.layedit,增加了HTML原始碼模式,片插入功能新增alt屬性(layupload),視訊插入功能,全屏功能,段落格式,字型顏色設定,右鍵選單操作,插入錨點,水平線功能。 所有拓展功能選單按鈕圖示均引用自layui自帶圖示。 演示地址:kz.layedit &nb

layui 非同步提交文字編輯內容

<script> layui.use('layedit', function(){ var layedit = layui.layedit; var index = laye

前端文字編輯ckeditor的使用

一、匯入js檔案 <script src="js/plugins/ckeditor/ckeditor.js"></script> 將下載的檔案匯入相應html目錄下 二、html程式碼 <textarea rows="20" class="

前端入門-文字編輯(一)

背景需求 技術需求:擴充套件 富文字編輯器  功能 技術調研 目標:本著不重複造輪子,集中精力解決業務邏輯。其實主要是沒技術實力.... 方向:尋找開源的富文字編輯器; 發現 各個開源的都差不多(技術菜,看不出區別),傳統的編輯器太龐大,適合移動端的較少 結果:公司最近在

layui 整合 editor.md 文字編輯

前言 lyaui 是國產對後端程式設計師友好的前端UI框架,賢心大佬的作品,editor.md 是國產功能非常全面的Markdown富文字編輯器,pandao大佬的作品。但是目前,layui並沒有一款牛逼的富文字編輯器,本部落格介紹如何在layui中整合使用editor.md富文字編

解決百度文字編輯無法上傳視訊的問題

本文轉自:http://blog.csdn.net/qq_34787830/article/details/75092347 1、在配置檔案ueditor.config.js中,定位 //xss過濾白名單,即,whitList:{ },對 img: 增加 “_url” 屬性:  2、在下面的 vid

layui原始碼詳細分析系列之文字編輯模組

所謂的富文字編輯器就是內嵌在瀏覽器上、所見即所得的文字編輯器,它的形式如下: layui框架中內建了layedit模組,該模組就是富文字編輯器模組,在最近兩天中我自己使用原生js實現了簡易的富文字編輯器,具體效果如下: 首先說說這個demo的組織結構

summernote文字編輯實現圖片新增上傳和刪除圖片

summernote的基本使用 HTML程式碼 //div添加個id就可以 <div id="summernote" ></div> 然後JS操作 //例項化呼叫 var $summernote = $('#summernote').summernote(

百度文字編輯ueditor的使用、非空校驗、引用預定義模板

最近用到百度ueditor編輯器,遇到了很多問題,總結一下ueditor的使用、非空校驗、引用預先寫好的模板。 一、百度ueditor編輯器簡單使用: 1.在百度官網http://ueditor.baidu.com/website/download.html下載壓縮包,解壓之後整體拷

vue文字編輯Tinymce,功能齊全,對圖片等媒體資源操控性好,非常推薦!

使用步驟: 1.在index.html中引入js檔案: <body> <script src="./static/tinymce4.7.5/tinymce.min.js"></script> <div id="app"></div

bbs專案文字編輯實現上傳檔案到media目錄

media目錄是在project的settings中設定的,static目錄是django自己使用的靜態檔案的上傳目錄,media目錄是使用者自定義上傳檔案的目錄 # Django使用者上傳的檔案都放在media目錄下 MEDIA_URL = "/media/" MEDIA_ROOT = os.pat