入力のスタイルを変更する方法

私は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>

それはどのように私は高さに加えて、一般的にそれを設計することができ、良い見ていないと幅。

はあなた、あなたの体のすべての

出典

2017-01-04 Aviran Mor

あなたはこのを試してみました： //www.tinymce.com/docs/configure/content-appearance/ – Paul

フィールドをこのように定義してみてくださいありがとうございます。https：

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

出典

2017-01-04 15:23:29

入力のスタイルを変更する方法

答えて

関連する問題