Concealing the Placeholder of Div Elements in TinyMCE

I've incorporated TinyMCE into my custom TextBox and TextArea, but I'm struggling to display a placeholder within these elements.

Initially, I attempted to implement a placeholder, which worked when TinyMCE was inactive. However, once activated, the placeholder disappeared while the text editing functionality remained unaffected.

Additionally, I would like for both the placeholder and input text to be slightly shifted to the left.

Below is a code snippet from JSFiddle:

HTML

<h3>Item Name</h3>
<div class="form-group">
  <div class="col-md-6">
    <div class="text-box-styling text-box-area" id="inputItemName"   
         contentEditable=true data-text="Enter text here">
    </div>
  </div>
</div>

<h3>Description</h3>
<form class="form-horizontal form-bordered" method="get">
  <div class="form-group">
    <div class="col-md-6">
      <div class="text-area-styling text-box-area" 
           id="textareaDescription">
      </div>     
    </div>
  </div>
</form>

CSS

.text-box-styling {
    width: 460px !important;
    height: 30px;
    border: solid 1px #373d42;
    border-radius:0px;
    margin-bottom: -4px;
}

.text-area-styling {
    resize:none;
    width: 460px !important;
    height: 60px !important;
    border: solid 1px #373d42;
    border-radius:0px;
    /*margin-bottom: -4px;*/

}

[contentEditable=true]:empty:not(:focus):before{
        content:attr(data-text);
}

JAVASCRIPT

tinymce.init({
          selector: '.text-box-area',
          plugins: 'autoresize',
          inline: true,
          setup: function (editor) {
              editor.on('focus', function (e) {
                  console.log("focus");
              });

              editor.on('blur', function (e) {
                  console.log("blur");
              });
          },
});

JSFIDDLE: https://jsfiddle.net/Ln631dh3/

If anyone has encountered this issue before and found a solution, I would greatly appreciate your guidance.

Thank you in advance,

EVH671

Answer №1

After checking the HTML specifications, it is clear that the placeholder attribute is only compatible with certain <input> types such as text, search, url, tel, email, and password. If you are using a <div> or a different block element, you cannot utilize the placeholder attribute to provide a "hint" within the <div> where TinyMCE will be placed.

Although TinyMCE itself does not natively support a placeholder attribute that can be specified in the initialization or on a tag, there seems to be a third-party plugin available to address this limitation:

https://github.com/mohan/tinymce-placeholder

Regrettably, this plugin currently does not work for inline editing. However, it is possible to extend its functionality to accommodate this scenario. There is an open issue on GitHub requesting support for inline editing in the plugin.

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

The error property is not found in the type AxiosResponse<any, any> or { error: AxiosError<unknown, any>; }

As a beginner with typescript, I am encountering some issues with the following code snippet import axios, { AxiosResponse, AxiosError } from 'axios'; const get = async () => { const url = 'https://example.com'; const reques ...

Attempting to display the todo item in the form of <li>, however, the todo.name property is not

I am currently developing a task manager application and have encountered a puzzling issue: When I include the Todo component within the TodoList component and pass the todo item as a prop todo = {name: "ssss", status: false, id: 0.0289828650088 ...

Capturing scroll events just once

I am working on implementing scroll events to create a smooth "snapping" effect for the top sections of my webpage. While I have successfully captured and animated the scroll position, I am encountering an issue where the scroll event is being triggered mu ...

What is the best way to send an XML body using Angular 5 with POST method?

I am currently developing an Ionic application that needs to make REST API calls with XML as the body. However, I am facing issues in getting the call to post with XML. This is my LoginProvider where I utilize DOMParser to parse data to XML before sending ...

Python Automation with Selenium (Locating elements using CSS selectors)

Is it possible to select and access the first element of an array using a CSS selector in Python? For instance: css=('.od-FieldEditor-fieldTitle.ms-Label.is-required') generates an array of 6 labels. I am interested in accessing the innerText a ...

Angular 7: An unexpected error occurred when trying to inject TripsMenu into MenuWidgetComponent in AppModule

Encountering an issue in angular 7, where I am trying to inject my MenuWidgetComponent in the home component. I have imported it in the widget component and exported it via index.ts. However, the following error persists: I searched online but couldn&apos ...

Best practice for encapsulating property expressions in Angular templates

Repeating expression In my Angular 6 component template, I have the a && (b || c) expression repeated 3 times. I am looking for a way to abstract it instead of duplicating the code. parent.component.html <component [prop1]="1" [prop2]="a ...

When <li> elements are rendered via ajax, it is not possible to attach JavaScript Events to them

Hey there, I've got a drop down menu that's being shown using UL and LI tags. This is generated by a PHP script that echos out: '<li id='. $value .'>'.$value.'</li>' The JQuery function below works perf ...

I aim to break down a function into several functions using jQuery and AJAX for better organization and efficiency

I am working with a JavaScript file that includes an Ajax function to fetch data from a JSON file on a server. The goal is to interpret this data into a table, but I would like to break down the process into separate functions for generating links, dates, ...

React is having trouble rendering the current weather information

My code is not functioning properly and I am encountering a TypeError that says "cannot read the property of undefined ('temp')". import React, { useEffect, useState } from "react"; import "./css/style.css"; import { BiStreetV ...

Issue with FontAwesome icon selection in Vue2 (nuxt) not displaying icons

If you're looking for the icon picker, you can find it here: https://github.com/laistomazz/font-awesome-picker I've tried running it, but unfortunately, the icons are not showing up. When I inspect the elements, the code is there but the icon is ...

Prevent screen from loading without JavaScript using an overlay

Is there a way to darken and lock the page, preventing clicking or scrolling, while displaying white text notifying the user that JavaScript is not enabled? I understand that the recommended approach is to gracefully degrade all elements when JavaScript i ...

The JS Fiddle code fails to function properly once it has been downloaded to the local computer

I came across a helpful example fiddle webpage: jsfiddle.net/yijiang/6FLsM/2 After following examples from others, I attempted to download (right click and Save As) using the latest Chrome browser with the following links: jsfiddle.net/yijiang/6FLsM/2/s ...

Is there a way to use jQuery to focus the cursor on a specific field in a form?

In my form, the first field is a dropdown with options such as "student" and "employee". Below that, there are two text fields for "college name" and "company name". If a person selects "student", then the "college name" text box should be enabled and t ...

in javascript, how can you access the value of a parent object within a nested object?

Within the material ui framework, I am utilizing the createMuiTheme function to create a theme. How can I access the values of the parent object within a nested object? (I am aware that I can declare global variables above the function); To better unders ...

Load various PHP objects using asynchronous JavaScript (AJAX) requests

In my work with CodeIgniter, I have a controller that sends me various vacancies to display in a view. The dynamic code in the view is structured like this: <div class="row vacancy-grid"> <?php foreach ($vacancies as $vacancy) { ?> ...

Error message: When working with Protobuf, an uncaught reference error occurs because the 'exports

Currently, I am in the process of configuring protobuf to work with typescript. According to the official Google Documentation, all that is needed is to execute npm install google-protobuf and then to include require('google-protobuf'). Unfortu ...

Passing Data to a Different Route in Vue.js

Being new to Vue.js, I have a question on how to efficiently handle data retrieval from my backend application. Here is the code snippet that fetches all the data: var app2 = new Vue({ delimiters: ['%%', '%%'], el: '#app2& ...

Node.js: Leveraging Express to Compare URL Parameters and Handle Delete Requests with Array Values

Having some issues with the Express routes I set up for an array of objects and CRUD operations. Everything works smoothly except for the "Delete" operation. I am trying to delete an object by matching its URL parameter ID with the value of its key. Howev ...

Exploring the benefits of looping with node.js require()

Currently, I have defined the required files as shown below. constantPath = './config/file/' fileAA = require(path.resolve(constantPath + 'A-A')), fileBB = require(path.resolve(constantPath + 'B-B')), fileCC = require(path.r ...