使用富文本編輯器上傳圖片彈出層的程式碼實現

本篇文章帶給大家的內容是關於使用富文本編輯器上傳圖片彈出層的程式碼實現，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

前兩天提了一個問題，主要是因為自己比較懶，想找現成的呼叫之前上傳的圖片。
對此我發現整個社區都沒有類似的項目，今天特別摸索了一下，得到效果如下

#在編輯器上自訂工具欄，新增了一個菜單雲盤。
點擊雲盤彈出一個類似表情的彈跳窗如下
這就是我一直想弄一個類似UEditor彈窗。
經過改造把使用者之前上傳的圖片與檔案都可以在編輯器上呼叫出來。編輯器上傳圖片不用修改。
核心程式碼
1、自訂編輯器工具列  

//全局配置
    that.config = {
      //默认工具bar
      tool: [
        'strong', 'italic', 'underline', 'del'
        ,'|'
        ,'left', 'center', 'right'
        ,'|'
        ,'link', 'unlink', 'face', 'image', 'yunpan' //新增部分
      ]
      ,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: 'LAY_layedit_yunpan'
      ,area: '600px'
      ,shade: 0.05
      ,shadeClose: true
      ,moveType: 1
      ,title: '企业云盘'
      ,skin: 'layui-layer-msg'
      ,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;)
    });
  }

其他細節由於涉及專案數據，因此不便展示。

相關建議：

富文本編輯器 刪除圖片有關問題

#淺析Yii2整合豐富文字編輯器redactor實例教學php富文本編輯器java富文本編輯器jsp富文本編輯器

#

以上是使用富文本編輯器上傳圖片彈出層的程式碼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！