add support to django inline admin

mdeditor/templates/markdown.html

@@ -47,8 +47,20 @@
 {% endif %}
 <script type="text/javascript">
 
-    $(function () {
-        editormd("{{ id }}-wmd-wrapper", {
+    function makeid(length) {
+        let result = '';
+        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        const charactersLength = characters.length;
+        let counter = 0;
+        while (counter < length) {
+          result += characters.charAt(Math.floor(Math.random() * charactersLength));
+          counter += 1;
+        }
+        return result;
+    }
+
+    function initMDEditorPlugin (id) {
+        editormd(id, {
             watch: {{ config.watch|lower }}, // 关闭实时预览
             lineNumbers: {{ config.lineNumbers|lower }},
             lineWrapping: {{ config.lineWrapping|lower }},
@@ -99,58 +111,22 @@
                 //this.height(480);
                 //this.resize("100%", 640);
             }
-        });
-        // workaround for admin inline
-        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 }}
-            },
-            onload: function () {
-                console.log('onload', this);
-                //this.fullscreen();
-                //this.unwatch();
-                //this.watch().fullscreen();
+        })
+    }
+    $(function () {
+        initMDEditorPlugin('{{ id }}-wmd-wrapper');
 
-                //this.setMarkdown("#PHP");
-                //this.width("100%");
-                //this.height(480);
-                //this.resize("100%", 640);
+        $(document).bind('DOMNodeInserted', function(e) {
+            if (e.target.classList.contains('djn-item')) {
+                var mdEditors = $(e.target).find('.wmd-wrapper')
+                if (mdEditors.length > 0) {
+                    mdEditors.each(function () {
+                        if (this.id.includes('__prefix__')) {
+                            this.id = this.id.replace('__prefix__', makeid(8))
+                            initMDEditorPlugin(this.id)
+                        }
+                    })
+                }
             }
         });
     });

mdeditor/widgets.py

@@ -6,8 +6,6 @@
 from django.utils.encoding import force_text
 from django.utils.html import conditional_escape
 from django.utils.safestring import mark_safe
-import random
-import string
 
 try:
     # Django >=1.7
@@ -19,18 +17,13 @@
 from .configs import MDConfig
 
 
-def generate_random_text(length):
-    characters = string.ascii_letters + string.digits
-    random_text = ''.join(random.choice(characters) for _ in range(length))
-    return random_text
-
-
 class MDEditorWidget(forms.Textarea):
     """
     Widget providing Editor.md for Rich Text Editing.
     see Editor.md docs: https://pandao.github.io/editor.md/examples/index.html
     """
-    def __init__(self, config_name='default', *args, **kwargs):
+
+    def __init__(self, config_name="default", *args, **kwargs):
         super(MDEditorWidget, self).__init__(*args, **kwargs)
         # Setup config from defaults.
         self.config = MDConfig(config_name)
@@ -40,15 +33,20 @@ def render(self, name, value, renderer=None, attrs=None):
         renderer: django2.1 新增加的参数，此处不做应用，赋值None做兼容处理
         """
         if value is None:
-            value = ''
+            value = ""
 
         final_attrs = self.build_attrs(self.attrs, attrs, name=name)
-        return mark_safe(render_to_string('markdown.html', {
-            'final_attrs': flatatt(final_attrs),
-            'value': conditional_escape(force_text(value)),
-            'id': generate_random_text(10) + '_' + final_attrs['id'],
-            'config': self.config,
-        }))
+        return mark_safe(
+            render_to_string(
+                "markdown.html",
+                {
+                    "final_attrs": flatatt(final_attrs),
+                    "value": conditional_escape(force_text(value)),
+                    "id": final_attrs["id"],
+                    "config": self.config,
+                },
+            )
+        )
 
     def build_attrs(self, base_attrs, extra_attrs=None, **kwargs):
         """
@@ -62,11 +60,11 @@ def build_attrs(self, base_attrs, extra_attrs=None, **kwargs):
 
     def _get_media(self):
         return forms.Media(
-            css={
-                "all": ("mdeditor/css/editormd.css",)
-            },
+            css={"all": ("mdeditor/css/editormd.css",)},
             js=(
                 "mdeditor/js/jquery.min.js",
                 "mdeditor/js/editormd.min.js",
-            ))
+            ),
+        )
+
     media = property(_get_media)