zoukankan      html  css  js  c++  java
  • vue集成wangeditor3.0版本 解决光标乱跳等问题

    关于wangeditor的具体集成方法跟用法 可以参考官网 http://www.wangeditor.com/

    下面直接贴上源码

    子组件:

      1 <template lang="html">
      2  <div class="editor">
      3    <div class="toolbar"
      4      ref="editor"
      5      style="text-align:left"
      6    >
      7  </div>
      8  </div>
      9 </template>
     10 
     11 <script>
     12   import E from 'wangeditor'
     13   import emojiJSON from '@/assets/emoji.json'
     14   import emojiMonkeyJSON from '@/assets/emojimonkey.json'
     15   import emojiRabbitJSON from '@/assets/emojirabbit.json'
     16   export default {
     17     name: 'editoritem',
     18     data() {
     19       return {
     20         editor: null,
     21         info_: null,
     22         isChange:false,
     23         emojiList:emojiJSON,
     24         emojiMonkeyList:emojiMonkeyJSON,
     25         emojiRabbitList:emojiRabbitJSON
     26       }
     27     },
     28     model: {
     29       prop: 'value',
     30       event: 'change'
     31     },
     32     props: {
     33       value: {
     34         type: String,
     35         default: ''
     36       },
     37       isClear: {
     38         type: Boolean,
     39         default: false
     40       }
     41     },
     42     watch: {
     43       // isClear(val) {
     44       //   // 触发清除文本域内容
     45       //   if (val) {
     46       //     this.editor.txt.clear()
     47       //     this.info_ = null
     48       //   }
     49       // }
     50       // ,
     51       value: function(value) {
     52         // if (value !== this.editor.txt.html()) {
     53         //   this.editor.txt.html(this.value)
     54         // }
     55         if(!this.isChange){
     56              this.editor.txt.html(this.value);
     57         }
     58          this.isChange= false;
     59       }
     60       //value为编辑框输入的内容,这里我监听了一下值,当父组件调用得时候,如果给value赋值了,子组件将会显示父组件赋给的值
     61     },
     62     mounted() {
     63       this.seteditor()
     64       this.editor.txt.html(this.value)
     65     },
     66     methods: {
     67       seteditor() {
     68         // http://192.168.2.125:8080/admin/storage/create
     69         this.editor = new E(this.$refs.editor);
     70         this.editor.customConfig.uploadImgShowBase64 = true // base 64 存储图片
     71         this.editor.customConfig.uploadImgServer = '/file/uploadPreview'// 配置服务器端地址
     72         this.editor.customConfig.uploadImgHeaders = {
     73             dbToken: this.$store.state.dbToken
     74         }// 自定义 header
     75         this.editor.customConfig.uploadFileName = 'file' // 后端接受上传文件的参数名
     76         this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2M
     77         this.editor.customConfig.uploadImgMaxLength = 6 // 限制一次最多上传 3 张图片
     78         this.editor.customConfig.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间
     79 
     80        this.editor.customConfig.emotions = [
     81              {
     82                title: 'QQ',
     83                type: 'image',
     84                content: this.emojiList
     85              },
     86              {
     87                title: 'monkey',
     88                type: 'image',
     89                content: this.emojiMonkeyList
     90              },
     91              {
     92                title: 'rabbit',
     93                type: 'image',
     94                content: this.emojiRabbitList
     95              }
     96         ];
     97         // 配置菜单
     98         this.editor.customConfig.menus = [
     99           'head', // 标题
    100           'bold', // 粗体
    101           'fontSize', // 字号
    102           'fontName', // 字体
    103           'italic', // 斜体
    104           'underline', // 下划线
    105           'strikeThrough', // 删除线
    106           'foreColor', // 文字颜色
    107           'backColor', // 背景颜色
    108           'list', // 列表
    109           '|',
    110           'justify', // 对齐方式
    111           'quote', // 引用
    112           'emoticon', // 表情
    113           'image', // 插入图片
    114           '|',
    115           'table', // 表格
    116           'undo', // 撤销
    117           'redo', // 重复
    118           'fullscreen' // 全屏
    119         ]
    120          this.editor.customConfig.uploadImgHooks = {
    121             customInsert: function(insertImg, result, editor) {
    122             let url = Object.values(result.data)
    123             JSON.stringify(url)
    124             insertImg(url[3])
    125            }
    126          };
    127         this.editor.customConfig.onchange = (html) => {
    128           this.isChange = true;
    129           this.info_ = html // 绑定当前逐渐地值
    130           this.$emit('change', this.info_) // 将内容同步到父组件中
    131         }
    132         // 创建富文本编辑器
    133         this.editor.create()
    134       }
    135     }
    136   }
    137 </script>
    138 
    139 <style lang="css">
    140   .editor {
    141     width: 100%;
    142     margin: 0 auto;
    143     position: relative;
    144     z-index: 0;
    145   }
    146   .toolbar {
    147     border: 1px solid #ccc;
    148   }
    149   .text {
    150     border: 1px solid #ccc;
    151     min-height: 500px;
    152   }
    153 </style>

    父组件:

     1 <template>
     2 <div>
     3  <EditorBar v-model="value"></EditorBar>
     4 </div>
     5 </template>
     6 <script>
     7 import EditorBar from '@/components/wangEnduit/editoritem.vue'
     8 
     9 export default {
    10     data() {
    11         return {
    12             value:''
    13         }
    14       },  
    15     methods: {
    16      },
    17      components: { EditorBar }
    18 }
    19 
    20  </script>

     上传图片地址需要根据自身的路径去修改。

    光标乱跳是因为watch监听的时候 文本内容被实时更新,那么想办法在文本输入的时候让监听无效即可,离开编辑状态 又生效,让文本内容可以保证保存的时候是正确的即可。

    如果遇到其他的问题 欢迎留言,我看到会帮忙回答解决。

  • 相关阅读:
    matplotlib 进阶之origin and extent in imshow
    Momentum and NAG
    matplotlib 进阶之Tight Layout guide
    matplotlib 进阶之Constrained Layout Guide
    matplotlib 进阶之Customizing Figure Layouts Using GridSpec and Other Functions
    matplotlb 进阶之Styling with cycler
    matplotlib 进阶之Legend guide
    Django Admin Cookbook-10如何启用对计算字段的过滤
    Django Admin Cookbook-9如何启用对计算字段的排序
    Django Admin Cookbook-8如何在Django admin中优化查询
  • 原文地址:https://www.cnblogs.com/wuhaojs/p/11766057.html
Copyright © 2011-2022 走看看