Adjust the width of the TinyMCE Editor to automatically resize based on the content being

Is it possible for TinyMCE to adjust the content within an absolutely positioned container and update the width while editing?

<div class="container">
    <textarea>This is my very long text that should not break. This is my very long text that should not break</textarea>
</div>    
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script>
    tinymce.init({
        selector:'textarea',
        plugins: "autoresize"
    });
</script>

The CSS:

.container {
    position: absolute;
    top: 10px;
    left: 10px;
    width: auto;
}

Click here to view the demo.

Answer №1

Set the width to 99% of the containing element's width

When you adjust the width to 98% in the fiddle, it will display nicely without scrollbars.

Refer to one of the solutions provided here (I recommend using the HTML5 canvas method) to determine the width of the text entered in the textarea (the tinyMCE container).

Then follow the advice given here to resize your tinyMCE iframe accordingly.

Answer №2

<script type="text/javascript" language="js">
tinyMCE.initialize({
    selector: "textarea#content_area",
    theme: "simple",
    width: '100%',
    height: 250,
    plugins: [
         "advlist autolink lists charmap print hr anchor",
         "searchreplace visualblocks code fullscreen media",
         "save table contextmenu directionality paste"
   ],
   content_css: "css/style.css",
   toolbar: "undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview | forecolor backcolor", 
   style_formats: [
        {title: 'Bold Text', inline: 'b'},
        {title: 'Heading in Red', block: 'h1', styles: {color: '#ff0000'}},
        {title: 'Example Style', classes: 'example-style'}
    ]
 });
</script>

This coding solution has been effective for me.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking to create a custom loader that adapts to different screen sizes

Can anyone help me make the text in my centered div responsive on my website loader? I'm new to coding and struggling to figure it out. Any assistance would be greatly appreciated! Make sure to view the full page snippet so you can see the text prope ...

Attempting to retrieve data from the Model in a JavaScript function post-page render using NodeJS and EJS

I'm new to NodeJS and I'm working on my first application. I am using Ejs to create the user interface and passing a model with data displayed in a table. I'm attempting to access this model's data in a JavaScript function to avoid ano ...

Unable to generate a JSON string from the JavaScript object

I need help converting the object I receive from the server into a JSON file for use in a d3.js chart: data = { "dog ":"5", "cat ":"4", "fish ":"12", } The desired output is: { "name" : "animal", "children" : [ {"name":"dog" ...

I'm using Selenium XPATH or CSS to identify and select a checkbox within an HTML table based on the specified text. As a result, I have successfully

I am trying to select a checkbox from an HTML table with multiple columns. Specifically, I want to choose the checkbox that corresponds to the "CLEAN_AUDIT" option for the Name column. However, my current XPATH is selecting 4 checkboxes labeled CLEAN_AUDIT ...

Displaying a subset of categories based on the user's selection

I have been trying to find a solution to automatically display a subcategory select drop-down only when a user selects a category. If no category is selected, the subcategory drop-down should remain hidden. I have searched online tutorials and videos for ...

How can I achieve a smooth background-image transition in Firefox?

Currently, I'm on the hunt for a substitute for this specific code snippet: "transition:background-image 1s whatever" This particular transition only seems to function on webkit browsers, leaving Firefox users out of luck. I experimented with utili ...

What is the method for altering a CSS element's keyframe animation while it is currently running?

My little mouse speed detector, although not perfect, provides me with the current mouse speed every 100ms in the variable window.mouseSpeed.t. I decided to implement this feature because I wanted to create a whimsical animation at the bottom edge of the s ...

Setting a TypeScript collection field within an object prior to sending an HTTP POST request

Encountered an issue while attempting to POST an Object (User). The error message appeared when structuring it as follows: Below is the model class used: export class User { userRoles: Set<UserRole>; id: number; } In my TypeScript file, I included ...

I am having trouble recognizing the final character within a string

Starting to learn Javascript and working on a basic calculator. My goal is to track the last character entered in the calculator display to prevent double symbols like (++, ./, *-, etc.) Since the input comes as a string, I've attempted using the met ...

Create a custom, adaptive layout using Bootstrap that caters to different device types

I have created a website where users can upload a file with an activation code and input it manually. However, I want to restrict the file upload functionality on smartphones and tablets. Here is how I am attempting to do this: <!DOCTYPE html> &l ...

Jquery is not displaying the background color of the progress bar

Greetings to all! I am currently working on implementing a progress bar for my website, but I am encountering an issue where the background-color is not displaying correctly on scroll. I would greatly appreciate any assistance with this matter. Below you c ...

Navigational paths for the persistent sidebar in Material UI

I am looking to utilize this as a page navigation, but I am struggling with properly linking it to the index. I have attempted separating the items, but that approach did not work as intended. <List> {['Home' , 'Abo ...

I am currently in the process of creating a website navbar with HTML and Tailwindcss, but unfortunately, I am running into issues with the desired functionality not being

Even after trying the group-hover:block technique, I am still unable to see the dropdown menu when hovering over the solution and resources. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

Obtain the IP address of a Node application running within a Docker container

I currently have a node express application set up in a Docker container, and I am attempting to record the IP address of each incoming request within the app. However, due to running behind a firewall, my current method "req.headers['x-forwarded-for& ...

Jest is unable to utilize Higher Order Components from JavaScript files, but it functions properly with Higher Order Components from TypeScript files

When I try to import an HOC from a tsx file, everything works fine. However, when I change the extension to js, Jest throws an error: Jest encountered an unexpected token. This usually indicates that you are attempting to import a file that Jest is unabl ...

Is Javascript the best choice for managing multiple instances of similar HTML code?

I am currently facing the challenge of dealing with a lengthy HTML page consisting of around 300 lines of code. The majority of the code involves repetitive forms, each identical except for the ID (which varies by number). Is it considered appropriate or ...

What is the technical process behind conducting A/B testing at Optimizely?

I'm currently experimenting with Google Analytics and Content Experiments for A/B testing on my website, but I'm encountering some challenges in making it seamless. To utilize the Google API properly, a few steps need to be taken. Firstly, I nee ...

Troubleshooting spacing problems in Angular Material tables

I'm attempting to utilize an Angular Material table in the following way: <div class="flex flex-col pb-4 bg-card rounded-2xl shadow overflow-hidden"> <table mat-table class="" [dataSource]="$candidates ...

What types of data are best suited for storage in localStorage?

During the development of my social app with Vue.js and Vuex store, I am contemplating on the best practices for storing parameters in the browser's localStorage. Currently, I retain the 'token' in localStorage, but should I also store &apos ...

Is there a way to make jQuery Validate display errors within the form elements rather than outside of them?

Given the jQuery Validate basic example provided in the link below, what method can be used to display error messages within form elements whenever feasible (excluding checkboxes)? http://docs.jquery.com/Plugins/validation#source ...