이 글은 서식 있는 텍스트 편집기를 사용하여 이미지 팝업 레이어를 업로드하는 코드 구현에 관한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. .
게으른 탓에 이틀전에 올렸던 기성 이미지를 찾고 싶어서 질문을 드렸습니다.
커뮤니티 전체에 유사한 프로젝트가 없다는 것을 발견했습니다. 오늘 탐색해 본 결과 다음과 같습니다. 도구 모음을 정의하고 새 메뉴 클라우드 디스크를 추가합니다.
이게 제가 늘 해보고 싶었던, UEditor와 비슷한 팝업창이 뜹니다 .
수정 후, 이전에 사용자가 업로드한 사진, 파일을 에디터에서 불러올 수 있습니다. 편집자가 업로드한 이미지는 수정할 필요가 없습니다.핵심 코드
1. 편집기 도구 모음을 사용자 정의합니다.
//全局配置 that.config = { //默认工具bar tool: [ 'strong', 'italic', 'underline', 'del' ,'|' ,'left', 'center', 'right' ,'|' ,'link', 'unlink', 'face', 'image', 'yunpan' //新增部分 ] ,hideTool: [] ,height: 240 //默认高 };
//全部工具 ,tools = { html: '<i class="layui-icon layedit-tool-html" title="HTML源代码" lay-command="html" layedit-event="html""></i><span class="layedit-tool-mid"></span>' ,strong: '<i class="layui-icon layedit-tool-b" title="加粗" lay-command="Bold" layedit-event="b""></i>' ,italic: '<i class="layui-icon layedit-tool-i" title="斜体" lay-command="italic" layedit-event="i""></i>' ,underline: '<i class="layui-icon layedit-tool-u" title="下划线" lay-command="underline" layedit-event="u""></i>' ,del: '<i class="layui-icon layedit-tool-d" title="删除线" lay-command="strikeThrough" layedit-event="d""></i>' ,'|': '<span class="layedit-tool-mid"></span>' ,left: '<i class="layui-icon layedit-tool-left" title="左对齐" lay-command="justifyLeft" layedit-event="left""></i>' ,center: '<i class="layui-icon layedit-tool-center" title="居中对齐" lay-command="justifyCenter" layedit-event="center""></i>' ,right: '<i class="layui-icon layedit-tool-right" title="右对齐" lay-command="justifyRight" layedit-event="right""></i>' ,link: '<i class="layui-icon layedit-tool-link" title="插入链接" layedit-event="link""></i>' ,unlink: '<i class="layui-icon layedit-tool-unlink layui-disabled" title="清除链接" lay-command="unlink" layedit-event="unlink""></i>' ,face: '<i class="layui-icon layedit-tool-face" title="表情" layedit-event="face""></i>' ,yunpan: '<i class="layui-icon layedit-tool-image iconfont sw-yunpan-icon" title="云盘" layedit-event="yunpan"></i>' //新增的部分 ,image: '<i class="layui-icon layedit-tool-image" title="图片" layedit-event="image"><input type="file" name="file"></i>' ,code: '<i class="layui-icon layedit-tool-code" title="插入代码" layedit-event="code"></i>' ,help: '<i class="layui-icon layedit-tool-help" title="帮助" layedit-event="help"></i>' }
//云盘面板 ,yunpan=function(options, callback){ //云盘 var body = this, index = layer.open({ type: 1 ,id: 'LAY_layedit_yunpan' ,area: '600px' ,shade: 0.05 ,shadeClose: true ,moveType: 1 ,title: '企业云盘' ,skin: 'layui-layer-msg' ,content:['<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">' ,'<ul class="layui-tab-title">' ,'<li class="layui-this">产品图片</li>' ,'<li>头像</li>' ,'<li>LOGO</li>' ,'<li>轮播图片</li>' ,'<li>其他图片</li>' ,'<li>文档文件</li>' ,'</ul>' ,'<div class="layui-tab-content" style="height: 340px;">' ,'<div class="layui-tab-item layui-show">这里还没有加载产品图片</div>' ,'<div class="layui-tab-item">内容2</div>' ,'<div class="layui-tab-item">内容3</div>' ,'<div class="layui-tab-item">内容4</div>' ,'<div class="layui-tab-item">内容5</div>' ,'<div class="layui-tab-item">内容6</div>' ,'</div>' ,'</div> '].join('') }); }
관련 권장 사항:
리치 텍스트 편집기 사진 삭제 관련 문제
#🎜🎜 #Yii2 통합 리치 텍스트 편집기 편집자 예제 튜토리얼 php 리치 텍스트 편집기 java 리치 텍스트 편집기 jsp 리치 텍스트 편집기 에 대한 간략한 분석
위 내용은 서식 있는 텍스트 편집기를 사용하여 그림 팝업 레이어를 업로드하는 코드 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!