layUI framework practical case series articles
- Layui framework practical case (21): What things are uploaded by layui (layui.upload component, file file domain, php background upload)
- Layui framework practical cases (20): common condition judgment and information display skills (picture preview, dynamic table, text message read and unread, link sharing, information desensitization, built-in frame page)
- Layui framework practical case (19): comprehensive application of layui-table module tables (filtering query, import and export, group text messaging, one-click review, photo display, privacy encryption)
- Layui framework practical case (18): Save draft and radio checkbox checkbox no focus attribute quick focus jump solution
- layui framework practical case (17): front-end and back-end solutions for flow loading document layui.flow components
- Layui framework practical case (16): xm-select drop-down multi-select plug-in practical record (remote search, filtering, page turning, radio selection, prompt text)
- Layui framework practical case (15): Solution to upload prompt 413 request entity too large pagoda configuration
- Layui framework practical case (14): Solution to the problem that echarts cannot be stretched and deformed to display normally when switching tabs
- Layui framework practical case (13): Use of colorpicker color picker
- Layui framework practical case (12): layui label input box inputTag
- Layui framework practical case (11): form custom validation rules
- Layui framework practical case (10): SMS verification code 60-second countdown
- layui framework practical case (9): layPage static data paging component
- Layui framework practical case (8): The web image cropping plug-in crops.js component realizes customized interception of uploaded images (including PHP backend)
- Layui framework practical case (7): time range selection and time processing solutions
- Layui framework practical case (6): Upload pictures and videos to automatically call the camera function of IOS or Android system
- Layui framework practical case (5): LayUI based on PHP backend uploads videos to Qiniu Cloud object storage and automatically transcodes
- Layui Framework Practical Case (4): Due to the content security policy, the pop-up layer modal box cannot display the WeChat official account article properly. Solution using window.open
- Layui framework practical case (3): Layui upload error request upload interface abnormal solution
- layui framework practical case (2): layui file upload PHP background parameter acquisition method and JSON return format
- Layui framework practical case (1): Solution of asynchronous loading of data in layui component table combined with dynamic page turning in PHP background
Other directories
- Code analysis of layui dynamic table page turning and search
- layui implements the combined functions of positioning, querying data and selecting and filtering
- Solution for interconnecting layui multiple file uploads with PHP backend
- Practical case of layui internal form interaction: automatically changing input content based on radio radio button
- Solution to layui checkbox checkbox selection and value acquisition
- Layui and weui combine the bottom selection and blocked solution of the mobile select form
Select to edit the echo content and event call
- LayUI framework practical case series articles
- html container code
- Rich text editing
- Encapsulate calling method
- Verify content
Layedit is a rich text editor based on the layui framework. It is suitable for background management systems, blog editing and other scenarios. It provides many practical functions, including but not limited to:
Font, font size, color settings, bold, italics, underline, strikethrough and other text style settings.
Picture, link, table, list insertion, source code, full screen, undo, redo and other operations.
Customize the toolbar.
html container code
<div class="layui-form-item">
<label for="poi_content" class="layui-form-label">Project information <span class="x-red">*</span></label>
<div class="layui-input-inline" style="width: 100%;"><textarea name="poi_content" id="poi_content" class="layui-textarea" ><p>1</p><p><img src="upload/poi/8_ad_214d2fa823d4d686c04fd41a4a5cff45.png" alt="8_ad_214d2fa823d4d686c04fd41a4a5cff45.png"><br></p></textarea></div>
<div class="layui-form-mid layui-word-aux"></div>
</div>
Rich text editing
//Editor uploads pictures;
laidedit.set({<!-- -->
uploadImage: {<!-- -->
url: '?m=Upload & amp;a=uploadDeal & amp;act=upEdit & amp;fromType=poi & amp;token=' + upToken
, type: 'post'
}
});
//editor
var index1 = laidedit.build('poi_content', {<!-- -->
tool: ['strong', 'italic', 'underline', 'del', '|', 'left', 'center', 'right' , 'link', 'unlink', 'image']
});
setHtmlCodeToEdit('poi_content',index1);//Set the source menu
New method: setHtmlCodeToEdit('poi_content',index1);//Set source menu
Where poi_content is the ID corresponding to the corresponding HTML container
Encapsulation calling method
/************layEdit rich text editor Begin************/
function setHtmlCodeToEdit(ele, id) {<!-- -->
$("#" + ele).next().find('div.layui-layedit-tool').append('<span class="layedit-tool-mid"></ span>');
$("#" + ele).next().find('div.layui-layedit-tool').append('<i class="layui-icon layui-icon-code-circle " title="View source code" style="font-size: 18px!important;" οnclick="getHtml(this,' + id + ')"></i> ') ;
}
//Show original code
function getHtml(boj, index) {<!-- -->
layui.use('layedit', function () {<!-- -->
var laidedit = layui.layedit, $ = layui.jquery;
var context = laidedit.getContent(index);
if ($(boj).hasClass('layui-icon-code-circle')) {<!-- -->
$(document.getElementById("LAY_layedit_" + Number(index))).contents().find("body")
.html(HtmlUtil.htmlEncode(context));
$(boj).removeClass("layui-icon-code-circle");
$(boj).addClass("layui-icon-layouts");
$(boj).attr("title", "View HTML");
} else if ($(boj).hasClass('layui-icon-layouts')) {<!-- -->
$(document.getElementById("LAY_layedit_" + Number(index))).contents().find("body")
.html(HtmlUtil.htmlDecode(context));
$(boj).removeClass("layui-icon-layouts");
$(boj).addClass("layui-icon-code-circle");
$(boj).attr("title", "View source code");
}
});
}
var HtmlUtil = {<!-- -->
/*1. Use the browser’s internal converter to implement html transcoding*/
htmlEncode: function (html) {<!-- -->
//1. First dynamically create a container tag element, such as DIV
var temp = document.createElement("div");
//2. Then set the string to be converted to the innerText (ie supported) or textContent (Firefox, google supported) of this element
(temp.textContent != undefined) ? (temp.textContent = html) : (temp.innerText = html);
//3. Finally, return the innerHTML of this element, that is, get the string converted by HTML encoding.
var output = temp.innerHTML;
temp = null;
return output;
},
/*2. Use the browser’s internal converter to implement html decoding*/
htmlDecode: function (text) {<!-- -->
//1. First dynamically create a container tag element, such as DIV
var temp = document.createElement("div");
//2. Then set the string to be converted to the innerHTML of this element (ie, Firefox, and Google all support it)
temp.innerHTML = text;
//3. Finally, return the innerText (supported by ie) or textContent (supported by Firefox, google) of this element, that is, the HTML-decoded string is obtained.
var output = temp.innerText || temp.textContent;
temp = null;
return output;
}
};
/************layEdit rich text editor End************/
Verify content
var poi_content = laidedit.getContent(index1);
if (poi_content.length <= 0) {<!-- -->
layer.msg("Project information cannot be empty", {<!-- -->icon: 2, time: 2000});
$('#poi_content').focus();
return false;
}
@missingsometimes