TreeNode editor | upload obrázků z CKEditoru.

seminar/forms.py

@@ -277,3 +277,8 @@ ReseniSPrilohamiFormSet = inlineformset_factory(m.Reseni,m.PrilohaReseni,
 
 		)
 
+class NahrajObrazekKTreeNoduForm(forms.ModelForm):
+	class Meta:
+		model = m.Obrazek
+		fields = ('na_web',)
+

seminar/urls.py

@@ -121,6 +121,7 @@ urlpatterns = [
 	path('temp/nahraj_reseni', views.NahrajReseniView.as_view(),name='seminar_nahraj_reseni'),
 
 	re_path(r'^temp/vue/.*$',views.VueTestView.as_view(),name='vue_test_view'),
+	path('temp/image_upload/', views.NahrajObrazekKTreeNoduView.as_view()),
 
 	path('', views.TitulniStranaView.as_view(), name='titulni_strana'),
 

seminar/views/views_all.py

@@ -1492,3 +1492,27 @@ class PasswordChangeView(auth_views.PasswordChangeView):
 
 class VueTestView(generic.TemplateView):
 	template_name = 'seminar/vuetest.html'
+
+class NahrajObrazekKTreeNoduView(LoginRequiredMixin, CreateView):
+	model = s.Obrazek
+	form_class = f.NahrajObrazekKTreeNoduForm
+
+	def get_initial(self):
+		initial = super().get_initial()
+		initial['na_web'] = self.request.FILES['upload']
+		return initial
+
+
+	def form_valid(self,form):
+		print(self.request.headers)
+		print(self.request.headers['Textid'])
+		print(form.instance)
+		print(form)
+		self.object = form.save(commit=False)
+		print(self.object.na_web)
+		self.object.text = m.Text.objects.get(pk=int(self.request.headers['Textid']))
+		self.object.save()
+
+		return JsonResponse({"url":self.object.na_web.url})
+
+	

vue_frontend/package.json

@@ -8,9 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@ckeditor/ckeditor5-build-classic": "^22.0.0",
+    "@ckeditor/ckeditor5-upload": "^23.0.0",
     "@ckeditor/ckeditor5-vue": "^1.0.1",
     "axios": "^0.19.2",
+    "ckeditor5-build-classic-simple-upload-adapter-image-resize": "^1.0.4",
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-router": "^3.4.3"

vue_frontend/src/components/TextNode.vue

@@ -19,7 +19,8 @@
 <script>
 import axios from 'axios'
 
-import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
+//import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
+import ClassicEditor from 'ckeditor5-build-classic-simple-upload-adapter-image-resize';
 import CKEditor from '@ckeditor/ckeditor5-vue';
 
 export default {
@@ -29,6 +30,14 @@ export default {
 		editor: ClassicEditor,
 		editorData: '<p>Content of the editor.</p>',
 		editorConfig: {
+			extraPlugins: ['SimpleUploadAdapter'],
+			simpleUpload: {
+				uploadUrl: "/temp/image_upload/",
+				headers: {
+					"test":"testh"
+				},
+				withCredentials: true
+			}
 			// The configuration of the editor.
 		},
 		editorShow: false,
@@ -43,7 +52,16 @@ export default {
 			return {
 				changed: this.currentText !== this.originalText,
 				}
+			},
+		textId: function () {
+			console.log(this.create);
+			console.log(this.node.text.id);
+			if (this.create){
+				return null;
 			}
+			return this.node.text.id;
+
+		}
 	},
 	props: {
 		item: Object,
@@ -54,6 +72,7 @@ export default {
 	},
 	mounted: function() {
 		//console.log("mounted");
+		this.editorConfig.simpleUpload.headers['X-CSRFToken'] = this.getCookie('csrftoken');
 		if (this.create){
 			this.currentText = "";
 			this.originalText = "";
@@ -61,11 +80,28 @@ export default {
 		} else {
 			this.currentText = this.item.node.text.na_web;
 			this.originalText = this.item.node.text.na_web;
+			this.editorConfig.simpleUpload.headers.textId = this.item.node.text.id;
 
 		}
 		//this.getText();
 	},
 	methods: {
+		getCookie: function (name){
+			var cookieValue = null;
+			if (document.cookie && document.cookie != '') {
+				var cookies = document.cookie.split(';');
+				for (var i = 0; i < cookies.length; i++) {
+					var cookie = cookies[i].trim();
+					// Does this cookie string begin with the name we want?
+
+					if (cookie.substring(0, name.length + 1) == (name + '=')) {
+						cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+						break;
+					}
+				}
+			}
+			return cookieValue;
+		},
 		getText: function() {
 			this.loading = true;
 			console.log(this.item);

vue_frontend/yarn.lock

@@ -863,10 +863,47 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@ckeditor/ckeditor5-build-classic@^22.0.0":
-  version "22.0.0"
-  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-build-classic/-/ckeditor5-build-classic-22.0.0.tgz#24e4a32a4d68211c58b4ea49e794217bd61bf0b7"
-  integrity sha512-Vcy7vqSDv1xH6ACi2RW25+wIEEKrzEYb+dpgL/yTfhqv0wlswl4tn1VOfEbzGNrgQCio3djxkF813be29IfmWA==
+"@ckeditor/ckeditor5-core@^23.0.0":
+  version "23.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-core/-/ckeditor5-core-23.0.0.tgz#ae1a29bccd100e8fed5998f58abce4e6c47cd208"
+  integrity sha512-NjelymGQBJPnEplS0rN/y6oDCdg6+5BcFF5NffxCzzXyqrFguIVSzgSaBXB7ujwX6AkecvEPM7yN8UQg+8z98A==
+  dependencies:
+    "@ckeditor/ckeditor5-engine" "^23.0.0"
+    "@ckeditor/ckeditor5-utils" "^23.0.0"
+    lodash-es "^4.17.15"
+
+"@ckeditor/ckeditor5-engine@^23.0.0":
+  version "23.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-engine/-/ckeditor5-engine-23.0.0.tgz#9ab22fdaff274b4e94f76f74b70d119cc5d88ddb"
+  integrity sha512-DKYHxN7WORlX3HsgEXMlIaUQFfyGzg21aMA8vRIl3IZrDKdsyJILu63Z+CTs0NSP5CGZyOqwSPE20Pf5luQrUA==
+  dependencies:
+    "@ckeditor/ckeditor5-utils" "^23.0.0"
+    lodash-es "^4.17.15"
+
+"@ckeditor/ckeditor5-ui@^23.0.0":
+  version "23.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-ui/-/ckeditor5-ui-23.0.0.tgz#2beead2be04cf23f7af2a3a660ad0ecb1bb7ecd6"
+  integrity sha512-X8RyCPMRWBYkb+Ze3e588JOGWfVz8C4cwkYbCHoKC9IaAnJhVeFngQIRMEP4+lTdqTEBW6q/5RZotKLlNOPY2g==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "^23.0.0"
+    "@ckeditor/ckeditor5-utils" "^23.0.0"
+    lodash-es "^4.17.15"
+
+"@ckeditor/ckeditor5-upload@^23.0.0":
+  version "23.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-upload/-/ckeditor5-upload-23.0.0.tgz#a9cbde33dcbf8e7d40273afd6cc5799233401291"
+  integrity sha512-mqWpUP5HzRjj5s+fBxVxs+M4xFBK05nQybbOIDZGLTtdUm8dNghOpz9m9PFZlTLu5GaaROGERIXxEatYafqxDw==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "^23.0.0"
+    "@ckeditor/ckeditor5-ui" "^23.0.0"
+    "@ckeditor/ckeditor5-utils" "^23.0.0"
+
+"@ckeditor/ckeditor5-utils@^23.0.0":
+  version "23.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-utils/-/ckeditor5-utils-23.0.0.tgz#1e002dbf5dc1890cfea6d3bd9213005205861689"
+  integrity sha512-el37RemQW207NBN3/DK5XNsFPiyno67bAAQ0Xw0nLqqgQhxPP+UyIWlG2F2Oa7eiVWg2/UdGgeQOOq/OV3ZYTA==
+  dependencies:
+    lodash-es "^4.17.15"
 
 "@ckeditor/ckeditor5-vue@^1.0.1":
   version "1.0.1"
@@ -2377,6 +2414,11 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+ckeditor5-build-classic-simple-upload-adapter-image-resize@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/ckeditor5-build-classic-simple-upload-adapter-image-resize/-/ckeditor5-build-classic-simple-upload-adapter-image-resize-1.0.4.tgz#9ded03761c6d3bbc42d995aa038a3304f24dee04"
+  integrity sha512-9h1ypNTsmZMfKUcWmE0huvRr2BsgPKTyiar5v+aLJS2UkSdNNgD/Lw+baGLgnkVjIG+iVsQCR5V9JRSgyrVrkg==
+
 class-utils@^0.3.5:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
@@ -5138,6 +5180,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash-es@^4.17.15:
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
+  integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
+
 lodash.defaultsdeep@^4.6.1:
   version "4.6.1"
   resolved "https://registry.yarnpkg.com/lodash.defaultsdeep/-/lodash.defaultsdeep-4.6.1.tgz#512e9bd721d272d94e3d3a63653fa17516741ca6"