python-django中使用ckeditor富文本，后台没问题，前台为啥不好使？

Posted 2023-04-23

使用ckeditor富文本，后台正常，前台不显示。
我的操作是这样的：
在app的models中引入并定义了富文本，
在app的admin中加入后台。
进入后台，正常使用。
前台应用操作是这样：
在forms中引入ckeditor中引入定义富文本
from django import forms
from ckeditor.fields import RichTextField
class testingForm(forms.Form):
title = forms.CharField(label="请输入文章标题", max_length=128, widget=forms.TextInput(attrs='class': 'form-control'))
body = RichTextField(blank=True,null=True,verbose_name="内容")
代码和models中一样，
然后再views中：
from .forms import testingForm
def index(request):
testing_Form = testingForm()
return render(request, 'testing/index.html', locals())
html中：
<div>
testing_Form.title.label_tag
testing_Form.title
<label for="exampleInputEmail1">请输入文章内容或段落</label>
testing_Form.body
</div>
前台不显示富文本框，只显示<ckeditor.fields.RichTextField> 这个标签，没调用出来。

首先说一下富文本编辑器的原理，富文本编辑器一般都是通过js文件实现的，类似于一个网页控件。在django后台之所以可以调用富文本编辑器，那是因为它可以根据这个富文本编辑器定义的字段，找到对行的js文件，然后在后台模板里调用这个js文件。而你直接通过给模板传递对应的函数，模板文件虽然可以识别到对应的函数，但是无法加载对应的js文件，自然无法在网页中初始化这个富文本编辑器的控件。
因此，对应的解决办法是查一下ckeditor这个编辑器的前端调用方式，正常情况下一般是给你需要插入富文本编辑器的编辑框设置一个ckeditor对应的类，然后在模板文件中使用<script></script>标签来导入ckeditor需要的js文件以及其他需要导入的静态文件，就可以了。
不知道我讲清楚了没有，希望可以帮助到你。 参考技术A 大哥 解决了没 我这碰到同样的问题

vue集成CKEditor构建框架的使用，遇到富文本框不出现工具栏等操作

官方关于Vue集成CKEditor富文本框的文档：https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html#using-es6-modules

 

先说下依赖吧，

"@ckeditor/ckeditor5-vue" 这个是使用vue集成的时候，这个依赖必不可缺，当然，如果你是直接使用script脚本引入的话，这个依赖也不是必须的，通过ckeditor在线构建出的压缩包里面就有一个例子，不过是 内联脚本 版本的。

说下我遇到的问题， 集成官方提供的ckeditor版本可以正常使用，主要就是 引入

"@ckeditor/ckeditor5-vue"依赖和 npm install --save @ckeditor/ckeditor5-build-classic 安装的版本，照文档的操作就可以正常使用，但是我认为这里面包含的ckfinder功能我不是需要的，所以，我就是用官方提供的在线构建器，选择需要的功能。

 

 

，当通过 npm folder形式进行安装后，使用的问题情况是 页面里并没有出现工具栏和悬浮菜单框，通过查看提供的例子，里面是需要配置的，所以，通过vue配置一下就可以正常使用了

 

 

 总结的就一句话，官方提供的ckeditor版本可以照着官方文档就可以正常使用；而通过ckeditor提供的在线构建器构建的版本，这个配置项不可或缺，不然，页面不会出现菜单项。

这个是单文件组件的data项，Vue.use(CKEditor) 就可以使用这个组件了

<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>