¿Cómo abro un archivo de Markdown en un BrowserWindow (electrón)? -- javascript campo con html campo con markdown campo con electron camp Relacionados El problema

How do I open a markdown file in a BrowserWindow (Electron)?


0
vote

problema

Español

Estoy tratando de extender un proyecto de electrones. Tengo un nuevo BrowserWindow (básicamente una nueva pestaña en un navegador) que debe contener la documentación. La documentación está escrita en la descuesta así, así que me gustaría saber cómo abrir mi archivo de Markdown en este BrowserWindow ...

Básicamente, solo necesito una forma de convertir un archivo de Markdown en tiempo de ejecución a una página web.

Original en ingles

I am trying to extend an Electron-project. I have a new BrowserWindow (basicly a new tab in a browser) which should contain the Documention. The Documentation is written in markdown so Ixc2xb4s like to know how to open my markdown file in this BrowserWindow...

Basicly I just need a way to convert a markdownfile on runtime to a webpage.

           

Lista de respuestas

1
 
vote
vote
La mejor respuesta
 

Necesitará el módulo de nodo FS para abrir el archivo y hay una biblioteca de JS llamada marcada: busque eso en NPM. Se convierte en una marca.

Actualización: aquí hay un ejemplo de aplicación de electrón mínimo, probado en electrones 0.37.8.

  reinterpret_cast6  
 

You'll need the node module fs to open the file and there's a js library called marked - look for that in npm. It renders markdown.

Update - here's a minimal electron app example, tested on electron 0.37.8.

//start - package.json: {   "name": "mini-md-example",   "version": "0.1.0",   "description": "A small Electron application to open/display a markdown file",   "main": "main.js",   "scripts": {     "start": "electron ."   },   "devDependencies": {     "electron-prebuilt": "^0.37.7",      "marked": "^0.3.5"   } } //:end - package.json  //start - main.js: const electron = require('electron') // Module to control application life. const app = electron.app // Module to create native browser window. const BrowserWindow = electron.BrowserWindow const fs = require('fs'); var dialog = require('dialog')  var path = require('path') var defaultMenu = require('./def-menu-main') var Menu = require('menu') const {ipcMain}  = electron;  // Keep a global reference of the window object, if you don't, the window will // be closed automatically when the JavaScript object is garbage collected. let mainWindow  function createWindow () {   // Create the browser window.   mainWindow = new BrowserWindow({width: 999, height: 800})    // and load the index.html of the app.   mainWindow.loadURL(`file://${__dirname}/index.html`)    // Open the DevTools.   mainWindow.webContents.openDevTools()    // Emitted when the window is closed.   mainWindow.on('closed', function () {     // Dereference the window object, usually you would store windows     // in an array if your app supports multi windows, this is the time     // when you should delete the corresponding element.     mainWindow = null   }) }  // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. app.on('ready', createWindow)  // Quit when all windows are closed. app.on('window-all-closed', function () {   // On OS X it is common for applications and their menu bar   // to stay active until the user quits explicitly with Cmd + Q   if (process.platform !== 'darwin') {     app.quit()   } })  app.on('activate', function () {   // On OS X it's common to re-create a window in the app when the   // dock icon is clicked and there are no other windows open.   if (mainWindow === null) {     createWindow()   } })  var OpenFile = function() {   dialog.showOpenDialog(mainWindow, {   filters: [{name: 'Markdown', extensions: ['md', 'markdown']}],   properties: ['openFile']  }, function(paths) {   if (!paths) return false;    var fPath = paths[0];   var fName = path.basename(fPath);   var fData = fs.readFileSync(fPath, 'utf8');     mainWindow.webContents.send('file-open', fPath, fName, fData);   }) }  var SendEvent = function(name) {  return function() {mainWindow.webContents.send(name);}; };    // Get template for default menu  var menu = defaultMenu()    // Add my very own custom FILE menu     menu.splice(0, 0, {     label: 'File',     submenu: [       {         label: 'Open',         accelerator: "CmdOCtrl+O",         click: OpenFile       },     ]   })   // Set top-level application menu, using modified template    Menu.setApplicationMenu(Menu.buildFromTemplate(menu)); //:end - main.js  //start - index.html: <!DOCTYPE html> <html>     <body>         <div id="content"></div>          <script>         var marked = require('marked')         var ipc = require('electron').ipcRenderer             ipc.on('file-open', function(event, fPath, filename, filedata)              {                 document.getElementById('content').innerHTML = marked(filedata)  ;                    })          </script>        </body> </html> //:end - index.html  //start - def-menu-main.js: var electron = require('electron')  // this should work if you're in the electron environment //var app = electron.remote.app // original app var calls remote as if this is used in a renderer, but for me menus are a main app thing  var app = electron.app  var shell = electron.shell  module.exports = function() {    var template = [     {       label: 'View',       submenu: [         {           label: 'Reload',           accelerator: 'CmdOrCtrl+R',           click: function(item, focusedWindow) {             if (focusedWindow)               focusedWindow.reload();           }         },         {           label: 'Toggle Full Screen',           accelerator: (function() {             if (process.platform === 'darwin')               return 'Ctrl+Command+F';             else               return 'F11';           })(),           click: function(item, focusedWindow) {             if (focusedWindow)               focusedWindow.setFullScreen(!focusedWindow.isFullScreen());           }         },         {           label: 'Toggle Developer Tools',           accelerator: (function() {             if (process.platform === 'darwin')               return 'Alt+Command+I';             else               return 'Ctrl+Shift+I';           })(),           click: function(item, focusedWindow) {             if (focusedWindow)               focusedWindow.toggleDevTools();           }         },       ]     },     {       label: 'Window',       role: 'window',       submenu: [         {           label: 'Minimize',           accelerator: 'CmdOrCtrl+M',           role: 'minimize'         },         {           label: 'Close',           accelerator: 'CmdOrCtrl+W',           role: 'close'         },       ]     },     {       label: 'Help',       role: 'help',       submenu: [         {           label: 'Learn More',           click: function() { shell.openExternal('http://electron.atom.io') }         },       ]     },   ];    if (process.platform === 'darwin') {     var name = app.getName();     template.unshift({       label: name,       submenu: [         {           label: 'About ' + name,           role: 'about'         },         {           type: 'separator'         },         {           label: 'Services',           role: 'services',           submenu: []         },         {           type: 'separator'         },         {           label: 'Hide ' + name,           accelerator: 'Command+H',           role: 'hide'         },         {           label: 'Hide Others',           accelerator: 'Command+Shift+H',           role: 'hideothers'         },         {           label: 'Show All',           role: 'unhide'         },         {           type: 'separator'         },         {           label: 'Quit',           accelerator: 'Command+Q',           click: function() { app.quit(); }         },       ]     });     var windowMenu = template.find(function(m) { return m.role === 'window' })     if (windowMenu) {       windowMenu.submenu.push(         {           type: 'separator'         },         {           label: 'Bring All to Front',           role: 'front'         }       );     }   }    return template; } //:end - def-menu-main.js 
 
 

Relacionados problema

0  Acceder al archivo local en JavaScript  ( Access local file in javascript ) 
Tengo una aplicación JS (envasada con electrón) en la que deseo cargar un archivo YAML. Los siguientes trabajos cuando empaqueté la aplicación ya que el archi...

0  Descarga un JSON detrás de una página de inicio de sesión con Nightmare  ( Download a json behind a login page with nightmare ) 
Estoy tratando de descargar un JSON pesado que está detrás de una página de inicio de sesión. El documento es de aproximadamente 5 MB y toma aproximadamente 6...

1  Cómo enviar a JSON a Angular usando el almacenamiento de electrones-JSON  ( How to send json back to angular using electron json storage ) 
Estoy usando electrón-json-storage para leer / escribir json Archivos y ngelectron en una aplicación de electrones. La guía para electrones-json-storage l...

5  Mostrar archivo .icns en proceso de renderizador electrónico  ( Display icns file in electron renderer process ) 
Estoy buscando una forma de mostrar .icns5 archivos en el renderizador electrónico. En OSX Todos los iconos (iconos del sistema, iconos de aplicaciones) a...

1  ¿Cómo personalizar el menú en la aplicación de electrones?  ( How to customize menu in electron app ) 
Tengo una aplicación de electrones sin marco que se puede ejecutar en Windows y Sistema MAC. He aprendido cómo configurar AplicationMenu y contextMenu (solo c...

0  Ejecución de la aplicación de electrones con el archivo main.js personalizado. El electrón prefiere iniciar el archivo main.js predeterminado  ( Running electron app with custom main js file electron rather starts the defaul ) 
Tengo aplicación de electrones con main.js que contiene const electron = require('electron') const { app, BrowserWindow } = require('electron') function c...

6  ¿Cómo puedo desplazar el contenido de la etiqueta <WebView> desde JavaScript?  ( How can i scroll content of webview tag from javascript ) 
Atom-shell: https://github.com/atom/atom-shell < / li> versión: v0.20.2 Estoy usando la etiqueta <webview> para incrustar una página. <webview> TAG...

4  Enviar una solicitud de publicación con un electrón webview  ( Send a post request with an electron webview ) 
Quiero enviar una solicitud POST2 con una electrón webview desde el guión exterior. En este momento, simplemente configuro el atributo POST3 para activa...

1  FS.CREATEATEADSTREAM LOOP NO FINIR  ( Fs createreadstream loop not completing ) 
Estoy iterando a través de un objeto que contiene archivos locales, todos los cuales definitivamente existen, leséles en un búfer e incrementando un contador ...

0  Aplicación electrónica.makesingleinstancia está permitiendo instancias ilimitadas  ( Electron app makesingleinstance is allowing unlimited instances ) 
My main.js Código es: let mainWindow = null; const shouldQuit = app.makeSingleInstance((commandLine, workingDirectory) => { // Someone tried to run a ...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos