首頁 >web前端 >js教程 >使用富文本編輯器如何呼叫雲端盤的圖片檔（程式碼分析）

使用富文本編輯器如何呼叫雲端盤的圖片檔（程式碼分析）

不言原創: 2018-08-25 13:45:551562瀏覽

這篇文章帶給大家的內容是關於富文本編輯器如何調用雲端盤的圖片檔案（程式碼分析），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

最近在開發一個多用戶系統，由於在發布文章的時候需要用到編輯器。 UEditor是很多網友推薦的一個，強大，我下載之後，發現這個編輯器程式碼已經達到2萬多行，受不了這種臃腫。
對此我發現了layui有一個自備的編輯器，好像是被雪藏了，不知道是不是官方不太推薦了？
文件地址： http://www.layui.com/doc/modules/layedit.html
LayEdit仍遵循極簡的設計風格，無論是UI上，還是在介面使用上，是我喜歡的一個編輯器，程式碼只有幾百行。
當我需要在編輯器上傳圖片，還有曾經上傳過的圖片直接調用，這樣就需要自己寫一個獲取遠程圖片，對此百轉千迴，直接點吧，付費找人幫忙吧
也沒遇到接單，也沒得到啥有用的資訊。
於是我就想編輯器表情不就是圖片呢？於是找到編輯器js文件，查看到表情帶js程式碼，程式碼不多就幾十行
這算是第一次真正接觸LayEdit，表情用的是layui.layer，tips層，而我需要的是支持tab的頁面層layer.open，這算是加深了layer的認識
於是我把頁面付出層搭建好之後，在用ajax請求應該就好了吧，
於是發了一個文

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

#結果我又遇到問題了，請求回來的資料頁面載入不了，對於菜鳥來說還是比較坑，這是因為dom順序問題。
後來能載入圖片了，進行拼接

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="{1}" 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);
    }

又不會把圖片插入到編輯器，於是又發了一文

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

結果還是沒人關注，又開始對表情部分摸索，發現表情有一段程式碼如下

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

對於監聽點擊圖片事件部分代碼如下

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

最終效果圖如下：
使用富文本編輯器如何呼叫雲端盤的圖片檔（程式碼分析）
#點擊編輯器雲盤，彈出頁面層，透過tab切換，不同欄目，再選擇圖片，關閉雲端盤，插入編輯器。

使用富文本編輯器如何呼叫雲端盤的圖片檔（程式碼分析）

相關文章