<link rel="stylesheet" href="{{asset('assets/imagepostion/article-editor.min.css')}}" />
<script src="{{asset('assets/imagepostion/article-editor.js')}}"></script>
<script src="{{asset('assets/imagepostion/reorder.min.js')}}"></script>
<script src="{{asset('assets/imagepostion/inlineformat.min.js')}}"></script>
<script src="{{asset('assets/imagepostion/style.min.js')}}"></script>
<script src="{{asset('assets/imagepostion/imageposition.min.js')}}"></script>
<script src="{{asset('assets/imagepostion/imageresize.min.js')}}"></script>
<script src="{{asset('assets/imagepostion/definedlinks.min.js')}}"></script>
<script src="{{asset('assets/imagepostion/variable.min.js')}}"></script>
<script src="{{asset('assets/imagepostion/en.js')}}"></script>
<script>
var links = [];
var app = null;
var selected_editor = null;
{% if is_granted('ROLE_SUPER_ADMIN') or is_granted('ROLE_ADMIN') %}
let variable_plugin = ['reorder','imageposition','FileManager','myplugin','imageresize','style','definedlinks','makebutton','variable'];
let bar_hide = [];
{% else %}
let variable_plugin = ['reorder'];
let bar_hide = ['image','code','layer','embed'];
{% endif %}
$.ajax({
url: "{{path('admin_editor_link')}}",
type: "GET",
success:function(data){
ArticleEditor.add('plugin', 'myplugin', {
// call when the editor initialize all modules & plugins (optional method)
init: function() {
// define local variables
//this.myvariable = true;
},
// call when the editor starts (optional method)
start: function() {
this.app.toolbar.add('FileManager', {
title: 'FileManager',
icon: '<i class="fa fa-folder"></i>',
command: 'myplugin.popup'
});
this.app.toolbar.add('mybutton', {
title: 'Fullscreen',
icon: '<i class="fa fa-expand"></i>',
command: 'myplugin.myMethod'
});
},
// call when the editor stops (optional method)
stop: function() {
// this.myvariable = false;
},
// public methods
myMethod: function() {
let target = $(this.app.editor.$editor.nodes).closest('.target');
if(target.hasClass("fullscreen")){
target.removeClass("fullscreen");
}else{
target.addClass("fullscreen");
}
},
popup: function(params, button) {
selected_editor = this.app.editor;
$('#cms_modal_file_manager_editor').modal('show');
},
});
app = ArticleEditor('.entry', {
plugins: variable_plugin,
addbarHide: bar_hide,
css: '/assets/imagepostion/article-dist-path/',
editor: {
lang: 'fr'
},
custom: {
css: ['https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&display=swap',
'/assets/imagepostion/article-dist-path/your-image-styles.css',
'/assets/imagepostion/article-dist-path/article-custom.min.css',
'/assets/imagepostion/article-dist-path/bootstrap-grid.min.css'
]
},
variable: {
items: ['NOM_SOCIETE',
'STATUT_JURIDIQUE',
'COMPANY_COM_NAME',
'COMPANY_SIRET',
'COMPANY_SIREN',
'COMPANY_TVA_INTRA',
'RESPONSABLE',
'CNIL_NUMBER',
'LEADER_NAME',
'LEADER_FIRSTNAME',
'CAPITAL',
'ADRESSE',
'COMP_ADRESSE',
'CODE_POSTAL',
'VILLE',
'PAYS',
'TEL',
'PORT',
'DIRECTEUR_PUB',
'EMAIL'
],
template: {
start: '[',
end: ']'
}
},
//templates: {},
classes: {
blocks: {
'quote': 'quote'
},
},
imageposition: {
items: {
left: 'my-float-left',
center: 'my-align-center',
right: 'my-float-right'
}
},
image: {
upload: '/console/ajax/editor_upload',
//select: '/console/ajax/editor_images'
},
grid: {
classname: 'row',
columns: 12,
gutter: '1px',
offset: {
top: '15px',
bottom: '15px',
left: '15px',
right: '15px'
},
patterns: {
'6|6': 'col-sm-12 col-md-6|col-sm-12 col-md-6',
'4|4|4': 'col-sm-12 col-md-4|col-sm-12 col-md-4|col-sm-12 col-md-4',
'3|3|3|3': 'col-3|col-3|col-3|col-3',
'2|2|2|2|2|2': 'col-2|col-2|col-2|col-2|col-2|col-2',
'3|6|3': 'col-3|col-6|col-3',
'2|8|2': 'col-2|col-8|col-2',
'5|7': 'col-sm-12 col-md-5|col-sm-12 col-md-7',
'7|5': 'col-sm-12 col-md-7|col-sm-12 col-md-5',
'4|8': 'col-sm-12 col-md-4|col-sm-12 col-md-8',
'8|4': 'col-sm-12 col-md-8|col-sm-12 col-md-4',
'3|9': 'col-sm-12 col-md-3|col-sm-12 col-md-9',
'9|3': 'col-sm-12 col-md-9|col-sm-12 col-md-3',
'2|10': 'col-sm-12 col-md-2|col-sm-12 col-md-10',
'10|2': 'col-sm-12 col-md-10|col-sm-2 col-md-2',
'12': 'col-12'
}
},
styles: {
paragraph: {
'lead': {
title: '<span style="font-size: 24px; color: #444;">Lead</span>',
classname: 'st-lead'
},
'note': {
title: '<span style="background-color: #fffcba; color: #111; display: block;">Note</span>',
classname: 'st-note'
},
'accent': {
title: '<span style="font-weight: bold; font-size: 20px;">Accent</span>',
classname: 'st-accent'
}
},
embed: {
'frame': {
title: 'Frame',
classname: 'st-embed-frame'
},
'raised': {
title: 'Raised',
classname: 'st-embed-raised'
}
},
line: {
'black-extra-height': {
title: '<span style="display: block; height: 4px; background: #000;"></span>',
classname: 'st-line-black-extra-height'
},
'gray-dashed': {
title: '<span style="display: block; border-top: 2px dashed #ccc;"></span>',
classname: 'st-line-gray-dashed'
},
'blue-line': {
title: '<span style="display: block; height: 2px; background: #458fff;"></span>',
classname: 'st-line-blue'
}
}
},
editor: {
scrollTarget: '.target'
},
definedlinks: data
});
}
});
$('#cms_modal_file_manager_editor #myframe-media').on('load', function () {
$(this).contents().on('click','.media-image',function () {
var path_image = $(this).attr('data-path-image');
selected_editor.insertContent({ html: "<img src="+path_image+" class='img-fluid' />" });
$('#cms_modal_file_manager_editor').modal('hide');
});
});
</script>