Implémentation du code du téléchargement d'une couche contextuelle d'image à l'aide d'un éditeur de texte enrichi

Ce que cet article vous apporte concerne l'implémentation du code pour le téléchargement de couches contextuelles d'images à l'aide d'un éditeur de texte enrichi. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

J'ai posé une question il y a deux jours, principalement parce que je suis paresseux et que je voulais trouver une image toute faite que j'ai téléchargée auparavant.
J'ai constaté qu'il n'existe pas de projet similaire dans l'ensemble de la communauté. Je l'ai exploré aujourd'hui et j'ai obtenu les résultats suivants

Personnalisez la barre d'outils dans l'éditeur et ajoutez Créé un. menu disque cloud.
Cliquez sur le disque cloud et une fenêtre pop-up similaire à une émoticône apparaîtra comme suit
C'est ce que j'ai toujours voulu créer une fenêtre pop-up similaire à UEditor.
Après modification, les images et fichiers précédemment téléchargés par les utilisateurs peuvent être rappelés dans l'éditeur. Il n'est pas nécessaire de modifier l'image téléchargée par l'éditeur.
Code principal
1. Barre d'outils de l'éditeur personnalisé

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

2. Événement de clic ajouté

//全部工具
  ,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. Panneau de disque cloud

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

D'autres détails sont difficiles à afficher car ils impliquent des données de projet.

Recommandations associées :

Éditeur de texte enrichi Problèmes liés à la suppression d'images

Une brève analyse du texte enrichi intégré à Yii2 éditeur rédacteur Exemple de tutoriel éditeur de texte enrichi php éditeur de texte enrichi java éditeur de texte enrichi jsp

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!