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
Related
In my layout project I want to change layout color.
layout/default.vue
<v-app>
....
</v-ap>
I need to change v-app color, but this doesn't work:
<v-app color="secondary">
How can I do it?
note: I just want to use a Vuetify variable, like primary, secondary, accent, etc., and not CSS code.
i found it
in layout page i added this
#app {
background-color: var(--v-background-base) !important;
}
and in the nuxt config , in vuetify config
themes: {
light: {
background :'#eee'
},
dark :{
background :'#fff'
}
}
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
When I try to do a transition using the default "w-#" options in Tailwind, my transitions don't apply. When I hard code in my own classes for width, it works fine. Is there something weird with Tailwinds CSS and how it handles width that would cause this?
Here's the HTML text. The main part here is the dynamic class "sidebarWidth" which switches when the button is clicked. The transition-all, slowest and ease are all things I extended in Tailwind.
<nav class="text-white absolute md:relative flex-col min-h-full bg-black mt-24 md:mt-12 transition-all transition-slowest ease" :class="sidebarWidth">
Here's the JS code in the computed properties of the Vue component
sidebarWidth: function() {
if (this.$store.getters.isSidebarCollapsed) {
return "w-14 invisible md:visible";
} else {
return "w-64";
}
}
If I swap out w-14 and w-64 for the following classes, it works great.
<style scoped>
.width1 {
width: 100px;
}
.width2 {
width: 400px;
}
</style>
I basically want my sidebar nav to slide in when I click a button. In mobile, the sidebar nav is hidden and I want it to slide out. In the desktop, it should be a small nav and then slide out to a full screen nav. It works, but the slide transition doesn't work. Also, the margin change between mobile and desktop does animate properly.
You need to perform a few steps to activate the behaviour you are looking for.
The first one is about extending you Tailwind theme via tailwind.config.js. You need to add the transitionProperty for width.
module.exports = {
...
theme: {
...
extend: {
...
transitionProperty: {
'width': 'width'
},
},
},
}
The changes above create the transition-width class. Simply apply this one to your nav tag. In your specific case you can overwrite the transition-all class.
<nav class="text-white absolute md:relative flex-col min-h-full bg-black mt-24 md:mt-12 transition-width transition-slowest ease" :class="sidebarWidth">
The last step is quite easy: ensure that Tailwind is recreating the CSS. Afterwards you should see a smooth width transition in your project.
Background to the Problem
By default, the width and height transitions are not activated in Tailwind CSS. Here is the CSS that will be applied when using transition class.
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
Like you can see width and height are missing in transition-property.
You can find more information about it in the Tailwind documentation.
You can make your own transition property like in tailwind.config.js :
Multiple properties :
module.exports = {
theme: {
extend: {
transitionProperty: {
multiple: "width , height , backgroundColor , border-radius"
}
}
}
One property :
module.exports = {
theme: {
extend: {
transitionProperty: {
width: "width"
}
}
}
How to change Vuetify v-text-fields input text color. I tried many ways but none of them is worked.
enter image description here
I tried to change the "Hello" text to red. It is not working.
if you want to change color to white just add props dark to v-text-input
There are few ways to do this.
One convenient way is to set a class on the v-text-field, then using specificity set the color of the input.
Note that you need to use the !important flag when not editing the Vuetify theme directly.
In the template,
<v-text-field class="text-green"></v-text-field>
In the CSS (e.g. style tag),
.text-green input {
color: green !important;
}
Live Snippet:
new Vue({
el: '#app',
data: () => ({
name: 'John'
})
})
.text-green input{
color: green !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#1.5.14/dist/vuetify.min.js"></script>
<div id="app">
<v-app>
<v-text-field class="text-green" v-model="name"></v-text-field>
</v-app>
</div>
What worked for me is exporting the themes colors as css variables (custom properties). Code below
// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
export default new Vuetify({
theme: {
options: {
customProperties: true,
},
},
})
and then in the scss using the following code:
.v-text-field {
input {
color: var(--v-primary-base);
}
}
This works:
<v-text-field class="text-input-blue"/>
In combination with CSS:
.text-input-blue .v-text-field__slot input {
color: #00f !important;
}
One of the downsides of Javascript frameworks is that the CSS is often hard to customize.
In case you are using v-custom the below scss override will work for you:
<div class="input-text-wrapper">
<v-text-field class="input-text"/>
</div>
Style:
<style scoped lang="scss">
.input-text {
::v-deep {
.v-text-field {
input {
color: blue;
}
}
}
}
</style>
You need to create a file related to CSS styles in the Styles section and name it Override. In that file, you can make any desired changes you need. Put the following code in that file, you can change the color of the border:
.v-text-field {
input {
color: rgba(169, 169, 169, 0.33);
}
}
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);
}
});