lambdalisue / django-codemirror-widget

Django's textarea like widget for using CodeMirror on textarea

django-codemirror-widget

Django form widget library for using CodeMirror on Textarea.

Installation

pip install django-codemirror-widget

Usage

1. First, you need to specified CODEMIRROR_PATH on settings.py. CODEMIRROR_PATH is the URI of CodeMirror directory like CODEMIRROR_PATH = r"javascript/codemirror". If you don't specify it, it defaults to 'codemirror'. CodeMirror should be put there.

2. Use codemirror.CodeMirrorTextarea widget for target Textarea like below:

   from django import forms
   from codemirror import CodeMirrorTextarea
   
   codemirror_widget = CodeMirrorTextarea(
       mode="python",
       theme="cobalt",
       config={
           'fixedGutter': True
       },
   )
   document = forms.TextField(widget=codemirror_widget)

Settings

Use the followings in your settings.py.

CODEMIRROR_PATH

The URI of CodeMirror directory (your CodeMirror installation should live in {{ STATIC_URL }}/{{ CODEMIRROR_PATH }})

CODEMIRROR_MODE

The default mode which may be a string or configuration map (DEFAULT: 'javascript')

CODEMIRROR_THEME

The default theme applied (DEFAULT: 'default')

CODEMIRROR_CONFIG

Base mapping for the rest of the CodeMirror options (DEFAULT: { 'lineNumbers': True })

CODEMIRROR_JS_VAR_FORMAT

A format string interpolated with the form field name to name a global JS variable that will hold the CodeMirror editor object. For example with CODEMIRROR_JS_VAR_FORMAT = "%s_editor" and a field named 'code', the JS variable name would be 'code_editor'. If CODEMIRROR_JS_VAR_FORMAT is None, no global variable is created (DEFAULT: None)

django-codemirror-widget's Issues

javascript error when using for inlineadmins

I have CODEMIRROR_JS_VAR_FORMAT set to "%s_editor", but when in I try to use it for inlineadmins, I'm getting a javascript syntax error because the field is named 'chunks-0-text', which creates a js var named chunks-0-text_editor, which is an invalid because of the hyphens.

I can't think of any sort of workaround, other than perhaps allowing a function to be specified rather than simply a format string, where the function could perform substitutions such as converting hyphens to underscores, etc..

Does this seem like a reasonable request?

include codemirror static files

I've seen other similar django widgets that package the static files with the codemirror app, default CODEMIRROR_PATH to use the pre-pacakged static files, and allow the user to override the setting.

Would you be interested in a PR that does something like this? It would make installing and using the package easier along with getting rid of a bunch of static files from my main repository. Thanks!

new release

@lambdalisue would you mind putting out a new release on PyPi with the latest commit? I'm finding the custom_css option to be very useful.

thanks!

Trying to get this widget working in a view

Hello

I am trying to get the codemirror widget working on a form that I am deisplaying in a view, but following the doc, am probably missing a detail that does not exist.

I am calling the widget from the form class that I use to overwrite a generic view (CreateView). The app is added to settings.py and the codemirror_path is added as well.

Despite all this, am still not able to get it working properly.

Any clear direction on how to get this working in a view ? Is there any loading that should be done in the master html or in the block being rendered ?

An example would be more than welcome

Thanks

htmlmixed mode throws an error

HTMLMixed mode has a requirement to load XML, CSS and Javascript modes as well, but I cannot seem to find a way to do that with the widget.

Missing "null" mode for plain text

CodeMirrors ships with builtin plain text mode (no syntax highlight, nothing but just bare editor). You can set mode to null or text/plain to get it as described by CodeMirrors author at codemirror/codemirror5#1267.

When I set mode to null via CODEMIRROR_MODE settings or via CodeMirrorTextarea widget constructor, django-codemirror-widget generates non-existing path to mode/none/none.js like <script src="<CODEMIRROR_PATH>/mode/none/none.js">.

How to get "null" mode with django-codemirror-widget?

PS: IMHO default mode shouldn't be JavaScript but none. Your opinions?

Support addons

Addon files should be automatically added if available, similar to language and theme plugins.

PyPi

Could you update the version of PyPi?

|

How to configure the mode option of a CodeMirror widget for C++?

As the language modes page shows, for the C++ language CodeMirror only has a C-like mode, and it seems that to make a proper configuration for C++, we have to

1. set the name of the mode to 'clike' to load the appropriate mode file (clike.js in this case), and
2. set the MIME type to text/x-c++src, as suggested at the bottom of this page, since the clike mode is not C++-specific.

And how can I achieve that without hard-coding something into the template file?

For reference, the CodeMirror manual says

mode: string|object
The mode to use. It may be a string, which either simply names the mode or is a MIME type associated with the mode. Alternatively, it may be an object containing configuration options for the mode, with a name property that names the mode (for example {name: "javascript", json: true})

Add css to the AdminHTMLEditor

If I add this css in the change_form.html, the result is better:

    .CodeMirror-line-numbers {
        color:#999999;
        font-family:monospace;
        font-size:10pt;
        margin:0.4em 0.4em 0.4em 6em;
        padding:0;
        text-align:right;
        width:2.2em;
    }

I copy this of the dbtemplates

I don't make a pull request but I don't know the place to set this code.

Thanks for all again :-)

rst mode does not seem to work

This plugin for django is hands down the best for the job. Simple and to the point.

If I set the mode to rst, for some reason, the text area widget at the admin site do not seem to like it. It works well with other modes (I tried python and clike). Example:

I get some errors while loading the javascript in this mode:

Any clues?

No label generated for accessibility

We need to have a label generated for the TEXTAREA element that code mirror renders in parallel with the original TEXTAREA element. The label is very important for supporting people with disabilities and an is required by law for most public organizations to comply with web accessibility standards.

You can use the label text on the original textarea (now hidden by code mirror) defined by a LABEL[FOR] relationship and then use ARIA-LABEL="[label text]" on code mirror TEXTAREA element.

Create release in pypi

Please can you create a new release in pypi with the new changes, the egg in pypi is very outdated.

Thanks for all