layui富文字編輯器注意點

點選開啟一個修改資訊的頁面，同時顯示已有的資訊，由於layui 富文字編輯器設定初始化必須在build之前，所有每次點選修改的時候只有第一次點選會build，猜測可能是快取問題，造成無法獲取到資料，原因還是因為資料必須在build之前被設定進去。禁用該頁面的瀏覽器快取即可。火狐不需要。ie chrome 都需要禁用，這可能是因為thymeleaf的問題 thymeleaf頭是模板是html5格式，非嚴格thymeleaf html5驗證。

新增頭或者在url後新增隨機數Math.random()

下面是 thymeleaf 中 js 初始化必須是在構建富文字之前，否則無效

[javascript] view plain copy

<script type="text/javascript"

th:inline="javascript">
/* 只使用jquery */
layui.use(['jquery','layer','form'],function(){
var form = layui.form
var $ = layui.jquery;
$(document).ready(function(){
var id = [[${#httpServletRequest.getParameter('id')}]]; //獲取傳過來的id值
$.ajax({
url: "../admin/blog/get" ,
data: {'id':id} ,
type: "get" ,
dataType:'json',
success:function(result){
if([[result.success]]){
//location.reload();
//已經到了這步了。
var index = layer.load(2, {time: 5*1000}); //又換了種風格，並且設定最長等待5秒
/* var resultt = eval("(" + result.responseText + ")"); */
/* result = JSON.parse(result.responseText); */
$("#title").val(result.title);
$("#keyWord").val(result.keyWord);
$("#blogTypeId").val(result.blogType.id);
form.render('select'); //重新整理select選擇框渲染
$("#LAY_demo_editor").val(result.content);
layer.close(index);
}else{
layer.msg("載入失敗！");
}
} //end success
});//end ajax
}); //end $()
});
</script>
<script th:inline="javascript" type="text/javascript">
/*<![CDATA[*/
layui.use(['form', 'layedit', 'laydate', 'jquery', 'layer'],
function() {
var form = layui.form,
layer = layui.layer,
layedit = layui.layedit,
laydate = layui.laydate,
$ = layui.jquery;
//上傳圖片,必須放在建立一個編輯器前面
layedit.set({
uploadImage: {
url: '../uploadFile'//介面url
,
type: 'post'//預設post
}
});
//建立一個編輯器 id=LAY_demo_editor
var editIndex = layedit.build('LAY_demo_editor');
//自定義驗證規則（只要非空即可）
//監聽提交
form.on('submit(demo1)',
function(data) {
//獲取部落格標題
var title = data.field["title"]
//獲取部落格類別id
var blogTypeId = data.field["blogTypeId"]
//獲取部落格內容帶標記
var content = layedit.getContent(editIndex)
//擷取部落格前155字元作為部落格簡介
var summary = layedit.getText(editIndex).substr(0, 155);
//部落格關鍵詞
var keyWord = data.field["keyWord"]
//獲取部落格內容不帶標籤純文字
var contentNoTag = layedit.getText(editIndex) ;
$.ajax({
async: false,
url: '../admin/blog/save',
data: {
//thymeleaf獲取request引數id值
'id': [[${#httpServletRequest.getParameter('id')}]],
'title': title,
'blogType.id': blogTypeId,
'content': content,
'summary': summary,
'keyWord': keyWord,
'contentNoTag': contentNoTag
},
type: 'post',
success: function(result) {
if ([[result.success]]) {
layer.alert('修改成功！', {
title: '系統提示',
icon: 6,
},
function(index) {
//下拉框不會清空，需要手動設值，設定value==selected的為預設選中
layer.close(index); //關閉並回到管理頁面
window.location.href = '/views/blogManage'
});
} else {
layer.alert('修改失敗。。', {
title: '系統提示',
icon: 5,
},
function(index) {
location.reload() //重寫載入表格
//下拉框不會清空，需要手動設值，設定value==selected的為預設選中
$("#blogTypeId").val("selected");
layer.close(index); //關閉重新回撥修改頁面
window.location.href = '/views/modifyBlog'
}); //end layer.alert
} //end else
} //end success
}); //end ajax
        returnfalse

相關推薦

layui富文字編輯器注意點

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

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

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

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

Layui富文字編輯器，取值，賦值，樣式

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

tp5 整合 layui富文字編輯器

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

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

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

vue 整合ueditor（百度富文字編輯器）以及使用後端Java上傳圖片到伺服器，特別注意的大坑

1.import 引入ueditor時，在封裝元件中引入，不要在mian.js內引入，在main.js內引入會造成 1.Uncaught SyntaxError: Unexpected token : 這種錯誤，屬於是跨域問題，目前不清楚是什麼原因和原理，

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

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

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

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

layui 整合 editor.md 富文字編輯器

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

富文字編輯器CKEDITOR使用注意事項，Ajax回撥

先簡述下，寫這篇文章的原因，用了ckeditor富文字編輯器，獲取值的時候，總是空值。先說下，用法： 1、從網上下載ckeditor的相關檔案： 2、在介面上呼叫js檔案 <script src="<%=Request.Appli

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

bbs專案引入富文字編輯器和處理xss攻擊和文章預覽

一、富文字編輯上傳文章和圖片富文字編輯器我們使用kindeditor，我們首先去官網下載，然後解壓，放到我們的static的目錄中然後我們在html中這樣使用富文字編輯器 <!DOCTYPE html> <html lang

layui富文字編輯器注意點

相關推薦