add editorjs config
This commit is contained in:
parent
96ea6ed486
commit
d6a05fb3a3
|
@ -782,6 +782,53 @@ $links: (
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ejs-link {
|
||||||
|
margin: 10px auto;
|
||||||
|
max-width: 80%;
|
||||||
|
border: 2px solid $color-very-light-grey;
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
&--anchor {
|
||||||
|
display: block;
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-content {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
|
||||||
|
&--title {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--description {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--link {
|
||||||
|
padding-top: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$image-size: 85px;
|
||||||
|
|
||||||
|
&--anchor--with-image &-content {
|
||||||
|
width: calc(100% - $image-size - 5px);
|
||||||
|
padding-right: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--image {
|
||||||
|
display: inline-block;
|
||||||
|
width: $image-size;
|
||||||
|
height: $image-size;
|
||||||
|
background-position: center center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 1280px) {
|
@media screen and (max-width: 1280px) {
|
||||||
.mesh-wrapper {
|
.mesh-wrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -893,11 +940,20 @@ $links: (
|
||||||
.quick-video .video-ratio,
|
.quick-video .video-ratio,
|
||||||
.quick-image img,
|
.quick-image img,
|
||||||
.content hr,
|
.content hr,
|
||||||
|
.ejs-link,
|
||||||
.alert
|
.alert
|
||||||
{
|
{
|
||||||
border-color: #86899f;
|
border-color: #86899f;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.quick-body {
|
||||||
|
background: #43444f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ejs-link {
|
||||||
|
background: #43444f;
|
||||||
|
}
|
||||||
|
|
||||||
.code-title {
|
.code-title {
|
||||||
background: #000000;
|
background: #000000;
|
||||||
}
|
}
|
||||||
|
|
|
@ -68,6 +68,10 @@ core:
|
||||||
templates:
|
templates:
|
||||||
- {name: "Par défaut", file: "page/text/default.txt.twig"}
|
- {name: "Par défaut", file: "page/text/default.txt.twig"}
|
||||||
|
|
||||||
|
editor_js:
|
||||||
|
blocks:
|
||||||
|
link: 'editorjs/link.html.twig'
|
||||||
|
|
||||||
file_manager:
|
file_manager:
|
||||||
mimes:
|
mimes:
|
||||||
- image/png
|
- image/png
|
||||||
|
|
|
@ -4,12 +4,11 @@ namespace App\Entity\Blog;
|
||||||
|
|
||||||
use App\Core\Doctrine\Timestampable;
|
use App\Core\Doctrine\Timestampable;
|
||||||
use App\Core\Entity\EntityInterface;
|
use App\Core\Entity\EntityInterface;
|
||||||
|
use App\Core\File\FileAttribute;
|
||||||
use App\Repository\Blog\PostRepository;
|
use App\Repository\Blog\PostRepository;
|
||||||
use Doctrine\Common\Collections\ArrayCollection;
|
use Doctrine\Common\Collections\ArrayCollection;
|
||||||
use Doctrine\Common\Collections\Collection;
|
use Doctrine\Common\Collections\Collection;
|
||||||
use Doctrine\ORM\Mapping as ORM;
|
use Doctrine\ORM\Mapping as ORM;
|
||||||
use Symfony\Component\HttpFoundation\File\File;
|
|
||||||
use App\Core\File\FileAttribute;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @ORM\Entity(repositoryClass=PostRepository::class)
|
* @ORM\Entity(repositoryClass=PostRepository::class)
|
||||||
|
@ -154,6 +153,10 @@ class Post implements EntityInterface
|
||||||
|
|
||||||
public function getContent(): ?string
|
public function getContent(): ?string
|
||||||
{
|
{
|
||||||
|
if ('editorjs' === $this->getContentFormat()) {
|
||||||
|
return $this->content ?? '[]';
|
||||||
|
}
|
||||||
|
|
||||||
return $this->content;
|
return $this->content;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -22,6 +22,7 @@ use Symfony\Component\Validator\Constraints\NotBlank;
|
||||||
use Symfony\Component\Validator\Constraints\Range;
|
use Symfony\Component\Validator\Constraints\Range;
|
||||||
use Symfony\Component\Validator\Constraints\Url;
|
use Symfony\Component\Validator\Constraints\Url;
|
||||||
use App\Form\Type\SimpleMdTextareaType;
|
use App\Form\Type\SimpleMdTextareaType;
|
||||||
|
use App\Core\Form\Type\EditorJsTextareaType;
|
||||||
|
|
||||||
class PostType extends AbstractType
|
class PostType extends AbstractType
|
||||||
{
|
{
|
||||||
|
@ -49,6 +50,7 @@ class PostType extends AbstractType
|
||||||
'choices' => [
|
'choices' => [
|
||||||
'Markdown' => 'markdown',
|
'Markdown' => 'markdown',
|
||||||
'HTML' => 'html',
|
'HTML' => 'html',
|
||||||
|
'Editor JS' => 'editorjs',
|
||||||
],
|
],
|
||||||
'constraints' => [
|
'constraints' => [
|
||||||
new NotBlank(),
|
new NotBlank(),
|
||||||
|
@ -56,9 +58,15 @@ class PostType extends AbstractType
|
||||||
]
|
]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
$types = [
|
||||||
|
'markdown' => SimpleMdTextareaType::class,
|
||||||
|
'html' => SimpleMdTextareaType::class,
|
||||||
|
'editorjs' => EditorJsTextareaType::class,
|
||||||
|
];
|
||||||
|
|
||||||
$builder->add(
|
$builder->add(
|
||||||
'content',
|
'content',
|
||||||
SimpleMdTextareaType::class,
|
$types[$builder->getData()->getContentFormat() ?? 'markdown'],
|
||||||
[
|
[
|
||||||
'label' => 'Contenu',
|
'label' => 'Contenu',
|
||||||
'required' => false,
|
'required' => false,
|
||||||
|
|
21
templates/editorjs/link.html.twig
Normal file
21
templates/editorjs/link.html.twig
Normal file
|
@ -0,0 +1,21 @@
|
||||||
|
{% block render %}
|
||||||
|
<div class="ejs-link">
|
||||||
|
<a href="{{ link }}" class="ejs-link--anchor {% if meta.image %}ejs-link--anchor--with-image{% endif %}">
|
||||||
|
<div class="ejs-link-content">
|
||||||
|
{% if meta.title %}
|
||||||
|
<div class="ejs-link-content--title">{{- meta.title -}}</div>
|
||||||
|
{% endif %}
|
||||||
|
{% if meta.title %}
|
||||||
|
<div class="ejs-link-content--description">{{- meta.description -}}</div>
|
||||||
|
{% endif %}
|
||||||
|
{% if link %}
|
||||||
|
<div class="ejs-link-content--link">{{- link -}}</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% if meta.image %}
|
||||||
|
<div class="ejs-link--image" style="background-image: url('{{ meta.image.url }}')"></div>
|
||||||
|
{% endif %}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
|
@ -43,10 +43,10 @@
|
||||||
|
|
||||||
{% if post.contentFormat == 'html' %}
|
{% if post.contentFormat == 'html' %}
|
||||||
{{- post.content|murph_url|file_attributes|post -}}
|
{{- post.content|murph_url|file_attributes|post -}}
|
||||||
{% endif %}
|
{% elseif post.contentFormat == 'markdown' %}
|
||||||
|
|
||||||
{% if post.contentFormat == 'markdown' %}
|
|
||||||
{{- post.content|murph_url|file_attributes|markdown('post') -}}
|
{{- post.content|murph_url|file_attributes|markdown('post') -}}
|
||||||
|
{% elseif post.contentFormat == 'editorjs' %}
|
||||||
|
{{- post.content|murph_url|file_attributes|editorjs_to_html -}}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if not full %}
|
{% if not full %}
|
||||||
|
@ -92,11 +92,11 @@
|
||||||
|
|
||||||
<div class="body-content">
|
<div class="body-content">
|
||||||
{% if post.contentFormat == 'html' %}
|
{% if post.contentFormat == 'html' %}
|
||||||
{{- post.content|murph_url|post -}}
|
{{- post.content|murph_url|file_attributes|post -}}
|
||||||
{% endif %}
|
{% elseif post.contentFormat == 'markdown' %}
|
||||||
|
{{- post.content|murph_url|file_attributes|markdown('post')|lazy_load -}}
|
||||||
{% if post.contentFormat == 'markdown' %}
|
{% elseif post.contentFormat == 'editorjs' %}
|
||||||
{{- post.content|murph_url|markdown('post')|lazy_load -}}
|
{{- post.content|murph_url|file_attributes|editorjs_to_html|raw -}}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
Loading…
Reference in a new issue