How to call image files from cloud disk using rich text editor (code analysis)

The content of this article is about how the rich text editor calls the image files of the cloud disk (code analysis). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

Recently I am developing a multi-user system because an editor needs to be used when publishing articles. UEditor is recommended by many netizens. It is powerful. After I downloaded it, I found that the code of this editor has reached more than 20,000 lines. I can't stand this bloat.
Regarding this, I discovered that layui has a built-in editor, which seems to have been hidden. I wonder if it is not officially recommended?
Document address: http://www.layui.com/doc/modules/layedit.html
LayEdit still follows the minimalist design style, whether it is UI or interface usage, it is the one I like. Editor, the code is only a few hundred lines.
When I need to upload pictures in the editor, and call the previously uploaded pictures directly, I need to write myself to get the remote pictures. This will happen thousands of times, just click it directly, and ask someone to help me for a fee
I didn’t receive any orders, and I didn’t get any useful information.
So I thought, aren’t editor emoticons just pictures? So I found the editor js file and saw the js code for the emoticon. It was only a few dozen lines of code.
This was the first time I really came into contact with LayEdit. The emoticons used layui.layer and tips layer, and what I needed was support. The tab's page layer layer.open, this can be regarded as deepening the understanding of layers
So after I built the page payment layer, I should be able to use ajax to request it,
so I posted a text

http://www.php.cn/js-tutorial-409066.html

As a result, I encountered another problem. The requested data page could not be loaded. It's still a bit tricky for novices, this is because of the DOM order issue.
Later I was able to load pictures and splice them

function myphoto(tabid) {
      var html = "";
      html += &#39;<ul class="swla-yunpan-ul">&#39;;
        //图片资源
        $.get("/api",
        {
          limit:10,
        },
        function(data){
          var list=data.data
           layui.each(list,function(index, item) {
           // 用了format加载数据
            html +=&#39;<li title="{0}"><img src="/static/imghw/default1.png"  data-src="{1}"  class="lazy"   alt="{2}"></li>&#39;.format(item.title,item.src,item.alt);
          });
          html += &#39;</ul>&#39;;
          document.getElementById("yun-"+tabid).innerHTML=html; 
          //监听li点击事件
          $("#yun").on("click",&#39;li&#39;,function(e){
            //获取点击的图片
            var ehtml=e.currentTarget.innerHTML
             参考下面   监听点击图片事件部分
            //关闭云盘
            layer.close(index);
          })
        });
       $(document).off(&#39;click&#39;, yunpan.hide).on(&#39;click&#39;, yunpan.hide);
    }

I couldn’t insert the pictures into the editor, so I posted another article

http://www.php. cn/js-tutorial-409068.html

As a result, no one paid attention, so I started to explore the expression part again, and found that the expression has a code as follows

 //表情
      ,face: function(range){
        face.call(this, function(img){
          insertInline.call(iframeWin, 'img', {
            src: img.src
            ,alt: img.alt
          }, range);
        });
      }我想我应该从这个地方入手了
我把捕获到的li事件进行修改类似方法,yunpan:function(range){
        yunpan.call(this, function(img){
          insertInline.call(iframeWin, 'img', {
            src: img.src
            ,alt: img.alt
          }, range);
        });
      }测试成功

Part of the code for monitoring click image events is as follows

//监听li点击事件
          $("#yun").on("click",'li',function(e){
            //获取点击的图片
            var img=e.target.src
            var alt=e.target.alt
            callback && callback({
              src: img
              ,alt: alt
            });
            //关闭云盘
            layer.close(index);
          })

The final rendering is as follows:

Click on the editor cloud disk to pop up the page layer, switch between different columns through tabs, and then select the image , close the cloud disk and insert the editor.

Related recommendations:

yii2 integrated rich text editor redactor html rich text editor rich text editor plug-in django rich text editor

Using Ueditor rich text editor in ThinkPHP,

The above is the detailed content of How to call image files from cloud disk using rich text editor (code analysis). For more information, please follow other related articles on the PHP Chinese website!