如何在 tinymce 上设置输入样式

Question

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

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

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

谢谢大家

Answer 1

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

{
    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'
}

如何在 tinymce 上设置输入样式

how to style input on tinymce

html

javascript

tinymce

tinymce-4