서론 회사의 프로젝트는 서식 있는 텍스트 편집 상자를 사용해야 하며 Baidu의 ueditor는 강력하도록 지정됩니다. 그런 다음 사용하십시오. 회사가 앞뒤로 분리되어 있기 때문에 별도로 진행해야 합니다.
첫 번째 단계는 ueditor를 다운로드하는 것입니다.
우리가 사용하고자 하는 것은 UTF8-jsp 버전입니다.
다운로드 주소를 클릭하여 다운로드하십시오
. jsp 폴더와 index.html 파일을 제외한 모든 파일을 프론트엔드 디렉토리의 static 폴더에 아래와 같이 복사하십시오.
두 번째 단계는 전경 구성 요소와 참조를 캡슐화하는 것입니다.
컴포넌트 코드는 다음과 같습니다
<template>
<div>
<script id="editor" type="text/plain"></script>
</div>
</template>
<script>
export default {
name: "UE",
data() {
return {
editor: null,
};
},
props: {
defaultMsg: {
type: String,
default: "",
},
config: {
type: Object,
},
},
mounted() {
const _this = this;
this.editor = UE.getEditor("editor", this.config); // 初始化UE
this.editor.addListener("ready", function () {
_this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。
});
},
watch: {
defaultMsg(newVal) {
this.editor.setContent(newVal);
},
},
methods: {
getUEContent() {
// 获取内容方法
return this.editor.getContent();
},
setText(con) {
const _this = this;
_this.editor.setContent(con);
},
},
destroyed() {
this.editor.destroy();
},
};
</script>
<style scoped>
</style>```
然后 修改vue项目的main.js 加入以下引用
```bash
import '../static/ueditor//ueditor.config'
import '../static/ueditor/ueditor.all'
import '../static/ueditor/lang/zh-cn/zh-cn'
import '../static/ueditor/ueditor.parse.min'
정적 ueditor 아래에 배치하므로 ueditor.config.js의 UEDITOR_HOME_URL을 수정합니다.
그런 다음 사용하려는 "@/components/ue"에서 구성 요소 가져오기 편집기를 소개합니다
. 자신의 경로에 따라 참조하십시오.
<editor :defaultMsg="form.content" ref="ue"></editor>
이 때 서식 있는 텍스트 편집 상자를 표시할 수 있지만 백엔드 구성이 필요하기 때문에 이미지 업로드 기능을 사용할 수 없습니다.
여기에 해결해야 할 작은 버그가 있습니다.사진을 업로드하기 위해 클릭했지만 사진을 업로드하는 팝업 상자가 가려지고 당겨지면 ueditor.config.js의 zIndex 매개 변수를 9999로 수정하십시오.
세 번째 단계 백엔드 구성
- 준비:
이전에 다운로드한 ueditor의 jsp에 있는 config.json 파일을 프로젝트 리소스에 넣습니다.
그런 다음 lib 에 여러 jar 패키지가 있음을 확인할 수 있으므로
여기에서 pom 형식으로 가져옵니다.
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.10</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
5개의 jar 패키지, 사실 이 3개를 소개하면 충분합니다.
- 준비 작업 완료 후: 이미지 업로드 구성에 백엔드가 구성에 참여해야 함 먼저
프론트엔드 vue 프로젝트 편집기의 ueditor.config.js에서 serverUrl
구성을 변경합니다.
@RestController
@RequestMapping("ueditor")
public class UeController {
@RequestMapping(value = "config")
public void enterUE(HttpServletRequest request, HttpServletResponse response) {
try {
request.setCharacterEncoding("utf-8");
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
response.setHeader("Content-Type", "text/html");
//String rootPath = request.getSession().getServletContext().getRealPath("/");mvc项目获取路径
String rootPathS = ClassUtils.getDefaultClassLoader().getResource("").getPath();
try {
String exec = new ActionEnter(request, rootPathS).exec();
PrintWriter writer = response.getWriter();
writer.write(exec);
writer.flush();
writer.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
ActionEnter는 에디터에서 다운로드 한 Java 소스 코드 를 우리 프로젝트에 복사해야 하는 링크
입니다 . 나중에 BinaryUploader 파일에서 이 몇 군데만 변경하고 실제 상황에 따라 파일을 저장하면 됩니다.
사용자 지정하려면 다음과 같이 코드 흐름을 알아야 합니다. 변경이 필요하지 않으면 건너뛰십시오.
위의 그림은 로컬 읽기에만 해당되며 Linux에서는 읽을 수 없습니다.
아래 수정:
private String getConfigPath() {
InputStream is = this.getClass().getResourceAsStream("/" + ConfigManager.configFileName);
BufferedReader br = new BufferedReader(new InputStreamReader(is));
String s = "";
String configContentStr = "";
try {
while ((s = br.readLine()) != null) {
configContentStr = configContentStr + s;
}
} catch (IOException e) {
e.printStackTrace();
}
return configContentStr;
}
파일의 내용은 여기에서 읽었으므로 다섯 번째 단계에서 읽을 필요가 없습니다. this.readFile을 제거하십시오.
모든 구성이 완료되면 ueditor의 컨트롤러 경로를 직접 방문하여 구성이 완료되었는지 확인할 수 있습니다.
http://localhost:8101/ueditor/config?action=config&noCache=1627864262730
성공적인 json을 읽은 후 반환되는 결과가 아니라면 json 파일을 성공적으로 읽지 못한 것이 문제입니다.
끝
위의 백엔드 구성이 완료되면 인터페이스가 연결됩니다. 그러면 상황을 파악할 수 있습니다..
이때 다중 이미지 업로드가 구현되었으며 단일 이미지 업로드는 설명하지 않습니다.
이때 프런트 엔드에서 얻은 리치 텍스트 편집 상자의 내용은
this.$refs.ue.getUEContent();
성공적으로 저장한 후 백엔드 데이터베이스에 저장된 결과는
지금까지 서식 있는 텍스트 상자 사용이 끝났습니다. 다른 것이 아니라 자신의 사용 과정을 기록하십시오.