resumo:
Estou construindo meu próprio blog recentemente. Talvez eu não tenha tempo para escrever um blog durante esse período, mas ainda tenho que compartilhá -lo com todos se tiver coisas boas. Os sites de blogs devem ter um editor para editar artigos, então verifiquei algumas informações online. Os antecedentes da maioria dos editores são baseados em java, php, asp, etc., e poucos são baseados no node.js. Originalmente, eu queria usar o Markdown para escrever artigos, mas o estilo não era fácil de ajustar, então finalmente escolhi o Ueditor do Baidu e não há código baseado no Node.js em seu site oficial. Mas, felizmente, encontrei um semelhante no Github, então vou compartilhar com você. Se você planeja usar o Node.js para desenvolver seu próprio blog, poderá consultá -lo.
Baixar cotação:
Primeiro, baixei o código no site oficial do Ueditor. Baixei a versão de desenvolvimento da versão 1.4.3PHP UTF-8. Após descomprimir, coloque o arquivo no diretório público. Aqui eu renomeei para Ueditor. Em seguida, adicione essas três linhas à cabeça da página que você precisa
A cópia do código é a seguinte:
<script type = "text/javascript" charset = "utf-8" src = "/ueditor/ueditor.config.js"> </script>
<script type = "text/javascript" charset = "utf-8" src = "/ueditor/ueditor.all.min.js"> </script>
<script type = "text/javascript" charset = "utf-8" src = "/ueditor/lang/zh-cn/zh-cn.js"> </script>
Em seguida, chame o seguinte código sempre que necessário
A cópia do código é a seguinte:
<script id = "editor" type = "text/plana"> </script>
<Cript>
var ue = ue.getEditor ('editor');
</script>
Modificação de back -end:
O Baixado é baseado no PHP e agora o alteraremos para o Node.js com base. Primeiro, exclua o arquivo php desnecessário, depois crie um novo NodeJS de pasta e crie um novo arquivo config.json neste diretório, o conteúdo é o seguinte:
A cópia do código é a seguinte:
/* Para configurações relacionadas à comunicação front-end, os comentários permitem apenas métodos multi-line*/
{
/* Carregue o item de configuração da imagem*/
"ImageActionName": "UploadImage", /* O nome da ação da imagem de upload* /
"ImageFieldName": "upfile", /* Nome do formulário de imagem enviado* /
"ImageMaxSize": 2048000, / * Limite de tamanho de upload, unidade b * /
"ImageAllowfiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* Carregue o formato da imagem para exibir* /
"imageCompressEnable": true, / * Se para comprimir imagens, o padrão é verdadeiro * /
"ImageCompressborder": 1600, /* O limite máximo de borda para compactação de imagem* /
"ImageInsertalign": "Nenhum", /* Método Float de imagem inserida* /
"imageurlPrefix": "", /* Acesso de imagem prefixo* /
"ImagePathFormat": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}",/* Carregue o caminho de salvamento, você pode personalizar o caminho de salvar e o nome do arquivo de arquivo*/
/* {nome do arquivo} será substituído pelo nome do arquivo original. Você precisa prestar atenção ao problema do código ilegal chinês nesta configuração*/
/* {rand: 6} será substituído por um número aleatório, e o número a seguir é o número de bits do número aleatório*/
/* {time} será substituído pelo Timestamp*/
/* {yyyy} será substituído por um ano de quatro dígitos*/
/* {yy} será substituído por dois dígitos do ano*/
/* {mm} será substituído por dois meses*/
/* {dd} será substituído por duas datas*/
/* {hh} será substituído por duas horas*/
/* {ii} será substituído por dois dígitos*/
/* {ss} será substituído por dois dígitos de segundos*/
/ * Personagens ilegais/: *? "<> | */
/ * Consulte o documento on-line para obter detalhes: fex.baidu.com/ueditor/#use-format_upload_filename */
/* Item de configuração de upload de picture graffiti*/
"ScrawlactionName": "uploadscrawl", /* O nome de ação do upload de graffiti* /
"ScrawlfieldName": "upfile", /* Nome do formulário de imagem enviado* /
"scrawlpathformat": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}",/* Carregar o caminho de salvamento, você pode personalizar o caminho de salvar e o nome do arquivo de arquivo*/
"ScrawlmaxSize": 2048000, / * Limite de tamanho de upload, unidade b * /
"scrawlurlPrefix": "", /* Acesso de imagem prefixo* /
"scrawlinsertalign": "nenhum",
/* Carregue a ferramenta de captura de tela*/
"SnapsCreenActionName": "UploadImage", /* O nome de ação da captura de tela de upload* /
"snapscreenPathFormat": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}",/* Carregar o caminho de salvar, você pode personalizar o caminho de salvar e o nome do nome do arquivo*/
"snapscreenurlPrefix": "", /* Image Access Path Prefix* /
"snapscreeninsertalign": "nenhum", /* float de imagem inserida* /
/* Configuração de imagem remota CRAW*/
"CatcerlocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
"CatcherActionName": "CatchImage", /* O nome da ação da imagem remota é executada* /
"CatcherfieldName": "fonte", /* Nome do formulário da lista de imagem enviada* /
"CatcherPathFormat": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}",/* Carregue o caminho de salvamento, você pode personalizar o caminho de salvar e o nome do nome do arquivo*/
"CatcerurlPrefix": "", /* Image Access Path Path Prefixo* /
"CatchMaxSize": 2048000, / * Limite de tamanho de upload, unidade b * /
"CatcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* crawl imagem formato de exibição* /
/* Carregar configuração de vídeo*/
"VideoActionName": "UploadVideo", /* O nome de ação do vídeo carregado* /
"VideoFieldName": "Upfile", /* Nome do formulário de vídeo enviado* /
"videOpathformat": "/ueditor/php/upload/video/{yyyy} {mm} {dd}/{time} {rand: 6}",/* Carregar o caminho de salvamento, você pode personalizar o caminho de salvar e o nome do arquivo*/formato de nome*/
"VideourlPrefix": "", /* Prefixo de caminho de acesso ao vídeo* /
"VideomaxSize": 102400000, / * Limite de tamanho de upload, unidade B, padrão 100MB * /
"VideoallowFiles": [
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* Carregar o formato de vídeo display* /
/* Carregar configuração do arquivo*/
"FileActionName": "UploadFile", /* Controller, o nome de ação do vídeo carregado* /
"FileFieldName": "upfile", /* Nome do formulário do arquivo enviado* /
"filepathformat": "/ueditor/php/upload/file/{yyyy} {mm} {dd}/{time} {rand: 6}",/* carregue o caminho de salvamento, você pode personalizar o caminho de salvar e o nome do arquivo*/formato de nome*/
"FileurlPrefix": "", /* Acesso ao arquivo de acesso prefixo* /
"FILEMAXSIZE": 51200000, / * Limite de tamanho de upload, unidade B, padrão 50MB * /
"FileAllowfiles": [
".png", ".jpg", ".jpeg", ".gif", ".bmp",
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
".Rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", "xml "
], /* Carregue o formato de arquivo de arquivo* /
/* Liste as fotos no diretório especificado*/
"imagemanageractionName": "listimage", /* O nome da ação do gerenciamento de imagens* /
"ImagemanagerListPath": "/ueditor/php/upload/image/",/* especifique o diretório para listar a imagem*/
"ImagemanagerListsize": 20, /* Número de arquivos listados cada vez* /
"ImagemanagerUrlPrefix": "", /* Acesso de imagem Prefixo* /
"imagemanagerInsertalign": "nenhum", /* Método flutuante de imagem inserida* /
"ImaganageRallowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* Tipos de arquivo listados* /
/* Lista arquivos no diretório especificado*/
"FileManagerActionName": "ListFile", /* O nome da ação do gerenciamento de arquivos de execução* /
"FileManagerListPath": "/ueditor/php/upload/file/",/* especifique o diretório em que o arquivo a ser listado*/
"FileManagerUrlPrefix": "", /* Acesso ao arquivo de acesso prefixo* /
"FileManagerListsize": 20, /* Número de arquivos listados cada vez* /
"FileManageRallowFiles": [
".png", ".jpg", ".jpeg", ".gif", ".bmp",
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
".Rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", "xml "
] /* Tipos de arquivo listados* /
}
Em seguida, encontre o arquivo ueditor.config.js, encontre a linha abaixo e altere as cotações posteriormente para o seu próprio caminho de segundo plano.
Serverurl: URL + "php/controller.php"
por exemplo:
Serverurl: URL + "Ueditor"
Precisamos instalar os seguintes pacotes
A cópia do código é a seguinte:
"Dependências": {
"Body-Parsser": "~ 1.0.0",
"Express": "~ 4.2.0",
"Ueditor": "^1.0.0"
}
Código de fundo:
A cópia do código é a seguinte:
var express = requer ('expresso'); var path = requer ('caminho');
var app = express ();
var ueditor = requer ("ueditor");
var BodyParser = requer ('Body-Parsser');
App.use (BodyParser.urlencoded ({
estendido: verdadeiro
}));
App.Use (BodyParser.json ());
App.use ("/ueditor/ueditor", ueditor (path.join (__ Dirname, 'público'), função (req, res, seguinte) {
// O Ueditor Client inicia uma solicitação de imagem de upload
if (req.query.action === 'uploadImage') {
var foo = req.editor;
var iMgname = req.ueditor.filename;
var img_url = '/imagens/ueditor/';
// Você só precisa inserir o endereço que deseja salvar. Deixe a operação de salvamento para o Ueditor
res.ue_up (img_url);
}
// O cliente inicia uma solicitação de lista de fotos
caso contrário, if (req.query.action === 'listimage') {
var dir_url = '/imagens/ueditor/';
// O cliente listará todas as imagens no diretório DIR_URL
res.ue_list (dir_url);
}
// O cliente inicia outros pedidos
outro {
Res.Setheader ('Content-Type', 'Application/JSON');
res.redirect ('/ueditor/nodejs/config.json');
}
}));
Nota: O acima acima lida com o upload de fotos. Para uploads de vídeo, você pode visualizar a API oficial do site e imitá -los.
O exposto acima é o conteúdo inteiro de integrar o editor Baidu UE no projeto NodeJS. Espero que todos gostem.