我正在创建一个 chrome 应用程序来编辑纯文本，我正在使用 <textarea> 来完成此操作。它不会全尺寸

Question

所以我正在创建一个 chrome 应用程序，并且我在其他人问的 post 中使用了 CSS。我正在使用文本区域来完成此操作。我不介意文本区域的任何替代品。我试图让文本区域保持与 window.

相同的大小

我在下面包含了 his question。

我无法让 textarea 与 window 边框对齐。我正在努力使这个应用程序成为文本编辑器，并希望该应用程序尽可能方便。我有一个 link 到下面的应用程序。截至目前，它可以正常使用，但必须手动更改文本区域的大小。

我不要这个。

Chrome App

另外我想添加一个无法编辑的保存到磁盘按钮，并保留在右下角。我不知道该怎么做，如果您能提供帮助，我们将不胜感激。

这是 manifest.json 文件：

{
  "manifest_version": 2,
  "name": "Text Edity",
  "short_name": "TextEdity",
  "description": "A simple text editor, does nothing but edit text!",
  "version": "0.0.1",
  "minimum_chrome_version": "38",

   "icons": {
    "16": "assets/icon_16.png",
    "128": "assets/icon_128.png"
  },

  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  }
}

我试过这个js，但是不行，如果有保存按钮，用户就可以编辑，删除。

document.body.contentEditable='true';document.designMode='on';void 0;

HTML:

`<!DOCTYPE html>
 <html>
 <head>
  <title>Text Edity</title>
  <link rel="icon" type="image/png" href="text.png">
 </head>  
 <body>
  <textarea cols='95' rows='44' placeholder='Text Edity'></textarea>
 </body>
</html>`

和background.js：

/**
 * Listens for the app launching, then creates the window.
 *
 * @see http://developer.chrome.com/apps/app.runtime.html
 * @see http://developer.chrome.com/apps/app.window.html
 */
chrome.app.runtime.onLaunched.addListener(function(launchData) {
  chrome.app.window.create(
    'index.html',
    {
      id: 'mainWindow',
      bounds: {width: 800, height: 800}
    }
  );
});

Answer 1

像这样使用CSS：

textarea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

您甚至可以在元素中内联使用它，例如：

<textarea cols='95' rows='44' placeholder='Text Edity' style='position: absolute; top: 0; left: 0; width: 100%; height: 100%;'></textarea>

按钮同样可以实现：

<button style='position: absolute; bottom: 10px; right: 10px; z-index: 1;'>Save</button>

z-index只有在button前textarea前才是必须的，如果放在后面则不需要使用它。

我正在创建一个 chrome 应用程序来编辑纯文本，我正在使用 <textarea> 来完成此操作。它不会全尺寸

I am creating a chrome app to edit pure text, and i am using a <textarea> to accomplish this. It will not go full size

html

css

json

google-chrome-app