Using editor.md in Phoenix how do you add the JS function script?

Phoenix Forum Questions / Help
,
1

I would like to use the following Markdown editor (https://pandao.github.io/editor.md/en.html) in my app it will be part of a form submission and I’m not sure where you would add the following

<script type="text/javascript">
    $(function() {
        var editor = editormd("editormd", {
            path : "../lib/" // Autoload modules mode, codemirror, marked... dependents libs path
        });

        /*
        // or
        var editor = editormd({
            id   : "editormd",
            path : "../lib/"
        });
        */
    });
</script>

I have added the script to my index admin file in layout, this is where I import all the rest of JS files and then I add the correct brunch config

admin index html

<script src="<%= static_path(@conn, “/js/admin/jquery-1.11.2.min.js”) %>">
<script src="<%= static_path(@conn, “/js/admin/jquery-migrate-1.2.1.min.js”) %>">
<script src="<%= static_path(@conn, “/js/admin/bootstrap.js”) %>">
<script src="<%= static_path(@conn, “/js/admin/jquery.autosize.js”) %>">
<script src="<%= static_path(@conn, “/js/admin/App2.js”) %>">
<script src="<%= static_path(@conn, “/js/admin/AppNavigation2.js”) %>">
<script src="<%= static_path(@conn, “/js/admin/editormd.js”) %>">

             <script type="text/javascript">
                 $(function() {
                     var editor = editormd("editormd", {
                         //path : "<%= static_path(@conn, "/js") %>" // Autoload modules mode, codemirror, marked... dependents libs path
                     });

                 });
             </script>

      		<!-- END JAVASCRIPT -->

Brunch config

exports.config = {
  // See http://brunch.io/#documentation for docs.
  files: {
    javascripts: {
      joinTo: {
        // public js
        'js/app.js': /^(assets\/css\/public)/,
        'js/countdown.js': /^(assets\/css\/public)/,
        'js/jquery.steps.min.js': /^(assets\/css\/public)/,
        'js/jquery-3.1.1.min.js': /^(assets\/css\/public)/,
        'js/flickity.min.js': /^(assets\/css\/public)/,
        'js/parallax.js': /^(assets\/css\/public)/,
        'js/scripts.js': /^(assets\/css\/public)/,
        'js/smooth-scroll.min.js': /^(assets\/css\/public)/,
        'js/typed.min.js': /^(assets\/css\/public)/,
        'js/ytplayer.min.js': /^(assets\/css\/public)/,

        // admin js
        'js/jquery-1.11.2.min.js': /^(assets\/css\/admin)/,
        'js/jquery-migrate-1.2.1.min.js': /^(assets\/css\/admin)/,
        'js/bootstrap.js': /^(assets\/css\/admin)/,
        'js/jquery.autosize.js': /^(assets\/css\/admin)/,
        'js/jquery.App2.js': /^(assets\/css\/admin)/,
        'js/jquery.AppNavigation2.js': /^(assets\/css\/admin)/,
        'js/jquery.editirmd.js': /^(assets\/css\/admin)/,
        'js/lib/flowchart.min.js': /^(assets\/css\/admin)/,
        'js/lib/jquery.flowchart.min.js': /^(assets\/css\/admin)/,
        'js/lib/marked.min.js': /^(assets\/css\/admin)/,
        'js/lib/prettify.min.js': /^(assets\/css\/admin)/,
        'js/lib/raphael.min.js': /^(assets\/css\/admin)/,
        'js/lib/sequence-diagram.min.js': /^(assets\/css\/admin)/,
        'js/lib/underscore.min.js': /^(assets\/css\/admin)/,
        'js/lib/codemirror.min.js': /^(assets\/css\/admin)/,
      }

      // To use a separate vendor.js bundle, specify two files path
      // http://brunch.io/docs/config#-files-
      // joinTo: {
      //   "js/app.js": /^js/,
      //   "js/vendor.js": /^(?!js)/
      // }
      //
      // To change the order of concatenation of files, explicitly mention here
      // order: {
      //   before: [
      //     "vendor/js/jquery-2.1.1.js",
      //     "vendor/js/bootstrap.min.js"
      //   ]
      // }
    },
    stylesheets: {
      joinTo: {
        // Public css
        'css/bootstrap.css': /^(assets\/css\/public)/,
        'css/stack-interface.css': /^(assets\/css\/public)/,
        'css/socicon.css': /^(assets\/css\/public)/,
        'css/flickity.css': /^(assets\/css\/public)/,
        'css/iconsmind.css': /^(assets\/css\/public)/,
        'css/query.steps.css': /^(assets\/css\/public)/,
        'css/theme.css': /^(assets\/css\/public)/,
        'css/custom.css': /^(assets\/css\/public)/,
        'css/lightbox.min.css': /^(assets\/css\/public)/,

        // Admin css
        'css/bootstrap2.css': /^(assets\/css\/admin)/,
        'css/materialadmin.css': /^(assets\/css\/admin)/,
        'css/font-awesome.css': /^(assets\/css\/admin)/,
        'css/material-design-iconic-font.css': /^(assets\/css\/admin)/,
        'css/editormd.css': /^(assets\/css\/admin)/,
        'css/codemirror.min.css': /^(assets\/css\/admin)/,
      }
    },
    templates: {
      joinTo: "js/app.js",
    }
  },

But when I go to the form that has the id for the markdown I’m getting in the console log errors that is can’t find the scripts as it’s trying to the following path

http://localhost:4000/magnets/lib/codemirror/codemirror.min.js

2

Sounds like it might have a configuration that needs to be set to tell it to look elsewhere (or for a resolver function so you can ‘import’ them from whatever that is already loaded too). :slight_smile:

3

Thanks, was able to get it working

1 Like
4

What got it working I’m curious? :slight_smile:

5

I need to put some of my js file inside another folder “codemirror” and then it found the correct files

1 Like