fontcolor plugin doesn't work - redactor

I added fontcolor plugin on the last version of RedactorJS (9.1.1). It doesn't work. I can't add a plunker / jsFiddle because RedactorJS need a licence but I give my conf file:
<script src="redactor/redactor.min.js"></script>
<script src="plugins/fontcolor/fontcolor.js"></script>
<script type="text/javascript">
$(function() {
$('#redactor').redactor({
buttons: [
'bold',
'italic',
'underline',
'fontcolor',
'formatting',
'image',
'link',
'unorderedlist',
'orderedlist',
'alignment',
'|',
'html'
]
});
});
</script>
<textarea id="redactor" name="content">
<h2>Hello and Welcome</h2>
<p>...</p>
</textarea>

FIX this that:
$('#redactor').redactor({
plugins: ['fontcolor'],
buttons: [
'bold',
'italic',
'underline',
'formatting',
'image',
'link',
'unorderedlist',
'orderedlist',
'alignment',
'|',
'html'
]
});

Related

KnpSnappyBundle header and footer doesn't show

As the title says I can't visualize the footer and header with knp_snappy.pdf, I have seen several examples and none has worked for me, I get the pdf but not the footer and header, I don't know is config problem or something else, this link below works but others but not in my code.
I am using symfony 3.4 , "knplabs/knp-snappy-bundle": "^1.5" and wkhtmltopdf-0.12.2.4
Examples:
https://github.com/KnpLabs/KnpSnappyBundle/issues/195
https://github.com/KnpLabs/KnpSnappyBundle/issues/154
This is my code:
config.yml
knp_snappy:
pdf:
enabled: true
binary: /usr/bin/xvfb-run /usr/bin/wkhtmltopdf
options: []
pdf/report.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My PDF</title>
</head>
<body>
<h1>My PDF</h1>
<p>Harum trium sententiarum nulli prorsus assentior.</p>
<h1>My PDF</h1>
</body>
</html>
pdf/footer.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contrat Thuasne Services</title>
<script>
/* page counter */
function subst() {
var vars={};
var x=document.location.search.substring(1).split('&');
for (var i in x) {var z=x[i].split('=',2);vars[z[0]] = unescape(z[1]);}
var x=['topage','page'];
for (var i in x) {
var y = document.getElementsByClassName(x[i]);
for (var j=0; j<y.length; ++j) y[j].textContent = vars[x[i]];
}
}
</script>
</head>
<body onload="subst()">
<footer>
<table>
<tr>
<td style="width: 33%;">Test</td>
<td style="width: 34%;" class="center"><span class="page"></span>/<span class="topage"></span></td>
<td style="width: 33%;" class="right">© Society {{ "now"|date("Y") }}</td>
</tr>
</table>
</footer>
</body>
</html>
controler
public function testPDFAction()
{
$snappy = $this->get('knp_snappy.pdf');
$content = $this->renderView( 'pdf/report.html.twig' );
$footer = $this->renderView( 'pdf/footer.html.twig' );
//$snappy->setOption('header-html', $header);
$snappy->setOption('footer-html', $footer);
$html = $snappy->getOutputFromHtml($content);
return new Response($html,200, [
'Content-Type' => 'application/pdf',
'Content-Disposition' => 'inline; filename="test.pdf"'
]
);
// Others test i make
/*$html = $snappy->getOutputFromHtml($content,
[
// 'images' => true,
'enable-javascript' => true,
'page-size' => 'A4',
// 'viewport-size' => '1280x1024',
'header-html' => $header,
'footer-html' => $footer,
'margin-left' => '10mm',
'margin-right' => '10mm',
'margin-top' => '30mm',
'margin-bottom' => '25mm',
]);*/
//$snappy->setOption('header-html', $header);
// $snappy->getOutputFromHtml($html);
/*$options = [
'header-html' => $header,
'footer-html' => $footer
];*/
/*return new PdfResponse(
$this->get('knp_snappy.pdf')->getOutputFromHtml($html, $options),
'file.pdf'
);*/
/*return new Response(
$this->get('knp_snappy.pdf')->getOutputFromHtml($html,$options),
200,
[
'Content-Type' => 'application/pdf',
'Content-Disposition' => sprintf('attachment; filename="%s"', "test"),
]
);*/
}
I don't know what is the problem, thanks in advance!!

Remove default CSS imports and JS files in Drupal

I'm building my first Drupal theme and found out something rather shocking. Drupal 7 imports 10 CSS files by default.
<style type="text/css" media="all">
#import url("http://localhost/drupal/modules/system/system.base.css?oq6xx1");
#import url("http://localhost/drupal/modules/system/system.menus.css?oq6xx1");
#import url("http://localhost/drupal/modules/system/system.messages.css?oq6xx1");
#import url("http://localhost/drupal/modules/system/system.theme.css?oq6xx1");
</style>
<style type="text/css" media="all">
#import url("http://localhost/drupal/modules/comment/comment.css?oq6xx1");
#import url("http://localhost/drupal/modules/field/theme/field.css?oq6xx1");
#import url("http://localhost/drupal/modules/node/node.css?oq6xx1");
#import url("http://localhost/drupal/modules/search/search.css?oq6xx1");
#import url("http://localhost/drupal/modules/user/user.css?oq6xx1");
</style>
<style type="text/css" media="all">
#import url("http://localhost/drupal/themes/stark/layout.css?oq6xx1");
</style>
And then this included too (not sure why or what it does)
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, {"basePath":"\/drupal\/","pathPrefix":"","ajaxPageState":{"theme":"stark","theme_token":"3s2kHk4YAL5BDTRW1hanuB6zKdWug7cniWp_uAyRBKk","js":{"misc\/jquery.js":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1},"css":{"modules\/system\/system.base.css":1,"modules\/system\/system.menus.css":1,"modules\/system\/system.messages.css":1,"modules\/system\/system.theme.css":1,"modules\/comment\/comment.css":1,"modules\/field\/theme\/field.css":1,"modules\/node\/node.css":1,"modules\/search\/search.css":1,"modules\/user\/user.css":1,"themes\/stark\/layout.css":1}},"urlIsAjaxTrusted":{"\/drupal\/node?destination=node":true}});
//--><!]]>
</script>
I'm building a simple Drupal website from scratch and don't need those 2000 lines of css codes in the frontend. How do I proceed and remove it all? I just need my custom-style.css file and that's it.
You can use hook_css_alter api to remove core and crontributed module default css files.
https://api.drupal.org/api/drupal/modules%21system%21system.api.php/function/hook_css_alter/7.x
For Javascript check this hook_js_alter: https://api.drupal.org/api/drupal/modules%21system%21system.api.php/function/hook_js_alter/7.x
for example:
<?php
function YOUR_THEME_css_alter(&$css) {
// Remove Drupal core css
$exclude = array(
'modules/aggregator/aggregator.css' => FALSE,
'modules/block/block.css' => FALSE,
'modules/book/book.css' => FALSE,
'modules/comment/comment.css' => FALSE,
'modules/dblog/dblog.css' => FALSE,
'modules/field/theme/field.css' => FALSE,
'modules/file/file.css' => FALSE,
'modules/filter/filter.css' => FALSE,
'modules/forum/forum.css' => FALSE,
'modules/help/help.css' => FALSE,
'modules/menu/menu.css' => FALSE,
'modules/node/node.css' => FALSE,
'modules/openid/openid.css' => FALSE,
'modules/poll/poll.css' => FALSE,
'modules/profile/profile.css' => FALSE,
'modules/search/search.css' => FALSE,
'modules/statistics/statistics.css' => FALSE,
'modules/syslog/syslog.css' => FALSE,
'modules/system/admin.css' => FALSE,
'modules/system/maintenance.css' => FALSE,
'modules/system/system.css' => FALSE,
'modules/system/system.admin.css' => FALSE,
'modules/system/system.base.css' => FALSE,
'modules/system/system.maintenance.css' => FALSE,
'modules/system/system.messages.css' => FALSE,
'modules/system/system.menus.css' => FALSE,
'modules/system/system.theme.css' => FALSE,
'modules/taxonomy/taxonomy.css' => FALSE,
'modules/tracker/tracker.css' => FALSE,
'modules/update/update.css' => FALSE,
'modules/user/user.css' => FALSE,
'misc/vertical-tabs.css' => FALSE,
// Remove contrib module CSS
drupal_get_path('module', 'views') . '/css/views.css' => FALSE, );
$css = array_diff_key($css, $exclude);
}
?>

Growl Widget Kartik with AdminLTE template

How i can intregate Growl Widget Kartik Yii2 with AdminLTE Template. When i used the widget not show the animation and position defined from Controller.
CompraController.php
... if ($flag) {
$transaction->commit();
Yii::$app->getSession()->setFlash('success', [
'type' => 'success',
'duration' => 5000,
'icon' => 'glyphicon glyphicon-ok',
'message' => ' Compra Registrada ;)',
'title' => 'Registro Compra',
'positonY' => 'top',
'positonX' => 'right'
]);
return $this->redirect(['index']);
}
main.php
... <?php foreach (Yii::$app->session->getAllFlashes() as $message):; ?>
<?php
echo Growl::widget([
'type' => (!empty($message['type'])) ? $message['type'] : 'danger',
'title' => (!empty($message['title'])) ? Html::encode($message['title']) : 'Title Not Set!',
'icon' => (!empty($message['icon'])) ? $message['icon'] : 'fa fa-info',
'body' => (!empty($message['message'])) ? Html::encode($message['message']) : 'Message Not Set!',
'showSeparator' => true,
'delay' => 1, //This delay is how long before the message shows
'pluginOptions' => [
'delay' => (!empty($message['duration'])) ? $message['duration'] : 3000, //This delay is how long the message shows for
'placement' => [
'from' => (!empty($message['positonY'])) ? $message['positonY'] : 'top',
'align' => (!empty($message['positonX'])) ? $message['positonX'] : 'right',
]
],
'useAnimation'=>true
]);
?>
<?php endforeach; ?>
When i use the normal template of Yii2 works fine:
But when i use the AdminLTE template, every option is trated like a different notification:
Apparently the AdminLTE Template it has its own notification methods that prevent the execution of Growl Widget. I remove the line:
<?= Alert::widget() ?> in:
<section class="content">
<?= Alert::widget() ?>
<?= $content ?>
</section>
from the file views/layout/content.php and works fine.

Modal window for edit model in Sonata Admin

How can I set-up the an Admin class in SonataAdminBundle, to display the form for adding/editing an entity in a modal window? Like below:
Manually you can do it yourself.
Add in your config service
calls:
- [ setTemplate, [list, AcmeYourBundle:Your:base_list.html.twig]]
- [ setTemplate, [edit, AcmeYourBundle:Your:base_edit.html.twig]]
In your admin bundle add custom templete in configureListFields
protected function configureListFields(ListMapper $listMapper) {
$listMapper
->add('_action', 'actions', array(
'actions' => array(
'edit' => array('template' => 'AcmeYourBundle:Your:_action_edit.html.twig'),
)
));
}
_action_edit.html.twig
{% if admin.hasRoute('edit') and admin.id(object) and admin.isGranted('EDIT', object)%}
<a class="edit sonata-action-element" href="{{ admin.generateObjectUrl('edit', object) }}">
<i class="fa fa-edit"></i>
{{ 'link_action_edit'|trans({}, 'SonataAdminBundle') }}
</a>
{% endif %}
Add javascript code in base_list.html.twig
<script type="text/javascript">
$(document).ready(function() {
$('a.edit').click(function() { //bind handlers
var url = $(this).attr('href');
showDialog(url);
return false;
});
$("#targetDiv").dialog({
autoOpen: false,
height: 700,
width: 950,
modal: true
});
function showDialog(url) {
$("#targetDiv").load(url);
$("#targetDiv").dialog("open");
}
});
</script>
Done ! Enjoy it.
This is not supported yet, this is a planned feature but no ETA for now.

Intergrate Jplayer with Wordpress

I want to make a playlist made of files added to a Wordpress custom meta box. jPlayer generates the list using javascript, is there any way to bypass this and use regular html?
Edit:
Or could I get some guidance on how to call a wp function into the playlist? I am getting some ideas from call-php-function-from-jquery, but I am not sure how I would create multiple items/tracks or loop through them in the jquery script?
new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_2",
cssSelectorAncestor: "#jp_container_2"
}, [
{
title:"1",
mp3:"url/file",
oga:"url/file"
},
{
title:"2",
mp3:"url/file",
oga:"url/file"
},
], {
swfPath: "js",
supplied: "oga, mp3",
wmode: "window",
smoothPlayBar: true,
keyEnabled: true
});
Update:
I am now echoing my post_mime_types as '$alltracks' into the jquery script Like this:
<?php
$query_audio_args = array(
'post_type' => 'attachment',
'post_mime_type' =>'application/ogg',
);
$audio_attachments = get_posts($query_audio_args);
foreach ( $audio_attachments as $audio_attachment ) {
$ogg = wp_get_attachment_url( $audio_attachment->ID );
$tracks[] = '{
title:"'.$audio_attachment->post_title.'",
oga:"'.$ogg.'",
}';
$alltracks = implode(',',$tracks);
}
?>
$(document).ready(function() {
new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_2",
cssSelectorAncestor: "#jp_container_2"
}, [
<?php echo $alltracks; ?>
], {
swfPath: "js",
supplied: "oga, mp3,aif",
wmode: "window",
smoothPlayBar: true,
keyEnabled: true
});
});

Resources