如何在tinymce上设置输入样式答案

【问题标题】：how to style input on tinymce如何在tinymce上设置输入样式
【发布时间】：2017-01-04 15:16:01
【问题描述】：

我正在给 Tinymce 扩展写信，扩展的目的是让用户在文本上制作 cmets。当我点击评论按钮打开我的输入。我正在尝试将样式更改为宽度和更高，我可以但它看起来不太好。附上代码和图片。

插件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>

不好看，除了高度和宽度，一般怎么设计呢。

谢谢大家

【问题讨论】：

你试过这个吗：tinymce.com/docs/configure/content-appearance

标签： javascript html tinymce tinymce-4

【解决方案1】：

在您的身体中尝试以这种方式定义字段：

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

...或者这样...

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

【讨论】：