how to style input on tinymce

1.1k Views Asked by Aviran Mor At 04 April 2025 at 07:33

I am writing to Tinymce extension, the purpose of extension is to allow the user make comments on the text. When I click the comment button opens me input. I'm trying to change the style has a width and higher, I could but it does not look good. Attaching code and picture.

plugin js

tinymce.PluginManager.add('comments', function(editor/*, url*/) {
  // Add a button that opens a window
  editor.addButton('comments', {
    title: 'comment',
    //text: 'My button',
    //icon: false,
    image: "https://cdn3.iconfinder.com/data/icons/pyconic-icons-1-2/512/comment-outline-silence-128.png",
    onclick: function() {
      // Open window
      editor.windowManager.open({
        title: 'write comment ',
        body: [
          {type: 'textbox', name: 'title', label: 'Post a Comment', value: "hello", height: 40,
width: 30}
        ],
        width: 800,
        height: 400,
        onsubmit: function(e) {
          // Insert content when the window form is submitted
          let div= document.createElement("span");
          div.style.backgroundColor="lightblue";
          div.innerHTML=editor.selection.getContent();
          let span= document.createElement("span");
          div.appendChild(span);
          span.innerHTML = e.data.title;
          span.classList.add ("comment");
          editor.insertContent(div.outerHTML);
        }
      });
    }
  });

index.html

<!DOCTYPE html>
<html>
<head>
  <script src="/js/tinymce/tinymce.js"></script>
  <script>tinymce.init({ selector:'textarea', plugins: 'comments', toolbar: 'comments', content_css : '/js/tinymce/plugins/comments/styleComments.css' });</script>
</head>
<body>
  <textarea>Easy (and free!) You should check out our premium features.</textarea>
</body>
</html>

It does not look good, how can I design it in general in addition to height and width.

Thank you all

Original Q&A

There are 1 best solutions below

Michael Fromin On 04 January 2017 at 15:23 BEST ANSWER

In your body try defining the field this way:

{
    type: 'container',
    label  : 'fit',
    layout: 'fit',
    minWidth: 160,
    minHeight: 160,
    items: [{
        type: 'textbox',
        label: 'textbox',
        value: 'Fit will take all the space available.'
    }]
}

... or this way...

{
    type   : 'textbox',
    name   : 'textbox multiline',
    label  : 'textbox multiline',
    multiline : true,
    value  : 'default value\non another line'
}

how to style input on tinymce

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in TINYMCE

Related Questions in TINYMCE-4

Trending Questions

Popular # Hahtags

Popular Questions