search

Home >Web Front-end >JS Tutorial >Code implementation of uploading picture pop-up layer using rich text editor

Code implementation of uploading picture pop-up layer using rich text editor

不言
不言Original
2018-08-25 13:36:382865browse

The content of this article is about the code implementation of using the rich text editor to upload the image pop-up layer. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

I asked a question two days ago, mainly because I am lazy and wanted to find a ready-made image that I uploaded before.
Regarding this, I found that there is no similar project in the entire community. I tried it out today and got the following results

Code implementation of uploading picture pop-up layer using rich text editor

Customize the toolbar on the editor and add a new Created a menu cloud disk.
Click on the cloud disk and a pop-up window similar to an emoticon will pop up as follows
Code implementation of uploading picture pop-up layer using rich text editorThis is what I have always wanted to make a pop-up window similar to UEditor.
After modification, the images and files previously uploaded by users can be called up in the editor. There is no need to modify the images uploaded by the editor.
Core Code
1. Customize the editor toolbar 

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

2. Add a new click event 

//全部工具
  ,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. Cloud disk panel

//云盘面板
  ,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;)
    });
  }

Other details are difficult to display because they involve project data.

Related recommendations:

Rich text editor Problems related to deleting pictures

A brief analysis of the Yii2 integrated rich text editor redactor Example tutorial php rich text editor java rich text editor jsp rich text editor

The above is the detailed content of Code implementation of uploading picture pop-up layer using rich text editor. For more information, please follow other related articles on the PHP Chinese website!

Java php 事件
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to delete checked rows in the table using javascript (code)Next article：How to delete checked rows in the table using javascript (code)

Related articles

See more