이 글에서는 주로 nodejs+mongodb+vue의 프론트엔드와 백엔드에 있는 ueditor를 구성하기 위한 샘플 코드를 소개합니다. 내용이 꽤 좋아서 지금 공유하고 참고하겠습니다.
개인 블로그 프로젝트를 할 때 배경과 상호작용하기 위한 리치 텍스트 박스 입력 컴포넌트가 필요했는데 nodejs에 대한 공식적인 구성이 없어서 직접 정보를 확인하고 조사해서 최종적으로 적용했습니다. 시스템.
1. 백엔드 구성
우선 이 프로젝트를 찾았습니다: https://github.com/netpi/ueditor 해당 오픈 소스 코드를 사용하여 노드에 ueditor를 적용할 수 있습니다. 다음:
1. 먼저 종속성을 설치합니다.
npm install ueditor --save
2. 노드 설정 구성
//引入接口文件 const api = require('./api'); //引入文件模块 const fs = require('fs'); //引入处理路径模块 const path = require('path'); //引入处理post数据模块 var bodyParser = require('body-parser'); //引入express const express = require('express'); const app = express(); //引入ueditor const ueditor = require("ueditor") // parse application/x-www-form-urlencoded app.use(bodyParser.urlencoded({ extended: false })) //更改限定大小 app.use(bodyParser.json({ limit: '50mb' })); app.use(bodyParser.urlencoded({ limit: '50mb', extended: true })); // parse application/json app.use(bodyParser.json()) app.use(api) app.use("/ueditor/ue", ueditor(path.join(__dirname, 'public'), function(req, res, next) { //客户端上传文件设置 var imgDir = '/img/ueditor/' var ActionType = req.query.action; if (ActionType === 'uploadimage' || ActionType === 'uploadfile' || ActionType === 'uploadvideo') { var file_url = imgDir; //默认图片上传地址 /*其他上传格式的地址*/ if (ActionType === 'uploadfile') { file_url = '/file/ueditor/'; //附件 } if (ActionType === 'uploadvideo') { file_url = '/video/ueditor/'; //视频 } res.ue_up(file_url); //你只要输入要保存的地址 。保存操作交给ueditor来做 res.setHeader('Content-Type', 'text/html'); } // 客户端发起图片列表请求 else if (req.query.action === 'listimage') { var dir_url = imgDir; res.ue_list(dir_url); // 客户端会列出 dir_url 目录下的所有图片 } // 客户端发起其它请求 else { // console.log('config.json') res.setHeader('Content-Type', 'application/json'); res.redirect('../nodejs/config.json'); } })); //处理静态文件 todo // 访问静态资源文件 这里是访问所有dist目录下的静态资源文件 app.use(express.static(path.resolve(__dirname, 'public/'))) app.use('/ueditor', function(req, res) { res.render('views/'); }); //监听8888端口 app.listen(8888); console.log('sucess listen......')
여기서는 ueditor가 필요하므로 플러그인이 다음 위치에 설치되었습니다. node_module이므로 추가 파일을 복사할 필요가 없으며 백엔드로 반환된 데이터를 저장하기 위해 이 디렉터리 아래에 새 공용 폴더를 생성하기만 하면 됩니다. 또한 구성 파일 config.json
도 도입해야 합니다. 2. 프런트 엔드 구성
Vue의 프런트 엔드 구성에는 ueditor 파일을 다운로드해야 합니다. 디렉토리에 넣고 static 폴더에 넣은 다음 vue 항목 파일에 ueditor 파일을 도입했습니다:
import '../static/UE/ueditor.config.js' import '../static/UE/ueditor.all.min.js' import '../static/UE/lang/zh-cn/zh-cn.js' import '../static/UE/ueditor.parse.min.js'
ueditor.config.js 파일의 디렉터리 구성은 플러그인이 있는 디렉터리:
window.UEDITOR_HOME_URL = "/static/UE/"
그런 다음 구성 요소에서 구성하면 됩니다.
My UE.vue 컴포넌트:
<template> <script :id=id type="text/plain"></script> </template> <script> export default { name: 'UE', data () { return { editor: null } }, props: { defaultMsg: { type: String }, config: { type: Object }, id: { type: String }, }, mounted() { const _this = this; this.editor = UE.getEditor(this.id, this.config); // 初始化UE this.editor.addListener("ready", function () { _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后,放入内容。 }); }, methods: { getUEContent() { // 获取内容方法 return this.editor.getContent() } }, destroyed() { this.editor.destroy(); } } </script>
소개 방법:
<UE :defaultMsg=defaultMsg :config=config :id=ue1 ref="ue"></UE> data() { return { defaultMsg: "", image: "", config: { initialFrameWidth: null, initialFrameHeight: 350 }, ue1: "ue1" }; },
ueditor
3의 기본 기능을 성공적으로 구성할 수 있습니다.3 프론트 및 백엔드 요청 프록시
vue dev 환경에서, 백엔드 요청 프록시를 전달하도록 webpack의 ProxyTable을 설정할 수 있으며, 같은 방식으로 vue 빌드 이후의 파일은 정적 파일을 백엔드와 동일한 포트로 프록시하기 위해 Node를 사용해야 합니다. 백엔드 포트를 요청하기 전에 공간이 제한되어 기사가 충분히 명확하지 않을 수 있습니다. 자세한 내용은 내 프로젝트 코드를 참조하세요: https://github.com/cheer4chai/myBlog
위는 이 기사의 전체 내용입니다. . 더 많은 관련 내용을 보시려면 PHP 중국어 홈페이지를 주목해주세요!
관련 권장사항:
node.js는 스트림을 사용하여 읽기와 쓰기의 동기화, 동시에 읽기와 쓰기 기능을 달성합니다.ajax가 jquery에서 도메인 간 처리를 처리하는 방식에 대해angular2 및 nodejs는 이미지 업로드를 구현합니다.기능
위 내용은 nodejs+mongodb+vue 프론트 및 백엔드에서 ueditor를 구성하는 코드 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Vercel是什么?本篇文章带大家了解一下Vercel,并介绍一下在Vercel中部署 Node 服务的方法,希望对大家有所帮助!

gm是基于node.js的图片处理插件,它封装了图片处理工具GraphicsMagick(GM)和ImageMagick(IM),可使用spawn的方式调用。gm插件不是node默认安装的,需执行“npm install gm -S”进行安装才可使用。

大家都知道 Node.js 是单线程的,却不知它也提供了多进(线)程模块来加速处理一些特殊任务,本文便带领大家了解下 Node.js 的多进(线)程,希望对大家有所帮助!

今天跟大家介绍一个最新开源的 javaScript 运行时:Bun.js。比 Node.js 快三倍,新 JavaScript 运行时 Bun 火了!

在nodejs中,lts是长期支持的意思,是“Long Time Support”的缩写;Node有奇数版本和偶数版本两条发布流程线,当一个奇数版本发布后,最近的一个偶数版本会立即进入LTS维护计划,一直持续18个月,在之后会有12个月的延长维护期,lts期间可以支持“bug fix”变更。

node怎么爬取数据?下面本篇文章给大家分享一个node爬虫实例,聊聊利用node抓取小说章节的方法,希望对大家有所帮助!


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

드림위버 CS6
시각적 웹 개발 도구

SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
