为什么在使用 ckeditor 和 Django 时 MathJax 预览不显示?
Why doesn't the MathJax preview show when using ckeditor and Django?
我目前正在尝试使用 Django 创建一个简单的网站,并使用 ckeditor 来处理表单字段。我还想将一些数学整合到我的表格中,因此我下载了 ckeditor 的 Mathematical Formulas 插件。
我按照 this tutorial 实现了插件,但 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 让我可以自由地在 Tex 字段中输入我想要的任何内容:
但是,它并没有让我预览渲染后的效果。
这与数学公式网站相矛盾,该网站给出了它应该是什么样子的示例:
此外,当我用虚拟 Tex 输入单击“确定”时,它不会在 ckeditor 框中显示任何内容。接下来是我的终端 Not Found: /create_entry/undefined
和 "GET /create_entry/undefined HTTP/1.1" 404 2644
中的一条消息。 'create_entry' 是我在创建表单时使用的 urlpattern。
当我提交一个包含一些数学的表格时,我无法在 ckeditor 字段中看到数学 - 只有一个蓝色光标:
然而,在提交后查看此 post 时,数学呈现:
我不确定这是不是因为我在 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
]),
}
}
我在 this 网站上找到它。
根据文档在 CKEDITOR 配置中,您需要指定 mathjax 路径。
常规文档,底部有示例:https://ckeditor.com/docs/ckeditor4/latest/examples/mathjax.html
路径配置变量需要:https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-mathJaxLib
我将此代码复制到我的 settings.py 文件中并且它有效:
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
]),
}
}
我好像没有包含在预览中渲染 Latex 的行。
我目前正在尝试使用 Django 创建一个简单的网站,并使用 ckeditor 来处理表单字段。我还想将一些数学整合到我的表格中,因此我下载了 ckeditor 的 Mathematical Formulas 插件。
我按照 this tutorial 实现了插件,但 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 让我可以自由地在 Tex 字段中输入我想要的任何内容:
但是,它并没有让我预览渲染后的效果。 这与数学公式网站相矛盾,该网站给出了它应该是什么样子的示例:
此外,当我用虚拟 Tex 输入单击“确定”时,它不会在 ckeditor 框中显示任何内容。接下来是我的终端 Not Found: /create_entry/undefined
和 "GET /create_entry/undefined HTTP/1.1" 404 2644
中的一条消息。 'create_entry' 是我在创建表单时使用的 urlpattern。
当我提交一个包含一些数学的表格时,我无法在 ckeditor 字段中看到数学 - 只有一个蓝色光标:
然而,在提交后查看此 post 时,数学呈现:
我不确定这是不是因为我在 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
]),
}
}
我在 this 网站上找到它。
根据文档在 CKEDITOR 配置中,您需要指定 mathjax 路径。
常规文档,底部有示例:https://ckeditor.com/docs/ckeditor4/latest/examples/mathjax.html
路径配置变量需要:https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-mathJaxLib
我将此代码复制到我的 settings.py 文件中并且它有效:
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
]),
}
}
我好像没有包含在预览中渲染 Latex 的行。