update .

admin-ui/src/components/Editor/index.vue

@@ -1,36 +1,51 @@
 <template>
-  <div>
+  <div style="width: 100%;">
-    <el-upload
+    <el-upload :action="uploadUrl" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccess"
-        :action="uploadUrl"
+      :on-error="handleUploadError" class="editor-img-uploader" name="file" :show-file-list="false" :headers="headers"
-        :before-upload="handleBeforeUpload"
+      style="display: none" ref="uploadRef" v-if="type == 'url'">
-        :on-success="handleUploadSuccess"
-        :on-error="handleUploadError"
-        class="editor-img-uploader"
-        name="file"
-        :show-file-list="false"
-        :headers="headers"
-        style="display: none"
-        ref="uploadRef"
-        v-if="type == 'url'"
-    >
     </el-upload>
     <div class="editor">
-      <quill-editor
+      <div v-if="!source">
-          ref="myQuillEditor"
+        <quill-editor ref="myQuillEditor" v-model:content="content" contentType="html"
-          v-model:content="content"
+          @textChange="(e) => $emit('update:modelValue', content)" :options="options" :style="styles" />
-          contentType="html"
+      </div>
-          @textChange="(e) => $emit('update:modelValue', content)"
+      <el-input v-if="source" class="source-textarea" :style="{ height: height + 'px',width:'100%' }" type="textarea"
-          :options="options"
+        v-model="content" />
-          :style="styles"
+
-      />
+      <div style="padding-top: .2em; display: flex; justify-content: flex-end;">
+        <el-radio-group v-model="source" @change="changeSource">
+          <el-radio-button label="编辑视图" :value="false" />
+          <el-radio-button label="源码视图" :value="true" />
+        </el-radio-group>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
 import { QuillEditor, Quill } from '@vueup/vue-quill';
+// import ImageResize from 'quill-image-resize-module';
 import '@vueup/vue-quill/dist/vue-quill.snow.css';
 import { getToken } from "@/utils/auth";
+import { ref, computed, onMounted, getCurrentInstance } from 'vue'
+
+// Quill.register(ImageResize)
+
+const source = ref(false)
+
+const height = ref(100)
+
+onMounted(async () => {
+  await proxy.$nextTick()
+  height.value = myQuillEditor.value.editor.clientHeight + 42;
+})
+
+const changeSource = () => {
+  if (!source.value) {
+    console.debug(myQuillEditor.value.editor.clientHeight);
+  }
+}
+
 
 const props = defineProps({
   /* 编辑器的内容 */
@@ -61,12 +76,16 @@ const props = defineProps({
   type: {
     type: String,
     default: "url",
+  },
+  server: {
+    type: String,
+    default: "/system/oss/upload"
   }
 });
 
 const { proxy } = getCurrentInstance();
 // 上传的图片服务器地址
-const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/system/oss/upload");
+const uploadUrl = computed(() => import.meta.env.VITE_APP_BASE_API + props.server);
 const headers = ref({ Authorization: "Bearer " + getToken() });
 const myQuillEditor = ref();
 
@@ -80,14 +99,14 @@ const options = ref({
       container: [
         ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
         ["blockquote", "code-block"],                    // 引用  代码块
-        [{ list: "ordered" }, { list: "bullet"} ],       // 有序、无序列表
+        [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
         [{ indent: "-1" }, { indent: "+1" }],            // 缩进
         [{ size: ["small", false, "large", "huge"] }],   // 字体大小
         [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
         [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
         [{ align: [] }],                                 // 对齐方式
         ["clean"],                                       // 清除文本格式
-        ["link", "image", "video"]                       // 链接、图片、视频
+        ["link", "image"]                       // 链接、图片、视频
       ],
       handlers: {
         image: function (value) {
@@ -132,7 +151,7 @@ function handleUploadSuccess(res, file) {
     // 获取光标位置
     let length = quill.selection.savedRange.index;
     // 插入图片，res为服务器返回的图片链接地址
-    quill.insertEmbed(length, "image", res.data.url);
+    quill.insertEmbed(length, "image", res.data);
     // 调整光标到最后
     quill.setSelection(length + 1);
     proxy.$modal.closeLoading();
@@ -164,16 +183,20 @@ function handleUploadError(err) {
 </script>
 
 <style>
-.editor, .ql-toolbar {
+.editor,
+.ql-toolbar {
   white-space: pre-wrap !important;
   line-height: normal !important;
 }
+
 .quill-img {
   display: none;
 }
+
 .ql-snow .ql-tooltip[data-mode="link"]::before {
   content: "请输入链接地址:";
 }
+
 .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
   border-right: 0px;
   content: "保存";
@@ -188,14 +211,17 @@ function handleUploadError(err) {
 .ql-snow .ql-picker.ql-size .ql-picker-item::before {
   content: "14px";
 }
+
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
   content: "10px";
 }
+
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
   content: "18px";
 }
+
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
   content: "32px";
@@ -205,26 +231,32 @@ function handleUploadError(err) {
 .ql-snow .ql-picker.ql-header .ql-picker-item::before {
   content: "文本";
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
   content: "标题1";
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
   content: "标题2";
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
   content: "标题3";
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
   content: "标题4";
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
   content: "标题5";
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
   content: "标题6";
@@ -234,12 +266,21 @@ function handleUploadError(err) {
 .ql-snow .ql-picker.ql-font .ql-picker-item::before {
   content: "标准字体";
 }
+
 .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
   content: "衬线字体";
 }
+
 .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
   content: "等宽字体";
 }
+
+
+.source-textarea textarea.el-textarea__inner {
+  resize: none;
+  height: 100%;
+  width: 100%;
+}
 </style>

ruoyi-admin/src/test/resources/generator/api.vm

@@ -38,7 +38,7 @@ public class ${entity.toUpperName()}Api {
   */
   @GetMapping("/{id}")
   @SaCheckPermission("${moduleName}:${entity.toSimpleLowerName()}:query")
-  public ${entity.toUpperName()} id(@NotNull(message = "编号不能为空") @PathVariable Long id) {
+  public ${entity.toUpperName()} id(@NotNull(message = "编号不能为空") @PathVariable ${entity.id.clazz.getSimpleName()} id) {
     return findById(${entity.toUpperName()}.class, id);
   }
 
@@ -113,7 +113,7 @@ public class ${entity.toUpperName()}Api {
   @SaCheckPermission("${moduleName}:${entity.toSimpleLowerName()}:delete")
   @Log(title = "${entity.name}", businessType = BusinessType.DELETE)
   @DeleteMapping("/{ids}")
-  public void remove(@NotEmpty(message = "编号不能为空") @PathVariable Long[] ids) {
+  public void remove(@NotEmpty(message = "编号不能为空") @PathVariable ${entity.id.clazz.getSimpleName()}[] ids) {
     doRemove(${entity.toUpperName()}.class, conditions().put("_id$in", ids).query());
   }