修改图片的显示

src/components/tinymce/TinymceEditor.vue

@@ -72,13 +72,13 @@ export default {
     //插件
     plugins: {
       type: [String, Array],
-      default: 'advlist image lists  wordcount', // autolink link charmap  media
+      default: 'advlist image lists  wordcount media', // autolink link charmap  media
     },
     //工具栏
     toolbar: {
       type: [String, Array],
       default:
-        'undo redo |  formatselect | colorpicker | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent', //  | lists image media table
+        'undo redo |  formatselect | colorpicker | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image media', //  | lists image media table
     },
   },
   data() {
@@ -99,7 +99,9 @@ export default {
         fontsize_formats:
           '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', //字体大小
         font_formats: fonts.join(';'),
-
+        content_style: "img {max-width:100%;}", // 图片最大的宽度,避免超出屏幕
+        image_description: false,
+        image_dimensions: false,
         height: 500, //高度
         placeholder: '在这里输入文字',
 

src/views/articleManagement/articleList.vue

@@ -66,7 +66,7 @@
         >
           <div class="article-list-item-title">{{ item.name }}</div>
           <div class="article-list-item-contgents">
-            <p v-html="item.contentsShow">{{ item.contentsShow }}</p>
+            <p class="p-content" v-html="item.contentsShow">{{ item.contentsShow }}</p>
           </div>
           <div class="article-list-item-createtime">
             {{ item.createdTime | formatDateTime }}
@@ -347,7 +347,13 @@ export default {
 };
 </script>
 
-<style lang="less"></style>
+<style lang="less">
+.p-content img {
+    max-width: 100%;
+    width: auto;
+    height: auto;
+}
+</style>
 
 <style lang="less" scoped>
 @import '~@/styles/common/variable.less';