Warm tip: This article is reproduced from serverfault.com, please click

python-在使用ckeditor和Django时,为什么不显示MathJax预览?

(python - Why doesn't the MathJax preview show when using ckeditor and Django?)

发布于 2020-11-28 12:11:11

我目前正在尝试使用Django创建一个简单的网站,并将ckeditor用于表单字段。我还想将一些数学集成到我的表单中,因此为什么我下载了ckeditorMathematical Formulas插件。

我按照本教程实施了插件,但是MathJax不起作用。

这就是我添加到settings.py文件中的内容

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar':'full',
        'height': '400px',
        'width': '100%',
        'extraPlugins': ','.join(
            [
                'mathjax', 
                'widget', 
                'lineutils', 
                'dialog', 
                'clipboard',
                
            ]),
    },

}

我将下载的MathJax文件夹复制到了项目的静态目录中。然后,我在我的models.py文件中引用它:

from django.db import models
from django.contrib.auth.models import User
from ckeditor.fields import RichTextField

class Entry(models.Model):
    entry_title = models.CharField(max_length=100)
    #entry_text = models.TextField()
    entry_text = RichTextField(blank = True, null = True,config_name = 'default', external_plugin_resources=[(
        'mathjax',
        '/static/entries/vendor/ckeditor_plugins/mathjax/',
        'plugin.js',
    )])
    entry_date = models.DateTimeField(auto_now_add = True)
    entry_author = models.ForeignKey(User, on_delete = models.CASCADE)

    class Meta:
        verbose_name_plural = "entries"

    def __str__(self):
        return f'{self.entry_title}'

使用表格时,可以看到数学公式符号: ckeditor形式上的数学符号

当我单击它时,ckeditor使我可以自由地在“ Tex”字段中键入我想要的任何内容: 在德州打字

但是,它无法让我预览渲染后的外观。这与“数学公式”网站相矛盾,该网站提供了一个应显示为以下内容的示例:

docs的屏幕截图

此外,当我用虚拟Tex输入单击“确定”时,它在ckeditor框中没有显示任何内容。然后在我的终端Not Found: /create_entry/undefined和中显示一条消息"GET /create_entry/undefined HTTP/1.1" 404 2644“ create_entry”是我在创建表单时使用的urlpattern。

当我提交包含数学的表格时,我无法在ckeditor字段中实际看到数学,只能看到一个蓝色光标: 具有不可见数学的ckeditor字段

但是,提交后查看此帖子后,数学公式将呈现:

数学家

我不确定这是否是因为我在base.html文件中添加了以下javascript:

    <script type="text/javascript" async
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
  </script>

任何帮助表示赞赏,谢谢。

编辑: 我将此代码复制到我的settings.py文件中,它的工作原理是:

# CKEditor UI and plugins configuration
CKEDITOR_CONFIGS = {
    'default': {
        # Toolbar configuration
        # name - Toolbar name
        # items - The buttons enabled in the toolbar
        'toolbar_DefaultToolbarConfig': [
            {
                'name': 'basicstyles',
                'items': ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript',
                          'Superscript', ],
            },
            {
                'name': 'clipboard',
                'items': ['Undo', 'Redo', ],
            },
            {
                'name': 'paragraph',
                'items': ['NumberedList', 'BulletedList', 'Outdent', 'Indent',
                          'HorizontalRule', 'JustifyLeft', 'JustifyCenter',
                          'JustifyRight', 'JustifyBlock', ],
            },
            {
                'name': 'format',
                'items': ['Format', ],
            },
            {
                'name': 'extra',
                'items': ['Link', 'Unlink', 'Blockquote', 'Image', 'Table',
                          'CodeSnippet', 'Mathjax', 'Embed', ],
            },
            {
                'name': 'source',
                'items': ['Maximize', 'Source', ],
            },
        ],

        # This hides the default title provided by CKEditor
        'title': False,

        # Use this toolbar
        'toolbar': 'DefaultToolbarConfig',

        # Which tags to allow in format tab
        'format_tags': 'p;h1;h2',

        # Remove these dialog tabs (semicolon separated dialog:tab)
        'removeDialogTabs': ';'.join([
            'image:advanced',
            'image:Link',
            'link:upload',
            'table:advanced',
            'tableProperties:advanced',
        ]),
        'linkShowTargetTab': False,
        'linkShowAdvancedTab': False,

        # CKEditor height and width settings
        'height': '250px',
        'width': 'auto',
        'forcePasteAsPlainText ': True,

        # Class used inside span to render mathematical formulae using latex
        'mathJaxClass': 'mathjax-latex',

        # Mathjax library link to be used to render mathematical formulae
        'mathJaxLib': 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_SVG',

        # Tab = 4 spaces inside the editor
        'tabSpaces': 4,

        # Extra plugins to be used in the editor
        'extraPlugins': ','.join([
            # 'devtools',  # Shows a tooltip in dialog boxes for developers
            'mathjax',  # Used to render mathematical formulae
            'codesnippet',  # Used to add code snippets
            'image2',  # Loads new and better image dialog
            'embed',  # Used for embedding media (YouTube/Slideshare etc)
            'tableresize',  # Used to allow resizing of columns in tables
        ]),
    }
}

我在这个网站找到的。

Questioner
chopcode
Viewed
0
Tim 2020-11-28 20:34:36

在根据文档的CKEDITOR配置中,你需要指定mathjax路径。

常规文档,底部示例:https : //ckeditor.com/docs/ckeditor4/latest/examples/mathjax.html

路径配置变量需要:https : //ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-mathJaxLib