I'm building a web app with Piranha CMS & I'm attempting to alter the TinyMCE editor to allow for adding a class to an image. I've seen the relevant TinyMCE configuration docs
http://www.tinymce.com/wiki.php/Configuration:image_class_list
However, even after updating the relevant tinymce.init
https://github.com/PiranhaCMS/Piranha/blob/013ed850636a299c71f860f9ae769572e768af26/Core/Piranha/Areas/Manager/Views/Shared/Partial/TinyMCE.cshtml
to be
<script type="text/javascript" src="~/res.ashx/areas/manager/content/js/ext/tiny_mce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
mode: 'specific_textareas',
editor_selector: "editor",
convert_urls: false,
plugins: [
"autoresize autolink code hr paste piranhaimage link"
],
image_class_list: [
{title: 'None', value: ''},
{title: 'img-left', value: 'img-left'},
{title: 'img-border', value: 'img-border'},
{title: 'img-responsive', value: 'img-responsive'}
],
width: "100%",
height: "340",
autoresize_min_height: 340,
#if (File.Exists(Server.MapPath("~/areas/manager/content/css/editor.css"))) {
<text>content_css: "#Url.Content("~/areas/manager/content/css/editor.css")",</text>
}
toolbar: "bold italic underline | bullist numlist hr | formatselect removeformat | cut copy paste | link piranhaimage | code"
});
</script>
I find there is no effect (I've definitely cleard browser cache). I've noticed that the plugin that TinyMCE in Piranha CMS is using is piranhaimage not plain image as in TinyMCE docs. If that's the cause, how to configure for piranhaimage then?
The plugin code for piranhaimage can be found here:
https://github.com/PiranhaCMS/Piranha/blob/master/Core/Piranha/Areas/Manager/Content/Js/Ext/tiny_mce/plugins/piranhaimage/plugin.min.js
Unfortunately the current version doesn't support overriding assets, just views in the manager interface, but it could be a nice feature to add support to the core plugin for alignment.
One way of trying it out in your local project is to download TinyMCE and place it in your local project, then copy the piranhaimage plugin to your local TinyMCE directory. After that you can change the following line in the TinyMCE.cshtml you've already overridden:
<script type="text/javascript"
src="~/res.ashx/areas/manager/content/js/ext/tiny_mce/tinymce.min.js">
</script>
And instead let it point to your local URL! Then you can change it to what ever you want!
Regards
Related
I have a vue app with symfony backend. I use tinyMCE to edit documents which are generated by mpdf. In mpdf twig content I want to add page footer on some pages, and somepages without footer so I creeated html tag to enable or disable this footer. My HTML of this custom tags looks like this:
<pagefooter
name="NotLastPageFooter"
content-left=""
content-center="{PAGENO}/{nbpg}"
content-right=""
footer-style="font-size:10px">
</pagefooter>
<pagefooter
name="lastPageFooter"
content-left=""
content-center="{PAGENO}/{nbpg}"
content-right=""
footer-style="font-size:10px">
</pagefooter>
<setpagefooter
name="lastPageFooter"
value="off"
/>
<setpagefooter
name="NotLastPageFooter"
value="on"
/>
Whenever I edit generated document via TinyMCE it deletes my html blocks provided by mpdf and edited documents have no page footer. Below my tinyMCE config:
<editor
#onKeyUp="onDocumentUpdate(document, index, $event)"
:value="editor"
entity_encoding="raw"
output-format="html"
:init="{
allow_conditional_comments: false,
allow_unsafe_link_target: true,
convert_fonts_to_spans : false,
keep_styles: true,
custom_elements: 'pagefooter,setpagefooter',
extended_valid_elements :'setpagefooter[name],setpagefooter[value],pagefooter[name],pagefooter[content-center],pagefooter[content-right],pagefooter[footer-style]',
height: 600,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor code',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar:
'undo redo | formatselect | bold italic backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | removeformat | help code',
}"
/>
I suspect you are not using extended_valid_elements correctly. You don't repeat the tag multiple times in the configuration. The documentation has working examples:
https://www.tiny.cloud/docs/configure/content-filtering/#extended_valid_elements
For example:
extended_valid_elements : 'img[class|src|border=0|alt|title]'
...or...
extended_valid_elements :'setpagefooter[name|value],pagefooter[name|content-center|content-right|footer-style]',
Note that you put all the attributes in one set of brackets. Here is an example that appears to work for your example content:
http://fiddle.tinymce.com/iehaab
I have a help button in TinyMCE 4. When I click on the button nothing happens. In 3.1.2 I would get /iw/tinymce/jscripts/tiny_mce/themes/advanced/about.htm coming up.
I guess I did not find the proper documentation on how to implement this button in version 4. I tried to find in the TinyMCE docs and in threads here. Does anyone see what I am doing wrong in my Fiddle?
tinymce.init({
selector: 'textarea',
height: 500,
theme: 'modern',
plugins: [
'advlist autolink lists link image charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen',
'insertdatetime media nonbreaking save table contextmenu directionality',
'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc'
],
toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons | codesample | help',
image_advtab: true,
templates: [
{ title: 'Test template 1', content: 'Test 1' },
{ title: 'Test template 2', content: 'Test 2' }
],
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tinymce.com/css/codepen.min.css'
],
setup: function (editor) {
editor.on('load', function(e){
console.log('start debugging');
});
}
});
I have a TinyMCE 4.5 widget in my fiddle
This function was removed from TinyMCE 4 - the fact that adding the button to the toolbar still makes a button show up is likely an oversight/defect in TinyMCE 4.x.
In my brief testing the help button has been non-functional in all releases of TinyMCE 4 back to 4.0.
If you want that button to function I would open a request on the TinyMCE GitHub:
https://github.com/tinymce/tinymce/issues
I can't seem to set the default configuration for stfalcon's tinymce bundle. I followed the instructions given here to no avail.
This is what I have in my config.yml:
stfalcon_tinymce:
theme:
advanced:
plugins:
- "advlist autolink lists link image charmap print preview anchor"
- "searchreplace visualblocks code fullscreen"
- "insertdatetime media table contextmenu paste"
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
image_advtab: true
and instead of having the toolbar and plugins displayed for the textarea, I have nothing. Somehow, configuring it as I've done messes with tinymce's initialization. Does someone know where my mistake is?
Update
Looking at Firefox's debugger tool, it seems like the bit of code:
var settings = (typeof options.theme[theme] != 'undefined')
? options.theme[theme]
: options.theme['simple'];
settings.external_plugins = settings.external_plugins || {};
in init.standard.js is what causes the problem. settings is undefined in settings.external_plugins = settings.external_plugins || {};. I don't know what causes this. Initializing tinymce "manually" works though. I encounter no problem if instead of using the twig command, I simply put this on the html page:
<script type="text/javascript">
tinymce.init({
selector: "textarea",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
</script>
Well, after tinkering with init.standard.js, I've found the solution. Apparently, you have to pass a data-theme attribute to the textarea you want to tinymceize that corresponds to the theme you intend to have a default configuration for in config.yml. Otherwise, init.standard.js doesn't match your configuration seetings to its settings variable.
In my case, the theme configured was advanced so I just did this in my form builder:
$builder
// ...
->add('text', 'textarea', array(
'attr' => array(
'class' => 'tinymce',
'data-theme' => 'advanced'
)
))
// ...
That did the trick.
Here's brief checklist what you have to do:
∙ copy the resources to your web folder php app/console assets:install
∙ add this {{ tinymce_init() }} at the bottom of your page (in javascripts section)
∙ add tinymce selector to your form attributes:
<?php
$builder->add('yourtext', 'textarea', array(
'attr' => array(
'class' => 'tinymce',
)
));
∙ and configure the tinymce selector in your conf:
# app/config/config.yml
stfalcon_tinymce:
#...
selector: ".tinymce"
Try to check out whether you've done it.
Update
Also take a look at web browser console and fix the problems if any.
I'm trying to pass variable from tinyMCE to jbimages. What i have is:
tinymceInstance = tinymce.init({
selector: "textarea#desc",
theme: "modern",
skin: "light",
relative_urls: false,
width: 800,
height: 300,
relative_urls: false,
plugins: [
"link image preview hr anchor pagebreak ",
"searchreplace wordcount visualblocks visualchars code nonbreaking",
"directionality textcolor jbimages"
],
content_css: "css/content.css",
toolbar: "insertfile undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link image jbimages | print preview media fullpage | forecolor | spellchecker",
myVariable: 12345
});
jbimages is a plugin to upload images. In config.php file in jbimages
I have the following code that is executed:
$config['img_path'] = '/images'; // Relative to domain name
$config['upload_path'] = $_SERVER['DOCUMENT_ROOT'] . $config['img_path']; // Physical path. [Usually works fine like this]
How to retrieve variable myVariable from tinyMCE and use it in config.php. I tried a few things that I found on the web, but nothing seems to work.
Thanks in advance.
I think you will need to pass it trough a session variable using jQuery. Your tinymce runs on client side (your computer) while php runs on the server.
Take a look at this question and answers. You might find what your looking for there:
Setting session variable in php through jquery click event
My name is Josh and I work for a community college newspaper. I've just recently found Highcharts and have been attempting to embed a interactive graph into a post for our website, rather unsuccessfully. Actually, it's been a complete failure.
I have already read over and attempted this post to no avail:
highcharts and wordpress
There's no one I know who I can take this problem to and even though I feel like I've tried every suggested solution, Unfortunately, I'm rather illiterate when it comes to html and code. Any help would be GREATLY appreciated.
I am working with Wordpress 3.5.1 Here is the point I am currently at:
I am running: Allow PHP in Posts and Pages Plugin & Interactive Javascript and CSS.
For the header option of the post I have:
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"> </script>
<script src="http://www.domain.com/wp-content/uploads/2013/03/highcharts1.js" type="text/javascript"></script>
In some of the websites (this one included), I've seen mention of uploading the Highcharts library onto your wordpress server. I've uploaded the highcharts.js file through the media library but I have a feeling that I am doing this incorrectly?
In the post itself I have placed:
[php]
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'State Funding of DSPS Services',
x: -20 //center
},
subtitle: {
text: 'Source:MPR Associates Report',
x: -20
},
xAxis: {
categories: ['2003-04', '2004-05', '2005-06', '2006-07', '2007-08',
'2008-09', '2009-10', '2010-11', '2011-2012', '2012-13']
},
yAxis: {
title: {
text: '$ Million'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +' Million';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'College Total Funding',
data: [77.8, 81.8, 86.2, 102.1, 109.3, 108.9, 64.9, 64.8, 64.6, 65.7]
}]
});
});
});
[/php]
<div id="container" style="width: 100%; height: 400px"></div>
The page comes up blank, as it has been for the past hundred attempts or so. I apologize if this is post in the wrong spot or undesired. Any advice or solutions are greatly appreciated.
Thank you,
J
In order to get a chart rendered, you need several things to be in place:
Include the highcharts.js - done
Include some javascript which defines and creates a chart - done
Give highcharts a place to put the chart - ?
I think you may be missing the last element. This is done by including a tag inside your post somewhere. The div can be named using the 'id' property as follows:
<div id='container'>mydiv</div>
You have already told highcharts that you want to 'renderTo' a place called 'container', so this should be all you need.
To add this in wordpress, go into the post editor and make sure you are in 'html' mode. In my version of wordpress, this is a tab just to the top right of the post editing pane with the options 'visual' and 'html'.
In html mode, just add my div code in the place where you want the chart to appear. Hopefully that will do the trick.
there could be several reasons for the chart not showing up.
1)The scripts (jquery and highcharts) need to be loaded onto your page and this is not immediately obvious in wordpress. There's a couple of ways - if you aren't a coder then the simplest is to go to the header.php of your theme. (Appearance->Editor) and look for the header.php file on the right hand side. In the head section you'll need to register the highcharts library...
wp_register_script('myHighchartsHandle','highcharts/js/highstock.js',array('jquery'),'1.0a');
wp_enqueue_script('myHighchartsHandle');
The path to the high stock/highcharts library will change depending on where it is on your server of course.
2) The code is javascript - your supplied code has php tags. I think you could edit that to have js tags in the square brackets and install the 'Allow javascript in posts and pages' plugin. Note that plugin needs you to prefix any square brackets in code with a backslash so you'll need to do that to get the data series formatted properly.
3) It does look like you have a div container outside of your code which is good. But as the other answer suggest you will need that and the id has to match the renderTo in the code.
4) If it doesn't work after these 3 steps then you could be falling foul of jQuery noConflict.Wordpress sets jquery in this mode by default.
Instead of $ in your js code you may have to replace with jQuery. The highcharts library is ok in the code you've used.
Happy to help more if required. I have since built much of this into a plugin which is much cleaner...