feat: 文件编辑器增加换行功能 (#3173)

This commit is contained in:
zhengkunwang 2023-12-04 22:14:10 +08:00 committed by GitHub
parent 00ffac7210
commit 282c58ca86
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 20 additions and 1 deletions

View file

@ -1089,6 +1089,7 @@ const message = {
dropHelper: 'Drag the files you want to upload here',
fileRecycleBin: 'File Recycle Bin',
fileRecycleBinMsg: '{0} recycle bin',
wordWrap: 'Automatically wrap',
},
ssh: {
autoStart: 'Auto Start',

View file

@ -1038,6 +1038,7 @@ const message = {
dropHelper: '將需要上傳的文件拖曳到此處',
fileRecycleBin: '檔案回收站',
fileRecycleBinMsg: '{0}回收站',
wordWrap: '自動換行',
},
ssh: {
autoStart: '開機自啟',

View file

@ -1039,6 +1039,7 @@ const message = {
dropHelper: '将需要上传的文件拖曳到此处',
fileRecycleBin: '文件回收站',
fileRecycleBinMsg: '{0}回收站',
wordWrap: '自动换行',
},
ssh: {
autoStart: '开机自启',

View file

@ -24,6 +24,12 @@
<el-option v-for="eol in eols" :key="eol.label" :value="eol.value" :label="eol.label" />
</el-select>
</el-form-item>
<el-form-item :label="$t('file.wordWrap')">
<el-select v-model="config.wordWrap" @change="changeWarp()">
<el-option :label="$t('commons.button.enable')" value="on"></el-option>
<el-option :label="$t('commons.button.disable')" value="off"></el-option>
</el-select>
</el-form-item>
</el-form>
<div v-loading="loading">
<div id="codeBox" style="height: 55vh"></div>
@ -81,16 +87,20 @@ interface EditorConfig {
theme: string;
language: string;
eol: number;
wordWrap: WordWrapOptions;
}
const open = ref(false);
const loading = ref(false);
const fileName = ref('');
type WordWrapOptions = 'off' | 'on' | 'wordWrapColumn' | 'bounded';
const config = reactive<EditorConfig>({
theme: 'vs-dark',
language: 'plaintext',
eol: monaco.editor.EndOfLineSequence.LF,
wordWrap: 'on',
});
const eols = [
@ -145,6 +155,12 @@ const changeEOL = () => {
editor.getModel().pushEOL(config.eol);
};
const changeWarp = () => {
editor.updateOptions({
wordWrap: config.wordWrap,
});
};
const initEditor = () => {
if (editor) {
editor.dispose();
@ -160,8 +176,8 @@ const initEditor = () => {
folding: true,
roundedSelection: false,
overviewRulerBorder: false,
wordWrap: 'on',
});
editor.onDidChangeModelContent(() => {
if (editor) {
form.value.content = editor.getValue();