layui富文字編輯器注意點
點選開啟一個修改資訊的頁面,同時顯示已有的資訊,由於layui 富文字編輯器設定初始化必須在build之前,所有每次點選修改的時候只有第一次點選會build,猜測可能是快取問題,造成無法獲取到資料,原因還是因為資料必須在build之前被設定進去。禁用該頁面的瀏覽器快取即可。 火狐不需要。ie chrome 都需要禁用,這可能是因為thymeleaf的問題 thymeleaf頭是 模板是html5格式,非嚴格thymeleaf html5驗證。
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1">。
新增頭 或者在url後新增隨機數Math.random()
<meta http-equiv="cache-control" content="no-cache,no-store, must-revalidate" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
下面是 thymeleaf 中 js 初始化必須是在構建富文字之前,否則無效
[javascript] view plain copy- <script type="text/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