测试完成

WXL

2025-01-15 1cb1fbf80c955986385377b5f84e8915d1e655d6

 src/views/knowledge/education/compilequer/index.vue

@@ -142,6 +142,7 @@
                @change="handleInputConfirm"
                filterable
                remote
                allow-create
                reserve-keyword
                default-first-option
                :remote-method="remoteMethodtag"
@@ -175,22 +176,15 @@
            ></el-col>
            <el-col :span="9">
              <el-form-item label="可用状态" prop="region">
                <el-select
                  v-model="ruleForm.isavailable"
                  size="medium"
                  filterable
                  placeholder="请选择分类"
                >
                  <el-option
                    class="ruleFormaa"
                    v-for="item in usable"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                <el-radio-group v-model="ruleForm.isAvailable">
                  <el-radio
                    v-for="(item, index) in usable"
                    :label="item.value"
                    >{{ item.label }}</el-radio
                  >
                  </el-option>
                </el-select> </el-form-item
            ></el-col>
                </el-radio-group>
              </el-form-item></el-col
            >
          </el-row>
          <el-form-item label="宣教方式" prop="region">
            <el-select
@@ -211,45 +205,9 @@
            </el-select>
          </el-form-item>
          <el-form-item label="适用疾病" prop="region">
            <div class="xinz-inf">
              <el-tag
                :key="item.icd10name"
                type="warning"
                v-for="item in illnesslist"
                closable
                :disable-transitions="false"
                @close="handleCloseillness(item)"
              >
                {{ item.icd10name }}
              </el-tag>
              <el-select
                v-model="inputValue"
                v-if="illnessVisible"
                @change="illnessConfirm"
                :remote-method="remoteMethod"
                filterable
                remote
                allow-create
                default-first-option
                placeholder="请选择/查询"
                :loading="loading"
              >
                <el-option
                  v-for="item in optionsillness"
                  :key="item.icdid"
                  :label="item.icdname"
                  :value="item.icdid"
                >
                </el-option>
              </el-select>
              <el-button
                v-else
                class="button-new-tag"
                size="small"
                @click="illnessshowInput"
                >+ 新增疾病</el-button
              >
            </div>
            <el-button type="warning" @click="$refs.child.handleAddpatient()"
              >添加疾病</el-button
            >
          </el-form-item>
          <el-form-item label="适用院区" prop="region">
            <el-select
@@ -297,35 +255,10 @@
      <!-- 宣教内容 -->
      <div v-if="Editprogress == 2">
        <el-row :gutter="20">
          <el-col :span="4"><div class="leftvlue-jbxx">宣教内容</div></el-col>
          <el-col :span="12">
            <div>
              <el-button @click="laststep('ruleForm')">上一步</el-button>
              <el-button type="success" @click="Departmenttreatment('ruleForm')"
                >保存</el-button
              >
              <el-button type="warning" @click="Departmenttreatment('ruleForm')"
                >另存新版本</el-button
              >
              <el-button type="info" @click="closeFm('ruleForm')"
                >关闭</el-button
              >
            </div></el-col
          >
          <el-col :span="4">
            <div class="leftvlue-jbxx">宣教内容</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div style="display: flex; margin-left: 66px; margin-bottom: 10px">
              <div
                v-for="item in variablelist"
                class="tsgname"
                @click="tsgnameto(item)"
              >
                {{ item.variatename }}
              </div>
            </div>
          </el-col></el-row
        >

        <div>
          <el-form
@@ -335,20 +268,55 @@
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="资料形式" prop="region">
              <el-select v-model="ruleForm.shape" placeholder="请选择内容形式">
                <el-option
                  v-for="item in xjxsoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="资料形式" prop="region">
                  <el-select
                    v-model="ruleForm.shape"
                    placeholder="请选择内容形式"
                  >
                    <el-option
                      v-for="item in xjxsoptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <div>
                  <el-button @click="laststep('ruleForm')">上一步</el-button>
                  <el-button
                    type="success"
                    @click="Departmenttreatment('ruleForm')"
                    >保存</el-button
                  >
                  <el-button
                    type="warning"
                    @click="Departmenttreatment('ruleForm')"
                    >另存新版本</el-button
                  >
                  <el-button type="info" @click="closeFm('ruleForm')"
                    >关闭</el-button
                  >
                </div>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div>
          <el-upload
            class="upload-demo"
            :action="uploadImgUrlword"
            :on-success="uploadEditorSuccessword"
            :on-error="uploadEditorErrorword"
            :before-upload="beforeEditorUploadword"
            :headers="headers"
          >
            <el-button size="small" type="primary">word文件上传</el-button>
          </el-upload>
          <div id="quillEditorQiniu">
            <!-- 基于elementUi的上传组件 el-upload begin-->
            <el-upload
@@ -368,17 +336,30 @@
              v-model="content"
              ref="customQuillEditor"
              :options="editorOption"
              @blur="onEditorBlur"
              @focus="onEditorFocus"
              @change="onEditorChange"
            >
            </quill-editor>
          </div>
        </div>
      </div>
    </div>
    <!-- 添加适用疾病窗口 -->
    <Optional-Form
      ref="child"
      :dialogVisiblepatient="dialogVisiblepatient"
      :overallCase="illnesslist"
      @addoption="dialogVisiblepatient = false"
      @kkoption="dialogVisiblepatient = true"
    />
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import axios from "axios";

import {
  getheLibraryAssort,
  delheLibraryAssort,
@@ -388,11 +369,14 @@
  dellibraryinfo,
  deltargetillness,
  compilelibrary,
  addrichText,
  getlibraryinfo,
  getillnesslist,
  illnesslistget,
  getillness,
} from "@/api/AiCentre/index";
import OptionalForm from "@/components/OptionalForm"; //正则组件

import { listDept } from "@/api/system/dept";
// import * as Quill from "quill";
import Quill from "quill";
@@ -426,12 +410,15 @@
];

export default {
  name: "aEducationinfo",
  components: { OptionalForm },
  data() {
    return {
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload",
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/uploadSort",
      uploadImgUrlword: process.env.VUE_APP_BASE_API + "/common/uploadShow",
      uploadUrlPath: "没有文件上传",
      quillUpdateImg: false,
      fileList: [
@@ -444,10 +431,12 @@
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
      content: "", //最终保存的内容
      content: `<p>测试</p><video class="ql-video" controls="controls" controlslist="nofullscreen" type="video/mp4" style="object-fit:fill;width: 100%;" preload="auto" playsinline="true" x-webkit-airplay="allow" x5-video-orientation="portraint" x5-playsinline="true" x5-video-player-fullscreen="true" src="http://218.108.11.22:8093/profile-api/upload/vadio/营养泵操作规范.mp4"></video><video class="ql-video" controls="controls" controlslist="nofullscreen" type="video/mp4" style="object-fit:fill;width: 100%;" preload="auto" playsinline="true" x-webkit-airplay="allow" x5-video-orientation="portraint" x5-playsinline="true" x5-video-player-fullscreen="true" src="http://218.108.11.22:8093/profile-api/upload/vadio/注射器推注.mp4"></video><p>321</p>"`, //最终保存的内容
      fileName: "", //文件名
      dynamicTags: [],
      inputVisible: false,
      illnessVisible: false,
      dialogVisiblepatient: false, //适用疾病窗口
      inputValue: "",
      // 富文本
      editorOption: {
@@ -497,6 +486,8 @@
      radioas: "", //填空题答案
      // 总条数
      total: 1,
      hetype: "",
      id: null,
      ruleForm: {
        campus: [],
        heLibraryTagList: [],
@@ -519,6 +510,13 @@
      deptList: [],
      tempDetpRelevanceslist: [],
      props: { multiple: true, value: "deptId", label: "deptName" },
      // 内网的部分（文件）
      oldPattern: "http://192.168.191.181:8095/profile/upload",
      // 内网的部分（文件）
      oldPatternhtml: "/http:\/\/192\.168\.191\.181:8095\/profile\/upload\//g",
      // 外网部分（文件）
      newPattern: "http://218.108.11.22:8093/profile-api/upload",

      xjxsoptions: [
        {
          value: "1",
@@ -554,6 +552,13 @@
      },
    };
  },
  activated() {
    if (this.id != this.$route.query.id) {
      this.gettabList();
      this.getList();
      this.illnessUpdate();
    }
  },

  created() {
    this.gettabList();
@@ -568,8 +573,8 @@
  watch: {
    content(newVal, oldVal) {
      //this.$emit('input', newVal);
      console.log(newVal);
      console.log(oldVal);
      console.log(newVal, "A");
      console.log(oldVal, "B");
    },
  },

@@ -581,14 +586,18 @@
    getList() {
      this.loading = true;
      this.id = this.$route.query.id;
      this.hetype = this.$route.query.hetype;
      if (this.id) {
        getlibraryinfo({ id: this.id }).then((res) => {
          this.ruleForm = res.data[0];
          this.ruleForm.campus = this.ruleForm.campus.split(",");
          if (this.ruleForm.campus)
            this.ruleForm.campus = this.ruleForm.campus.split(",");
          this.dynamicTags = res.data[0].heLibraryTagList.map(
            this.processElement
          );

          if (this.ruleForm.htmlRichText) {
            this.Getmissioncontent(this.ruleForm.htmlRichText);
          }
          if (this.ruleForm.deptNames) {
            this.tempDetpRelevanceslist = JSON.parse(this.ruleForm.deptNames);
          }
@@ -603,44 +612,141 @@
      // 宣教分类
      getheLibraryAssort({}).then((res) => {
        this.sortlist = res.rows;
        console.log(this.sortlist);
      });
      // 部门
      listDept(this.queryParams).then((response) => {
        this.deptList = this.handleTree(response.data, "deptId");
      });
      this.loading = false;
    },

      // ------------------

      // let html =
      //   '<p>测试</p><video class="ql-video" controls="controls" controlslist="nofullscreen" type="video/mp4" style="object-fit:fill;width: 100%;" preload="auto" playsinline="true" x-webkit-airplay="allow" x5-video-orientation="portraint" x5-playsinline="true" x5-video-player-fullscreen="true" src="http://192.168.191.181:8095/profile/upload/vadio/营养泵介绍.mp4"></video><p>测试111</p><video class="ql-video" controls="controls" controlslist="nofullscreen" type="video/mp4" style="object-fit:fill;width: 100%;" preload="auto" playsinline="true" x-webkit-airplay="allow" x5-video-orientation="portraint" x5-playsinline="true" x5-video-player-fullscreen="true" src="http://192.168.191.181:8095/profile/upload/vadio/注射器推注.mp4"></video><p><br></p>';
      // // html = html.parserdom(this.oldPattern, this.newPattern);
      // html = this.parserdom(html);
      // console.log(html, "html");

      // this.loading = false;
    },
    // parser
    parserdom(html) {
      // 创建一个新的DOM解析器
      var parser = new DOMParser();
      // 将字符串解析为文档对象
      var doc = parser.parseFromString(html, "text/html");

      // 定义要替换的新旧URL
      var oldUrlBase = "http://192.168.191.181:8095/profile/upload";
      var newUrlBase = "http://218.108.11.22:8093/profile-api/upload";

      // 获取所有的video元素
      var videos = doc.querySelectorAll("video");

      // 遍历所有的video元素并替换src属性
      videos.forEach(function (video) {
        var src = video.getAttribute("src");
        if (src.startsWith(oldUrlBase)) {
          video.setAttribute("src", src.replace(oldUrlBase, newUrlBase));
        }
      });

      // 将修改后的文档转换回字符串
      var newContent = doc.body.innerHTML;
      return newContent;
    },
    submitForm(formName) {
      let tgs = [];
      this.dynamicTags.forEach((item) => {
        tgs.push(item.tagname);
      });
      this.ruleForm.campus = this.ruleForm.campus.join(",");
      if (this.ruleForm.campus) {
        this.ruleForm.campus = this.ruleForm.campus.join(",");
      }
      this.ruleForm.labelInfo = tgs.length != 0 ? tgs.join(", ") : "";
      this.ruleForm.otherdata = JSON.stringify(this.variablelist);
      this.ruleForm.hetype = 1;
      console.log(22);
      this.ruleForm.suitway =
        this.ruleForm.suitway.length != 0
          ? this.ruleForm.suitway.join(",")
          : "";
      if (this.id) {
        this.ruleForm.isoperation = 2;
      } else {
        this.ruleForm.isoperation = 1;

      addrichText({
        content: this.parserdom(this.content),
        fileName: this.generateRandomHtmlFilename(),
      }).then((res) => {
        this.ruleForm.richText = res.msg;
        console.log(this.ruleForm.richText, "this.ruleForm.richText");
        // 处理内网html
        addrichText({
          content: this.content,
          fileName: this.generateRandomHtmlFilename(),
        }).then((resf) => {
          this.ruleForm.htmlRichText = resf.msg.replace(
            this.newPattern,
            this.oldPattern
          );
          console.log(this.ruleForm.htmlRichText, "this.ruleForm.htmlRichText");

          if (this.id) {
            this.ruleForm.isoperation = 2;
            compilelibrary(this.ruleForm).then((res) => {
              if (res.code == 200) {
                this.$modal.msgSuccess("编辑成功");
                this.confirmillness();
                this.$router.go(-1);
              }
            });
          } else {
            this.ruleForm.isoperation = 1;
            compilelibrary(this.ruleForm).then((res) => {
              if (res.code == 200) {
                this.$modal.msgSuccess("新增成功");
                this.confirmillness(res.data);
                this.$router.go(-1);
              }
            });
          }
        });
      });
    },

    generateRandomHtmlFilename() {
      // 生成一个0到1之间的随机数，并将其转换为字符串
      let randomNumber = Math.random().toString();
      // 移除前面的0和小数点
      randomNumber = randomNumber.substring(6);
      // 确保生成的随机数是一定长度的，例如8位
      while (randomNumber.length < 8) {
        randomNumber = "0" + randomNumber;
      }
      // 拼接上.html后缀
      return randomNumber + ".html";
    },

    // 保存疾病
    confirmillness(guid) {
      this.illnesslist.forEach((item, index) => {
        if (guid) {
          item.outid = guid;
        } else {
          console.log(this.ruleForm);
          item.outid = this.ruleForm.id;
        }
        item.icd10name = item.icdname;
        item.icd10code = item.icdcode;
        item.type = 6;
        if (!item.id) {
          addtargetillness(item).then((res) => {});
        }
      });
      if (this.illnesslistapi.length) {
        deltargetillness(this.illnesslistapi.join(",")).then((res) => {});
      }
      compilelibrary(this.ruleForm).then((res) => {
        this.$modal.msgSuccess("编辑成功");
        this.$router.go(-1);
      });
      this.illnessVisible = false;
      this.$modal.msgSuccess("编辑成功");
    },
    getFileNameFromPath(path) {
      const parts = path.split("/");
      return parts[parts.length - 1];
    },
    // 下一步
    nextstep() {
@@ -789,62 +895,19 @@
    },
    // 疾病-----------------------
    illnessUpdate() {
      this.illnesslistapi = [];
      const illnessqueryParams = {
        pageNum: 1,
        pageSize: 100,
      };
      getillnesslist(illnessqueryParams).then((response) => {
        this.optionsillness = response.rows;
      });
      getillness({ outid: this.$route.query.id, type: 6 }).then((res) => {
        this.illnesslist = res.rows;
      });
    },
    handleCloseillness(tag) {
      this.illnesslist.splice(this.illnesslist.indexOf(tag), 1);
      if (tag.id) {
        this.illnesslistapi.push(tag.id);
      if (this.id) {
        getillness({ outid: this.$route.query.id, type: 6 }).then((res) => {
          this.illnesslist = res.rows;
          this.illnesslist.forEach((item) => {
            item.icdname = item.icd10name;
          });
        });
      }
    },
    remoteMethod(value) {
      const illnessqueryParams = {
        pageNum: 1,
        pageSize: 100,
        icdname: value,
      };
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        getillnesslist(illnessqueryParams).then((response) => {
          this.optionsillness = response.rows;
        });
      }, 200);
    },
    illnessConfirm(item) {
      let opeavalue = {};
      let tagname = this.inputValue;
      illnesslistget(item).then((res) => {
        opeavalue = res.data;
        opeavalue.outid = this.id;
        opeavalue.type = 6;
        opeavalue.icd10id = opeavalue.icdid;
        opeavalue.icd10name = opeavalue.icdname;
        opeavalue.icd10code = opeavalue.icdcode;
        if (tagname) {
          this.illnesslist.push(opeavalue);
        }
      });
      this.illnessVisible = false;
      this.inputValue = "";
    },
    
    illnessshowInput() {
      this.illnessVisible = true;
    },

    // --------------------------

    // 预览模版
    // 预览模板
    PreviewTemplate() {
      this.drawer = true;
    },
@@ -865,18 +928,22 @@
    // 上传图片成功
    uploadEditorSuccess(res, file) {
      console.log("上传成功");
      // this.$emit('upload',res, file)
      console.log(res, file);
      //拼接出上传的图片在服务器的完整地址
      let imgUrl = res.url;
      console.log(res.url);

      imgUrl = imgUrl.replace(this.newPattern, this.oldPattern);
      console.log(imgUrl, "imgUrl");

      let type = imgUrl.substring(imgUrl.lastIndexOf(".") + 1);
      console.log(type);
      this.fileName = this.getFileNameFromPath(res.url);

      // 获取富文本组件实例
      let quill = this.$refs.customQuillEditor.quill;
      // 获取光标所在位置
      let length = quill.getSelection().index;
      // 插入图片||视频  res.info为服务器返回的图片地址
      if (type == "mp4" || type == "MP4") {
      if (type == "mp4" || type == "MP4"|| type == "avi"|| type == "AVI") {
        window.jsValue = imgUrl;
        quill.insertEmbed(length, "video", imgUrl);
      } else {
@@ -887,10 +954,22 @@
      //取消上传动画
      this.quillUpdateImg = false;
    },
    // 失去焦点事件
    onEditorBlur(e) {
      console.log("onEditorBlur: ", e);
    },
    // 获得焦点事件
    onEditorFocus(e) {
      console.log("onEditorFocus: ", e);
    },
    // 内容改变事件
    onEditorChange(e) {
      console.log("onEditorChange: ", e);
    },
    // 上传(文件)图片失败
    uploadEditorError(res, file) {
      console.log(res);
      console.log(file);
      console.log(res, "word");
      console.log(file, "word");
      //页面提示
      this.$message.error("上传图片失败");
      //取消上传动画
@@ -900,6 +979,58 @@
    uploadResult: function (res) {
      this.uploadUrlPath = res;
    },
    // 上传(文件)图片失败
    uploadEditorErrorword(res, file) {
      console.log(res);
      console.log(file);
      //页面提示
      this.$message.error("上传图片失败");
      //取消上传动画
      this.quillUpdateImg = false;
    },
    //上传图片之前async
    beforeEditorUploadword(res, file) {
      //显示上传动画
      this.quillUpdateImg = true;
      //  const res1 = await uploadImage()
      // console.log(res1,'=====');
      // this.$emit('before',res, file)
      console.log(res);
      console.log(file);
    },
    // 上传word成功
    uploadEditorSuccessword(res, file) {
      console.log("上传word文件成功");
      console.log(res, file, "word");
      let fileurl = res.url.replace(this.newPattern, this.oldPattern);
      axios
        .get(fileurl)
        .then((response) => {
          console.log(response.data, "数据"); // 输出获取到的文件内容
          this.$nextTick(() => {
            this.content = response.data;
          });
          this.fileName = this.getFileNameFromPath(response.url);
          console.log(this.fileName, "this.fileName");
        })
        .catch((error) => {
          console.error("Failed to fetch file:", error);
        });
    },
    Getmissioncontent(url) {
      axios
        .get(url)
        .then((response) => {
          console.log(response.data, "数据"); // 输出获取到的文件内容
          this.content = response.data;
          this.fileName = this.getFileNameFromPath(response.url);
          console.log(this.fileName, "this.fileName");
        })
        .catch((error) => {
          console.error("Failed to fetch file:", error);
        });
    },
    // 处理url
  },
};
</script>
@@ -908,6 +1039,7 @@
.Questionnairemanagement {
  // display: flex;
}

.sidecolumn {
  // width: 300px;
  // min-height: 100vh;
@@ -922,6 +1054,7 @@
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
    0 0 6px 0 rgba(0, 0, 0, 0.04);
}

.leftvlue {
  //   display: flex;
  //   flex: 1;
@@ -931,20 +1064,25 @@
  border: 1px solid #dcdfe6;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
    0 0 6px 0 rgba(0, 0, 0, 0.04);

  .mulsz {
    font-size: 20px;
  }

  .leftvlue-jbxx {
    margin-bottom: 50px;
    font-size: 20px;

    span {
      position: absolute;
      right: 80px;
    }
  }

  .demo-cascader {
    margin-right: 20px;
  }

  .PreviewTemplate {
    color: #02a7f0;
    cursor: pointer;
@@ -952,6 +1090,7 @@
    margin: 0 20px;
  }
}

.xinz-inf {
  font-size: 18px;
  white-space: nowrap;
@@ -963,6 +1102,7 @@
  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
@@ -970,12 +1110,14 @@
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
}

.preview-left {
  margin: 20px;
  //   margin: 20px;
@@ -984,41 +1126,51 @@
  border: 1px solid #dcdfe6;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
    0 0 6px 0 rgba(0, 0, 0, 0.04);

  .topic-dev {
    margin-bottom: 25px;
    font-size: 20px !important;

    .dev-text {
      margin-bottom: 10px;
    }
  }
}

.addtopic {
  margin-top: 30px;
}

.presentation {
  margin: 20px 0;
  display: flex;

  .presentation-left {
    width: 50%;
    height: 500px;

    .button-textxg {
      color: #024df0;
    }

    .button-textsc {
      color: #f52727;
    }
  }

  .presentation-right {
    width: 50%;
    height: 500px;
    padding: 20px;
    font-size: 18px;
    border: 1px solid #909091;

    span {
      padding: 0 35px;
      margin-right: 10px;
      border-bottom: 1px solid #909091;
    }

    .headline {
      font-size: 20px;
      border-left: 3px solid #41a1be;
@@ -1027,6 +1179,7 @@
    }
  }
}

::v-deep .addtopic-input {
  input {
    background: #02a7f0;
@@ -1034,25 +1187,31 @@
    width: 150px;
  }
}

::v-deep.el-step.is-vertical .el-step__title {
  font-size: 25px;
}

::v-deep.el-input--medium {
  font-size: 18px !important;
}

::v-deep.ruleFormaa.el-select {
  display: inline-block;
  position: relative;
  width: 700px;
}

.el-select__tags {
  font-size: 20px;
  max-width: 888px !important;
}

::v-deep.el-radio__inner {
  width: 22px;
  height: 22px;
}

// ::v-deep.topic-dev.el-radio__label {
//   font-size: 24px;
// }
@@ -1061,19 +1220,23 @@
    font-size: 24px;
  }
}

::v-deep.el-checkbox-group {
  span {
    font-size: 24px;
  }
}

.editor {
  line-height: normal !important;
  height: 400px;
  margin-bottom: 50px;
  height: 600px;
  margin-bottom: 80px;
}

.ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "请输入链接地址:";
}

.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: "保存";
@@ -1088,14 +1251,17 @@
.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";
@@ -1105,26 +1271,32 @@
.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";
@@ -1134,10 +1306,12 @@
.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: "等宽字体";