I do have an error after installing the tinymce vue js in my project
Here is my Editor.vue
<editor
:init="{
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'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'
}" />
Then I import
import Editor from '#tinymce/tinymce-vue';
import '#tinymce/tinymce-vue/lib/browser/tinymce-vue.min.js';
export default {
components: {
'editor':Editor
}
}
This is my error
Related
I would like to use TinyMCE locally and avoid having to provide an API Key. For the moment I use the following code:
Install TinyMCE for vueJS 2.x:
npm install --save "#tinymce/tinymce-vue#^3"
When installed, I use this:
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<editor
api-key="no-api-key"
:init="{
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'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'
}"
/>
</div>
</template>
<script>
import Editor from '#tinymce/tinymce-vue'
export default {
name: 'app',
components: {
'editor': Editor
}
}
</script>
The TinyMCE Vue wrapper will rely on our Cloud platform to pull TinyMCE if TinyMCE is not already loaded into the page/application.
The simplest approach is the self host TinyMCE and place a script tag in the head of the main HTML page to load TinyMCE. This will make the tinymce global object available at all times in all components. Alternatively you can import TinyMCE in the component(s) that need it. As long at the tinymce global is there before you try to create an editor component there will be no attempt to use the Cloud delivered version of TinyMCE.
Step 6 of the quick start guide covers this specific capability:
https://www.tiny.cloud/docs/integrations/vue/#tinymcevuejsintegrationquickstartguide
i'd like to show the template plugin popup window manually from a custom toolbar button but it doesnt seem to work if i execute the command "mceInsertTemplate".
It works i.e. when executing some default commands like "Bold" or similar.
tinymce.init({
selector: '.tinymce',
language: 'de',
statusbar: false,
plugins: "table lists autoresize template",
menubar: "",
toolbar: "bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist | table | removeformat undo redo | template | myCustomToolbarButton | ",
templates: [
{title: 'Some title 1', description: 'Some desc 1', content: 'My content'},
{title: 'Some title 2', description: 'Some desc 2', url: 'development.html'}
],
setup: (editor) => {
editor.ui.registry.addButton('myCustomToolbarButton', {
text: 'My Custom Button',
onAction: function (_) {
editor.execCommand('mceInsertTemplate');
}
})
}
});
Maybe someone can point me to the right direction.
Thanks in advance,
Daniel
There are chart.js pie charts in a html table.
The issue: on zoom-out and then zoom-in, the cells do not resize to their initial size.
The layout looks something like this:
__________________________
| inner div | inner div |
|_____________|____________|
| | |
| Pie1 | Pie2 |
|_____________|____________|
I have referred the documentation on resizing and this link to add responsive and maintainAspectRatio fields in options object.
On setting responsive:true, the diagram is enabled to resize on zoom.
Setting maintainAspectRatio:false, to fix previous irregular zoom issue where the multiple charts do not resize proportionally since they take table cell's width.
Just for reference there is a blurry text issue with chart.js zoom mentioned at
github here.
Sourcecode of issue on JS fiddle: http://jsfiddle.net/rfaLvuho/.
Use zoom-out and zoom-in back to reproduce.
You can switch to <div> elements for the layout to fix this. I used float in the snippet below but it should work with flex or grid layout as well.
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};
var config = {
type: 'pie',
data: {
datasets: [{
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
],
backgroundColor: [
chartColors.red,
chartColors.orange,
chartColors.yellow,
chartColors.green,
chartColors.blue,
],
label: 'Dataset 1'
}],
labels: [
'Red',
'Orange',
'Yellow',
'Green',
'Blue'
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: false
}
};
var myPie1 = new Chart('chart-area1', config);
var myPie2 = new Chart('chart-area2', config);
.canvas-holder {
width: 50%;
float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<div class="canvas-holder">
<canvas id="chart-area1"></canvas>
</div>
<div class="canvas-holder">
<canvas id="chart-area2"></canvas>
</div>
Im using TinyMCE in a project and want the user to select and upload images to the server using its default insert image window.
I want to click the following button:
Open the browsers default file select window and add the selected image to the editor:
My code so far is as follows..
JS:
tinymce.init({
selector: '#html-editor',
language: 'pt_PT',
plugins: [
"bdesk_photo advlist autolink link image lists charmap preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code media nonbreaking",
"table contextmenu directionality paste textcolor colorpicker imagetools"
],
add_unload_trigger: false,
toolbar: "styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media preview | forecolor backcolor table",
image_advtab: true,
file_picker_callback: function (callback, value, meta)
{
$('#html-editor input').click();
//how to get selected image data and add to editor?
},
paste_data_images: true,
images_upload_handler: function (blobInfo, success, failure)
{
// no upload, just return the blobInfo.blob() as base64 data
success("data:" + blobInfo.blob().type + ";base64," + blobInfo.base64());
}
});
HTML:
<div id="html-editor">
<input name="image" type="file" style="width:0;height:0;overflow:hidden;">
</div>
What kind of changes must i make to the file_picker_callback event in order to get the selected file and add it to the editor?
Had the same problem. Using the following fixed it for me, remember that the browser must support FileReader (otherwise just insert your own script).
html (put this anywhere on the html page):
<input id="my-file" type="file" name="my-file" style="display: none;" onchange="" />
js (in the tinymce init config):
file_picker_callback: function (callback, value, meta) {
if (meta.filetype == 'image') {
var input = document.getElementById('my-file');
input.click();
input.onchange = function () {
var file = input.files[0];
var reader = new FileReader();
reader.onload = function (e) {
callback(e.target.result, {
alt: file.name
});
};
reader.readAsDataURL(file);
};
}
}
Try
var imageFilePicker = function (callback, value, meta) {
tinymce.activeEditor.windowManager.open({
title: 'Image Picker',
url: '/images/getimages',
width: 650,
height: 550,
buttons: [{
text: 'Insert',
onclick: function () {
//.. do some work
tinymce.activeEditor.windowManager.close();
}
}, {
text: 'Close',
onclick: 'close'
}],
}, {
oninsert: function (url) {
callback(url);
console.log("derp");
},
});
};
tinymce.init({
selector: 'div#html-editor',
height: 200,
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'
],
toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons',
image_advtab: true,
paste_data_images: true,
automatic_uploads: true,
file_picker_callback: function(callback, value, meta) {
imageFilePicker(callback, value, meta);
}
});
Issue : when i have changed the font-size like 38pt, the text goes out of the editor.
I am using tinymce 4.0.
This is my script to load tinymce
<script type="text/javascript">
tinymce.init({
selector: "div#textareasDiv",
theme: "modern",
inline: true,
plugins: [ "textcolor,table"],
toolbar1: " bold italic underline | alignleft aligncenter alignright alignjustify | forecolor backcolor | fontselect | fontsizeselect",
image_advtab: true,
menubar: false,
fixed_toolbar_container: "#toolbarCon"
});
</script>
and
<div id="textareasDiv"></div>
<div id="toolbarCon"></div>
and
<style>
#textareasDiv { padding:2px 5px;width:170px;height:80px;background:transparent;word-wrap: break-word; }
</style>
And I am trying to get its outerHeight so that i can make change on it :
setup : function(ed)
{
ed.on('change', function(e)
{
alert($(this.getContainer()).outerHeight());
});
}
But it gives me nothing.
How can i resize tinymce editor after changing font-size? and How can make this textareasDiv draggable?
HERE IS THE FIDDLE
You seem to be missing overflow in the <textarea> CSS definitions.
You may like to add it an set it to auto, which is the most common usage for it. Other options for overflow are: scroll, overflow-x, overflow-y, or hidden, depending on what result you are trying to achieve.
More about it here: https://www.w3schools.com/css/css_overflow.asp