diff --git a/src/resources/plugins/TsCkeditor/ckeditor.less b/src/resources/plugins/TsCkeditor/ckeditor.less
index a1dfb05f6e24820abf735a302fbc5ebee3e2232a..0426afc4d8cdfb235e3483d67e8c496960daf539 100644
--- a/src/resources/plugins/TsCkeditor/ckeditor.less
+++ b/src/resources/plugins/TsCkeditor/ckeditor.less
@@ -25,6 +25,16 @@
     padding-left: 1.5em;
     padding-right: 1.5em;
   }
+  figure {
+    &.image {
+      img {
+        display: block;
+        height: auto;
+        margin: 0 auto;
+        max-width: 100%;
+      }
+    }
+  }
 }
 .ck-content {
   min-height: 130px;
diff --git a/src/views/pages/rdm/project/content-handler/content-handler.vue b/src/views/pages/rdm/project/content-handler/content-handler.vue
index f911e3ac66e2a5b9f19bb0248f2d9854c0c65f01..bff08c88932e98d4328d584066b00ba15585cee8 100644
--- a/src/views/pages/rdm/project/content-handler/content-handler.vue
+++ b/src/views/pages/rdm/project/content-handler/content-handler.vue
@@ -32,12 +32,11 @@
           }"
         ></TsCkeditor>
       </div>
-      <div
+      <TsCkeditor
         v-else
-        v-imgViewer
-        class="content"
-        v-html="issueData.content"
-      ></div>
+        :readonly="true"
+        :value="issueData.content"
+      ></TsCkeditor>
     </div>
     <div v-if="editMode === 'edit' && !autoSave" class="mt-md" style="text-align: right">
       <Button class="mr-md" type="primary" @click="saveIssue()">{{ $t('page.confirm') }}</Button>
@@ -47,10 +46,9 @@
 </template>
 <script>
 import * as handlers from './index.js';
-import imgViewer from '@/resources/directives/img-viewer.js';
 export default {
   name: '',
-  directives: { imgViewer },
+  directives: {},
   components: {
     ...handlers,
     TsCkeditor: () => import('@/resources/plugins/TsCkeditor/TsCkeditor.vue')
@@ -138,9 +136,3 @@ export default {
   padding-left: revert;
 }
 </style>
-<style lang="less">
-.content img {
-  // width: 100%; // 在非编辑模式下，图片被放大变形问题
-  cursor: pointer;
-}
-</style>
diff --git a/src/views/pages/rdm/project/viewtab/components/comment-list.vue b/src/views/pages/rdm/project/viewtab/components/comment-list.vue
index 22f36c6066c4f3cba907f5b7424b0514ea00b1fd..46a85bf0623becf97d75613ce79c43f6a962a378 100644
--- a/src/views/pages/rdm/project/viewtab/components/comment-list.vue
+++ b/src/views/pages/rdm/project/viewtab/components/comment-list.vue
@@ -21,7 +21,10 @@
               <UserCard alignMode="vertical" :iconSize="32" :uuid="row.fcu"></UserCard>
             </div>
             <div>
-              <div v-imgViewer class="comment-content" v-html="row.content"></div>
+              <TsCkeditor
+                :readonly="true"
+                :value="row.content"
+              ></TsCkeditor>
               <div v-if="commentReady['c_' + row.id] && row.childCount > 0" class="mt-md">
                 <CommentList
                   :issueData="issueData"
@@ -67,10 +70,9 @@
   </div>
 </template>
 <script>
-import imgViewer from '@/resources/directives/img-viewer.js';
 export default {
   name: '',
-  directives: { imgViewer },
+  directives: {},
   components: {
     UserCard: () => import('@/resources/components/UserCard/UserCard.vue'),
     TsCard: () => import('@/resources/components/TsCard/TsCard.vue'),
@@ -199,9 +201,6 @@ export default {
   grid-template-columns: 50px calc(100% - 50px - 20px); // auto时，由内容撑开，不受父级元素的影响，导致图片没有自适应宽度
   grid-gap: 20px;
 }
-.comment-content {
-  min-height: 25px;
-}
 .comment-grid:hover {
   .comment-action {
     visibility: visible;