在 django 博客站点中集成文本编辑器

Posted 2023-05-09

【中文标题】在 django 博客站点中集成文本编辑器

【英文标题】：Integrate the text editor in django blog site

【发布时间】：2021-11-16 05:43:03

【问题描述】：

你知道富文本编辑器吗？请访问medium.com，我希望你会被这个最漂亮的文本编辑器所启发，我想在我的django博客中集成这种类型的编辑器，用户可以在那里写他们的文章，我该如何集成呢？我现在使用 TinyMce 编辑器，但体验不是更好。还记得有件事告诉我，如果用户将图像上传到哪里，图像将保存在哪里？

我的 TinyMce 代码

<script
  src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js"
  referrerpolicy="origin"
></script>
<script>
  tinymce.init(
    selector: "textarea#mytextarea",
    /* plugins are the things which i can use in toolbar, menubar etc */
        plugins: [
      'advlist autolink link image lists charmap print preview hr anchor pagebreak',
      'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
      'table emoticons template paste help imagetools'
    ],
    toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | ' +
      'bullist numlist outdent indent | link image | print preview media fullpage | ' +
      'forecolor backcolor emoticons | help',
    menu: 
      favs: title: 'My Favorites', items: 'code visualaid | searchreplace | emoticons',
    ,
    menubar: 'favs file edit view insert format tools table help',
)
</script>

【参考方案1】：

使用summer note是VIP文本编辑器，它也有图片上传选项，图片会以blob二进制格式保存到DB列。只包含一个 js 链接和一个 CSS 链接。然后初始化对象。

CSS 链接

<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">

js 链接

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

使用 textarea 作为选择器将应用于所有 texarea 元素。 如果您只想应用于特定的文本区域。只需将选择器从 $('textarea').summernote(); 更改为 $('.className').summernote();

<script>
$(document).ready(function() 
    
  $('textarea').summernote();

);
</script>

【参考方案2】：

你可以试试CK Editor。 TinyMCE 需要会员资格，而使用 CK 编辑器则不需要任何会员资格，它对于与博客相关的 web 应用程序非常方便。

集成步骤需要完成以下任务 -

在 settings.py:

INSTALLED_APPS = [
    ...
    'ckeditor',
]

在models.py： 导入 RichTextField 并将字段类型分配给您的必填字段

from ckeditor.fields import RichTextField
class Report(models.Model):
    report_details = RichTextField(null=True,blank=True)

在forms.py：导入

from ckeditor.fields import RichTextFormField
class SomeForm(forms.ModelForm):
    class Meta:
        widgets = 
            'report_details': RichTextFormField(),
        

在模板中：添加以下 javascripts -

<script type="text/javascript" src="% static "ckeditor/ckeditor-init.js" %"></script>
<script type="text/javascript" src="% static "ckeditor/ckeditor/ckeditor.js" %"></script>

【讨论】：

问题是“如何我可以集成这种类型的编辑器”，所以仅仅命名一个库，你还没有回答 OP 的问题。请考虑在您的回答中添加edit 以解决该问题。