집 >웹 프론트엔드 >JS 튜토리얼 >서식 있는 텍스트 편집기를 사용하여 그림 팝업 레이어를 업로드하는 코드 구현

서식 있는 텍스트 편집기를 사용하여 그림 팝업 레이어를 업로드하는 코드 구현

不言원래의: 2018-08-25 13:36:382830검색

이 글은 서식 있는 텍스트 편집기를 사용하여 이미지 팝업 레이어를 업로드하는 코드 구현에 관한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. .

게으른 탓에 이틀전에 올렸던 기성 이미지를 찾고 싶어서 질문을 드렸습니다.
커뮤니티 전체에 유사한 프로젝트가 없다는 것을 발견했습니다. 오늘 탐색해 본 결과 다음과 같습니다. 도구 모음을 정의하고 새 메뉴 클라우드 디스크를 추가합니다.

클라우드 디스크를 클릭하면 아래와 같이 이모티콘과 비슷한 팝업창이 뜹니다

서식 있는 텍스트 편집기를 사용하여 그림 팝업 레이어를 업로드하는 코드 구현 이게 제가 늘 해보고 싶었던, UEditor와 비슷한 팝업창이 뜹니다 .

수정 후, 이전에 사용자가 업로드한 사진, 파일을 에디터에서 불러올 수 있습니다. 편집자가 업로드한 이미지는 수정할 필요가 없습니다.

핵심 코드
1. 편집기 도구 모음을 사용자 정의합니다.
서식 있는 텍스트 편집기를 사용하여 그림 팝업 레이어를 업로드하는 코드 구현

//全局配置
    that.config = {
      //默认工具bar
      tool: [
        &#39;strong&#39;, &#39;italic&#39;, &#39;underline&#39;, &#39;del&#39;
        ,&#39;|&#39;
        ,&#39;left&#39;, &#39;center&#39;, &#39;right&#39;
        ,&#39;|&#39;
        ,&#39;link&#39;, &#39;unlink&#39;, &#39;face&#39;, &#39;image&#39;, &#39;yunpan&#39; //新增部分
      ]
      ,hideTool: []
      ,height: 240 //默认高
    };

2. 새 클릭 이벤트를 추가합니다.

//全部工具
  ,tools = {
    html: &#39;<i class="layui-icon layedit-tool-html" title="HTML源代码" lay-command="html" layedit-event="html""></i><span class="layedit-tool-mid"></span>&#39;
    ,strong: &#39;<i class="layui-icon layedit-tool-b" title="加粗" lay-command="Bold" layedit-event="b""></i>&#39;
    ,italic: &#39;<i class="layui-icon layedit-tool-i" title="斜体" lay-command="italic" layedit-event="i""></i>&#39;
    ,underline: &#39;<i class="layui-icon layedit-tool-u" title="下划线" lay-command="underline" layedit-event="u""></i>&#39;
    ,del: &#39;<i class="layui-icon layedit-tool-d" title="删除线" lay-command="strikeThrough" layedit-event="d""></i>&#39;
    
    ,&#39;|&#39;: &#39;<span class="layedit-tool-mid"></span>&#39;
    
    ,left: &#39;<i class="layui-icon layedit-tool-left" title="左对齐" lay-command="justifyLeft" layedit-event="left""></i>&#39;
    ,center: &#39;<i class="layui-icon layedit-tool-center" title="居中对齐" lay-command="justifyCenter" layedit-event="center""></i>&#39;
    ,right: &#39;<i class="layui-icon layedit-tool-right" title="右对齐" lay-command="justifyRight" layedit-event="right""></i>&#39;
    ,link: &#39;<i class="layui-icon layedit-tool-link" title="插入链接" layedit-event="link""></i>&#39;
    ,unlink: &#39;<i class="layui-icon layedit-tool-unlink layui-disabled" title="清除链接" lay-command="unlink" layedit-event="unlink""></i>&#39;
    ,face: &#39;<i class="layui-icon layedit-tool-face" title="表情" layedit-event="face""></i>&#39;
    ,yunpan: &#39;<i class="layui-icon layedit-tool-image iconfont sw-yunpan-icon" title="云盘" layedit-event="yunpan"></i>&#39; //新增的部分
    ,image: &#39;<i class="layui-icon layedit-tool-image" title="图片" layedit-event="image"><input type="file" name="file"></i>&#39;
    ,code: &#39;<i class="layui-icon layedit-tool-code" title="插入代码" layedit-event="code"></i>&#39;
    
    ,help: &#39;<i class="layui-icon layedit-tool-help" title="帮助" layedit-event="help"></i>&#39;
  }

3 .클라우드 디스크 패널

//云盘面板
  ,yunpan=function(options, callback){
    //云盘
    var body = this, index = layer.open({
      type: 1
      ,id: &#39;LAY_layedit_yunpan&#39;
      ,area: &#39;600px&#39;
      ,shade: 0.05
      ,shadeClose: true
      ,moveType: 1
      ,title: &#39;企业云盘&#39;
      ,skin: &#39;layui-layer-msg&#39;
      ,content:[&#39;<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">&#39;
      ,&#39;<ul class="layui-tab-title">&#39;
      ,&#39;<li class="layui-this">产品图片</li>&#39;
      ,&#39;<li>头像</li>&#39;
      ,&#39;<li>LOGO</li>&#39;
      ,&#39;<li>轮播图片</li>&#39;
      ,&#39;<li>其他图片</li>&#39;
      ,&#39;<li>文档文件</li>&#39;
      ,&#39;</ul>&#39;
      ,&#39;<div class="layui-tab-content" style="height: 340px;">&#39;
      ,&#39;<div class="layui-tab-item layui-show">这里还没有加载产品图片</div>&#39;
      ,&#39;<div class="layui-tab-item">内容2</div>&#39;
      ,&#39;<div class="layui-tab-item">内容3</div>&#39;
      ,&#39;<div class="layui-tab-item">内容4</div>&#39;
      ,&#39;<div class="layui-tab-item">内容5</div>&#39;
      ,&#39;<div class="layui-tab-item">内容6</div>&#39;
      ,&#39;</div>&#39;
      ,&#39;</div> &#39;].join(&#39;&#39;)
    });
  }

기타 세부 사항은 프로젝트 데이터와 관련되어 표시가 불편합니다.

서식 있는 텍스트 편집기를 사용하여 그림 팝업 레이어를 업로드하는 코드 구현

관련 기사