首页 > 其他分享 >富文本编辑器 django-mdeditor如何复制粘贴图片

富文本编辑器 django-mdeditor如何复制粘贴图片

时间:2023-09-12 09:44:11浏览次数:43  
标签:function 文本编辑 items lower django 复制粘贴 Editor var config

1、找到文件\site-packages\mdeditor\templates\markdown.html文件

2、找到<script type="text/javascript">这行

3. 这行及以下所有内容删除,也就是把js这块代码全删除了,把js替换

<script type="text/javascript">

  $(function () {
    editormd("{{ id }}-wmd-wrapper", {
      watch: {{ config.watch|lower }}, // 关闭实时预览
    lineNumbers: {{ config.lineNumbers|lower }},
    lineWrapping: {{ config.lineWrapping|lower }},
    width: "{{ config.width }}",
            height: {{ config.height }},
    placeholder: '{{ config.placeholder }}',
            // 当有多个mdeditor时,全屏后,其他mdeditor仍然显示,解决此问题。
            onfullscreen : function() {
      this.editor.css("border-radius", 0).css("z-index", 9999);
    },
    onfullscreenExit : function() {
      this.editor.css({
        zIndex : 10,
        border : "1px solid rgb(221,221,221)"
      })
    },
    syncScrolling: "single",
            path: "{% static  'mdeditor/js/lib' %}" + "/",
            // theme
            theme : "{{ config.theme|safe }}",
            previewTheme : "{{ config.preview_theme|safe }}",
            editorTheme : "{{ config.editor_theme }}",

            saveHTMLToTextarea: true, // editor.md 有问题没有测试成功
            toolbarAutoFixed: {{ config.toolbar_autofixed|lower }},
    searchReplace: {{ config.search_replace|lower }},
    emoji: {{ config.emoji|lower }},
    tex: {{ config.tex|lower }},
    taskList: {{ config.task_list|lower }},
    flowChart: {{ config.flow_chart|lower }},
    sequenceDiagram: {{ config.sequence|lower }},

    // image upload
    imageUpload: true,
            imageFormats: {{ config.upload_image_formats|safe }},
    imageUploadURL: "{{ config.upload_image_url }}",
            toolbarIcons: function () {
      return {{ config.toolbar|safe }}
    },
    onl oad: function () {
      initPasteDragImg(this); //必须
      console.log('onload', this);
      //this.fullscreen();
      //this.unwatch();
      //this.watch().fullscreen();

      //this.setMarkdown("#PHP");
      //this.width("100%");
      //this.height(480);
      //this.resize("100%", 640);
    }
  });

  });

  function initPasteDragImg(Editor){
    var doc = document.getElementById(Editor.id)
    doc.addEventListener('paste', function (event) {
      var items = (event.clipboardData || window.clipboardData).items;
      var file = null;
      if (items && items.length) {
        // 搜索剪切板items
        for (var i = 0; i < items.length; i++) {
          if (items[i].type.indexOf('image') !== -1) {
            file = items[i].getAsFile();
            break;
          }
        }
      } else {
        console.log("当前浏览器不支持");
        return;
      }
      if (!file) {
        console.log("粘贴内容非图片");
        return;
      }
      uploadImg(file,Editor);
    });
    var dashboard = document.getElementById(Editor.id)
    dashboard.addEventListener("dragover", function (e) {
      e.preventDefault()
      e.stopPropagation()
    })
    dashboard.addEventListener("dragenter", function (e) {
      e.preventDefault()
      e.stopPropagation()
    })
    dashboard.addEventListener("drop", function (e) {
      e.preventDefault()
      e.stopPropagation()
      var files = this.files || e.dataTransfer.files;
      uploadImg(files[0],Editor);
    })
  }
  function uploadImg(file,Editor){
    var formData = new FormData();
    var fileName=new Date().getTime()+"."+file.name.split(".").pop();
    formData.append('editormd-image-file', file, fileName);
    formData.append('content', '');
    $.ajax({
      url: Editor.settings.imageUploadURL,
      type: 'post',
      data: formData,
      processData: false,
      contentType: false,
      dataType: 'json',
      success: function (msg) {
        var success=msg['success'];
        if(success==1){
          var url=msg["url"];
          if(/\.(png|jpg|jpeg|gif|bmp|ico)$/.test(url)){
            Editor.insertValue("![图片alt]("+msg["url"]+" ''图片title'')");
          }else{
            Editor.insertValue("[下载附件]("+msg["url"]+")");
          }
        }else{
          console.log(msg);
          alert("上传失败");
        }
      }
    });
  }

</script>

 

参考:https://bigyoung.cn/posts/262/

标签:function,文本编辑,items,lower,django,复制粘贴,Editor,var,config
From: https://www.cnblogs.com/lxgbky/p/17695179.html

相关文章

  • vmware 虚拟机上实现host与guest文件及目录互相复制粘贴
    往期好文:统信UOS桌面操作系统上使用ventoy制作U盘启动盘hello,大家好啊,今天给大家带来一篇关于vmware虚拟机上实现host与guest文件及目录互相复制粘贴的文章。本次示例用到的虚拟化是vmwareworkstationpro17,host用的是windows11,guest用的是统信UOS桌面操作系统1060。本次的目标......
  • Django-分页组件
    在/test_orm/文件夹下新建一个文件夹utils,在其下新建一个paginater.py:classPaginater():def__init__(self,url_address,cur_page_num,total_rows,one_page_lines=10,page_maxtag=9):"""url_address:页码标签href的地址,也就是分页功能的网页URL......
  • Django_debug page_XSS漏洞(CVE-2017-12794)漏洞复现
    目录1.1、漏洞描述1.2、漏洞等级1.3、影响版本1.4、漏洞复现1、基础环境2、漏洞分析3、漏洞验证说明内容漏洞编号CVE-2017-12794漏洞名称Django_debugpage_XSS漏洞漏洞评级影响范围1.11.5版本漏洞描述修复方案1.1、漏洞描述1.11.5版本,修复了......
  • Django 测试是否安装成功
    在我们安装好django后,我们不要急于去开发,我们首先要清楚我们的django是否安装成功。在这里要注意:有些童鞋反应安装不成功,大多数原因是:权限问题,当前用户的权限不够。django安装过程中会在/usr/local/lib/中写入文件,所以安装前要确认当前用户有对lib目录的操作权限。这样才能确保成功......
  • django之models
    #字段选项null如果是True,Django将在数据库中存储空值为NULL。默认为False。blank如果是True,该字段允许为空。默认为False。choicesfromdjango.dbimportmodelsclassStudent(models.Model):FRESHMAN='FR'SOPHOMORE='SO'JUNIOR='JR'......
  • vue使用富文本编辑器vue-quill-editor,含拖拽图片,调整默认高度
    这两天的工作用到了vue\-quill-editor,来记录一下使用心得/踩过的坑供大家参考。1、安装npminstall vue-quill-editornpminstallquill2、引入main.js里样式也记得引入:importVueQuillEditorfrom'vue-quill-editor'import'quill/dist/quill.core.css'import'quill/dist/qu......
  • Django管理后台访问和登录页面访问数据不一致的问题
    Django管理后台访问和登录页面访问数据不一致的问题问题现象我再创建商品购物车功能后,发现这个功能页面需要放在管理后台。在测试功能时是直接配置路由访问http://localhost:8088/view_cart/是可以正常加载购物车的相关功能的,然后将购物车功能加到管理后台,添加之后发现没有查到......
  • 使用Python和Django构建Web应用程序
    Django简介Django是一个强大的PythonWeb框架,用于构建高效且可维护的Web应用程序。它提供了许多工具和库,用于处理常见的Web开发任务,如数据库管理、用户认证和URL路由。以下是一些Django的关键特点:ORM(对象关系映射):Django的ORM允许你使用Python代码来定义和查询数据库模型,而无需编写S......
  • 使用Django构建RESTful API
    Django简介Django是一个强大的PythonWeb框架,广泛用于构建高效且可维护的Web应用程序和RESTfulAPI。它提供了许多工具和库,用于处理常见的Web开发任务,如数据库管理、用户认证和URL路由。以下是一些关键Django特点:内置ORM(对象关系映射):Django的ORM允许你使用Python代码来定义和查询数......
  • 【高级】Django实现读写分离
    【1】第一步:配置文件配置多个数据库在Django的配置文件中的DATABASES参数中,添加多个数据库的配置信息。每个数据库都需要指定ENGINE(数据库引擎)和NAME(数据库名称),可以根据实际情况选择合适的数据库引擎和数据库名称。例如,在配置文件中添加两个数据库配置的示例:DATABASES={......