【九月打卡】第2天 文档页面功能开发-2

课程名称：Spring Boot+Vue3前后端分离，实战wiki知识库系统

章节名称：8-12 文档页面功能开发-2

讲师姓名：甲蛙

文档内容：

改上次留下的一个小bug，文档内容表没数据的话，会报空指针错误。加入非空判断

if (ObjectUtils.isEmpty(content)) {
    return "";
} else {
    return content.getContent();
}

接下来，让点击文档节点时显示文档。加入<div :innerHTML="html"></div>给文档节点树右侧显示内容，html为响应式变量。然后仿照文档管理写查询方法，给html赋值。onSelect为点击文档节点执行的方法，参数selectedKeys是官网提供的是个数组，所以使用时需要加上[0]。

/**
 * 内容查询
 **/
const handleQueryContent = (id: number) => {
  axios.get("/doc/find-content/" + id).then((response) => {
    const data = response.data;
    if (data.success) {
      html.value = data.content;
    } else {
      message.error(data.message);
    }
  });
};

const onSelect = (selectedKeys: any, info: any) => {
  console.log('selected', selectedKeys, info);
  if (Tool.isNotEmpty(selectedKeys)) {
    // 加载内容
    handleQueryContent(selectedKeys[0]);
  }
};

此时，富文本显示的样式和预期不一样，有些没有显示，这时因为wangeditor从编辑器中获得的代码是不包含样式的纯html，样式可以自定义，也可以使用默认的样式，所以我们使用默认的样式，不过要只对富文本文档内容生效需要给内容部分加上样式class="wangeditor"，并在css前面加上选择器

<style>
/* wangeditor默认样式, 参照: http://www.wangeditor.com/doc/pages/02-%E5%86%85%E5%AE%B9%E5%A4%84%E7%90%86/03-%E8%8E%B7%E5%8F%96html.html */
/* table 样式 */
.wangeditor table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
.wangeditor table td,
.wangeditor table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
}
.wangeditor table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
}

/* blockquote 样式 */
.wangeditor blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}

/* code 样式 */
.wangeditor code {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}
.wangeditor pre code {
  display: block;
}

/* ul ol 样式 */
.wangeditor ul, ol {
  margin: 10px 0 10px 20px;
}
</style>

现在又有了个小bug，显示还是不太一样，因为antd给p标签的样式影响了我们的样式，我们可以把它覆盖掉，加入!import可以提到最高优先级

/* 和antdv p冲突，覆盖掉 */
.wangeditor blockquote p {
  font-family:"YouYuan";
  margin: 20px 10px !important;
  font-size: 16px !important;
  font-weight:600;
}

下面做文档预览功能

首先在文档管理右侧加入一个文档预览按钮，执行handlePreviewContent()方法

<a-form-item>
  <a-button type="primary" @click="handlePreviewContent()">
    <EyeOutlined /> 内容预览
  </a-button>
</a-form-item>

用抽屉组件a-drawer显示预览的文档

<a-drawer width="900" placement="right" :closable="false" :visible="drawerVisible" @close="onDrawerClose">
  <div class="wangeditor" :innerHTML="previewHtml"></div>
</a-drawer>

然后写显示方法handlePreviewContent和关闭方法onDrawerClose，当点击按钮时将富文本显示出来，并将显示属性改为true来使它变成可见

// ----------------富文本预览--------------
const drawerVisible = ref(false);
const previewHtml = ref();
const handlePreviewContent = () => {
  const html = editor.txt.html();
  previewHtml.value = html;
  drawerVisible.value = true;
};
const onDrawerClose = () => {
  drawerVisible.value = false;
};

学习收获：课程中这章分成了两部分，今天学习的是下半部分，主要是改了几个bug和是实现文档预览，还有主要是前端的部分，虽然我想学的是后端，但多了解下前端也不是坏事