vue富文本编辑器组件封装

2023-11-06

Vue-Quill-Editor

**
vue-quill-editor基本配置

> npm install vue-quill-editor -s

main.js中引入

  import VueQuillEditor from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  Vue.use(VueQuillEditor);

使用
需要注意的是toolbar的配置

1. 只需要填写功能名的

加粗 - bold；

     斜体 - italic

     下划线 - underline

     删除线 - strike

     引用- blockquote

     代码块 - code-block

     公式 - formula

     图片 - image

     视频 - video

     清除字体样式- clean

     这一类的引用 直接['name','name']这种格式就好了

2. 需要有默认值的

 标题 - header 

  [{ 'header': 1 }, { 'header': 2 }] 值字体大小
 
  列表 - list
  [{ 'list': 'ordered'}, { 'list': 'bullet' }], 值ordered，bullet
 
  上标/下标 - script
  [{ 'script': 'sub'}, { 'script': 'super' }],  值sub，super
 
  缩进 - indent
  [{ 'indent': '-1'}, { 'indent': '+1' }], 值-1，+1等
 
  文本方向 - direction
  [{'direction':'rtl'}]

结构


```javascript
<template>
      <quill-editor class="editor"
                    ref="myTextEditor"
                    v-model="content"
                    :options="editorOption"
                    @blur="onEditorBlur($event)"
                    @focus="onEditorFocus($event)"
                    @ready="onEditorReady($event)"
                    @change="onEditorChange($event)">
      </quill-editor>
  </template>
  <script>
      export default {
        data () {
          return {
            content: null,
            editorOption: {
              modules: {
                toolbar: [
                  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
                  ["blockquote", "code-block"], // 引用  代码块
                  [{ header: 1 }, { header: 2 }], // 1、2 级标题
                  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
                  [{ script: "sub" }, { script: "super" }], // 上标/下标
                  [{ indent: "-1" }, { indent: "+1" }], // 缩进
                  // [{'direction': 'rtl'}],                         // 文本方向
                  [{ size: ["small", false, "large", "huge"] }], // 字体大小
                  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                  [{ font: [] }], // 字体种类
                  [{ align: [] }], // 对齐方式
                  ["clean"], // 清除文本格式
                  ["link", "image", "video"] // 链接、图片、视频
                ], //工具菜单栏配置
              },
              placeholder: '请在这里添加产品描述', //提示
              readyOnly: false, //是否只读
              theme: 'snow', //主题 snow/bubble
              syntax: true, //语法检测
            }
          }
        },
        methods: {
          // 失去焦点
          onEditorBlur(editor) {},
          // 获得焦点
          onEditorFocus(editor) {},
          // 开始
          onEditorReady(editor) {},
          // 值发生变化
          onEditorChange(editor) {
            this.content = editor.html;
            console.log(editor);
          },
        },
        computed: {
          editor() {
            return this.$refs.myTextEditor.quillEditor;
          }
        },
        mounted() {
          // console.log('this is my editor',this.editor);
        } 
      }
  </script>
汉化
汉化只需要更改toolbar工具栏中的样式即可实现

<style>
  .editor {
    line-height: normal !important;
    height: 800px;
  }
  .ql-snow .ql-tooltip[data-mode=link]::before {
    content: "请输入链接地址:";
  }
  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
      border-right: 0px;
      content: '保存';
      padding-right: 0px;
  }
 
  .ql-snow .ql-tooltip[data-mode=video]::before {
      content: "请输入视频地址:";
  }
 
  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .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';
  }
 
  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .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';
  }
 
  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .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: '等宽字体';
  }
  </style>


**实现以上配置后就可以看到效果如图：**
![在这里插入图片描述](https://img-blog.csdnimg.cn/5c639c61a144492d9e498efb2a73f3fc.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3OTQ2MDE3,size_16,color_FFFFFF,t_70#pic_center)



以上就是vue-quill-editor的基本配置了。

图片上传的配置
因为图片这块，大多情况下，我们都不需要base64格式的，所以我们需要将图片通过OSS换取网络路径然后发送给后端和回显

更换quill-editor的点击事件为自定义事件
这里借助element-ui的图片功能，因为其功能齐全，图片上传前，上传后，都有交互效果的处理，所以可以选择性使用

```javascript
 editorOption: {
      modules: {
          toolbar: {
              handlers: {
                  image: function(value) {
                      if (value) {
                          // 触发input框选择图片文件
                          document.querySelector(".avatar-uploader input").click();//自定义元素的点击事件
                      } else {
                          this.quill.format("image", false);
                      }
                  },
                      // link: function(value) {
                      //   if (value) {
                      //     var href = prompt('请输入url');
                      //     this.quill.format("link", href);
                      //   } else {
                      //     this.quill.format("link", false);
                      //   }
                      // },
              }
          }
      }
  },

而后在自定义的元素上写入点击事件，然后将该元素隐藏掉。点击quill-editor的图片上传时，实际点击了自定义的图片上传，而后在返回网络路径后将图片插入富文本编辑器即可。

插入返回的网络图片路径(这里借助的是element-ui)

uploadSuccess(res, file) {
        // res为图片服务器返回的数据
        // 获取富文本组件实例
        let quill = this.$refs.myQuillEditor.quill;
        // 如果上传成功
        if (res.code == 200) {
          // 获取光标所在位置
          let length = quill.getSelection().index;
          // 插入图片  res.url为服务器返回的图片地址
          quill.insertEmbed(length, "image", res.url);
          // 调整光标到最后
          quill.setSelection(length + 1);
        } else {
          this.$message.error("图片插入失败");
        }
        // loading动画消失
        this.quillUpdateImg = false;
      },

以上就是主要思路及代码，如果还是不懂就看下面vue组件的源码（也可直接使用，前提是下载了element-ui）

组件封装源码及引用

<template>
      <div>
          <!-- 图片上传组件辅助-->
        <el-upload
          class="avatar-uploader"
          :action="serverUrl"
          name="file"
          :headers="header"
          :show-file-list="false"
          list-type="picture"
          :multiple="false"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          :before-upload="beforeUpload">
        </el-upload>
 
        <quill-editor
        class="editor"
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
        @change="onEditorChange($event)">
        </quill-editor>
      </div>
  </template>
  <script>
  // 工具栏配置
  const toolbarOptions = [
    ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
    ["blockquote", "code-block"], // 引用  代码块
    [{ header: 1 }, { header: 2 }], // 1、2 级标题
    [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
    [{ script: "sub" }, { script: "super" }], // 上标/下标
    [{ indent: "-1" }, { indent: "+1" }], // 缩进
    // [{'direction': 'rtl'}],                         // 文本方向
    [{ size: ["small", false, "large", "huge"] }], // 字体大小
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
    [{ font: [] }], // 字体种类
    [{ align: [] }], // 对齐方式
    ["clean"], // 清除文本格式
    ["link", "image", "video"] // 链接、图片、视频
  ];
 
  import { quillEditor } from "vue-quill-editor";
  import "quill/dist/quill.core.css";
  import "quill/dist/quill.snow.css";
  import "quill/dist/quill.bubble.css";
 
  export default {
    props: {
      /*编辑器的内容*/
      value: {
        type: String
      },
      /*图片大小*/
      maxSize: {
        type: Number,
        default: 4000 //kb
      }
    },
 
    components: {
      quillEditor
    },
 
    data() {
      return {
        content: this.value,
        quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
        editorOption: {
          theme: "snow", // or 'bubble'
          placeholder: "您想说点什么？",
          modules: {
            toolbar: {
              container: toolbarOptions,
              // container: "#toolbar",
              handlers: {
                image: function(value) {
                  if (value) {
                    // 触发input框选择图片文件
                    document.querySelector(".avatar-uploader input").click();
                  } else {
                    this.quill.format("image", false);
                  }
                },
                // link: function(value) {
                //   if (value) {
                //     var href = prompt('请输入url');
                //     this.quill.format("link", href);
                //   } else {
                //     this.quill.format("link", false);
                //   }
                // },
              }
            }
          }
        },
        serverUrl: "https://testihospitalapi.ebaiyihui.com/oss/api/file/store/v1/saveFile", // 这里写你要上传的图片服务器地址
        header: {
          // token: sessionStorage.token
        } // 有的图片服务器要求请求头需要有token
      };
    },
 
    methods: {
      onEditorBlur() {
        //失去焦点事件
      },
      onEditorFocus() {
        //获得焦点事件
      },
      onEditorChange() {
        //内容改变事件
        this.$emit("input", this.content);
      },
 
      // 富文本图片上传前
      beforeUpload() {
        // 显示loading动画
        this.quillUpdateImg = true;
      },
 
      uploadSuccess(res, file) {
        // res为图片服务器返回的数据
        // 获取富文本组件实例
        let quill = this.$refs.myQuillEditor.quill;
        // 如果上传成功
        if (res.code == 200) {
          // 获取光标所在位置
          let length = quill.getSelection().index;
          // 插入图片  res.url为服务器返回的图片地址
          quill.insertEmbed(length, "image", res.result.url);
          // 调整光标到最后
          quill.setSelection(length + 1);
        } else {
          this.$message.error("图片插入失败");
        }
        // loading动画消失
        this.quillUpdateImg = false;
      },
      // 富文本图片上传失败
      uploadError() {
        // loading动画消失
        this.quillUpdateImg = false;
        this.$message.error("图片插入失败");
      }
    }
  };
  </script>
 
  <style>
  .editor {
    line-height: normal !important;
    height: 800px;
  }
  .ql-snow .ql-tooltip[data-mode=link]::before {
    content: "请输入链接地址:";
  }
  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
      border-right: 0px;
      content: '保存';
      padding-right: 0px;
  }
 
  .ql-snow .ql-tooltip[data-mode=video]::before {
      content: "请输入视频地址:";
  }
 
  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .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';
  }
 
  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .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';
  }
 
  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .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: '等宽字体';
  }
  </style>
**引入：**
  <template>
    <Editor v-model="article.content"/>
  </template>
  <script>
  import Editor from './quillEditor'
  export default {
    components: {
      Editor
    },
    data() {
      return {
        article: {
          content: '',
        }
      }
    }
  }
  </script>
  <style>
 
  </style>
 

## VUE组件封装

<template>
  <quill-editor
    class="editor"
    ref="myTextEditor"
    v-model="content"
    :options="editorOption"
    @change="onEditorChange($event)"
  ></quill-editor>
</template>

<script>
const toolbar = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
  ["blockquote", "code-block"], // 引用  代码块
  [{ header: 1 }, { header: 2 }], // 1、2 级标题
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
  //   [{ script: "sub" }, { script: "super" }], // 上标/下标
  //   [{ indent: "-1" }, { indent: "+1" }], // 缩进
  // [{'direction': 'rtl'}],                         // 文本方向
  [{ size: ["small", false, "large", "huge"] }], // 字体大小
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
  [{ font: [] }], // 字体种类
  [{ align: [] }], // 对齐方式
  ["clean"], // 清除文本格式
  ["link", "image", "video"] // 链接、图片、视频
]; //工具菜单栏配置
export default {
  data() {
    return {
      content: null, //内容
      editorOption: {
        modules: {
          toolbar
        },
        placeholder: "", //提示
        readyOnly: false, //是否只读
        theme: "snow", //主题 snow/bubble
        syntax: true //语法检测
      }
    };
  },
  methods: {
    // 值发生变化
    onEditorChange(editor) {
      this.content = editor.html;
      this.$emit("content", editor.html);
    }
  }
};
</script>

<style>
.editor {
  line-height: normal !important;
  height: 800px;
  margin-bottom: 30px;
}
.ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: "保存";
  padding-right: 0px;
}

.ql-snow .ql-tooltip[data-mode="video"]::before {
  content: "请输入视频地址:";
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.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";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.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";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.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: "等宽字体";
}
</style>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vue

vue富文本编辑器组件封装的相关文章

Linux 下使用命令行查看PDF

使用 evince命令查看 evince frames pdf

随机推荐

低通、高通、带通、阻通滤波器

目录低通高通带通阻通滤波器低通高通带通带阻滤波器的区别通俗理解 1 低通滤波器 2 高通滤波器 3 带通滤波器 4 带阻滤波器 5 全通滤波器低通高通带通阻通滤波器低通高通带通带阻滤波器的区别低通滤波器
STM32系列(HAL库)——F103C8T6通过NRF24L01（2.4G）无线模块进行双机通信

本文参考 STM32L051C8T6 HAL库 nRF24L01 收发案例硬件SPI通讯 1 软件准备 1 编程平台 Keil5 2 CubeMX 3 XCOM 串口调试助手 2 硬件准备 2套 1 F1的板子本例使用经典F103C8T
ROS开发日记（1）——ROS基础知识

ROS 即开源机器人操作系统 1 官方定义 ROS是面向机器人的开源的元操作系统 meta operating system 1 它能够提供类似传统操作系统的诸多功能如硬件抽象底层设备控制常用功能实现进程间消息传递和程序包管理等此
java实现信息的增删改查功能的网页设计（1）

仅供参考不可转载如遇其他情况概不负责后果自负切记该项目运用的技术 spring springMVC ibatis 本网页只有一个页面包过信息的增删改查功能只有部分代码仅供参考因该项目比较大所以仅提供了一个页面内的增
命名时取代基优先顺序_有机物命名：常见官能团的优先次序表

一官能团的优先次序常见官能团的优先次序表类别序号官能团词头名称词尾名称酸1 COOH羧基羧酸 2 SO3H磺基磺酸羧酸衍生物3 COOR酯基羧酸酯 4 COX卤羰基酰卤 5 CONH2氨甲酰基酰胺腈6 CN氰基腈醛7
MySQL——JDBC

文章目录 1 数据库驱动 2 JDBC 3 第一个JDBC程序 4 步骤总结 5 JDBC对象解释 6 写工具类 7 JDBC操作事务 7 1 创建表 7 2 事务 7 3 总结 8 数据库连接池 8 1 DBCP 8 2 c3p0 1 数
从游戏脚本语言说起，剖析Mono所搭建的脚本基础

从游戏脚本语言说起剖析Mono所搭建的脚本基础 0x00 前言在日常的工作中我偶尔能遇到这样的问题为何游戏脚本在现在的游戏开发中变得不可或缺那么这周我就写篇文章从游戏脚本聊起分析一下游戏脚本因何出现而mono又能提供怎样的脚本
系统开发（上）-软件设计（三十二）

信息系统安全对称加密软件设计三十一 https blog csdn net ke1ying article details 129678350 瀑布模型SDLC 是结构化的开发步奏软件计划 gt 需求分析 gt 软件设计 gt 程
【信号去噪】基于变分贝叶斯卡尔曼滤波器实现信号去噪附matlab代码

作者简介热爱科研的Matlab仿真开发者修心和技术同步精进 matlab项目合作可私信个人主页 Matlab科研工作室个人信条格物致知更多Matlab仿真内容点击智能优化算法神经网络预测雷达通信无线传感器电力系统信号
Java使用get请求接收List集合数据(json)并导出报表

Java使用get请求接收List集合数据 json 并导出报表文章目录 Java使用get请求接收List集合数据 json 并导出报表前言一实现分析二 Maven依赖基于EasyExcel实现三后台代码四使用Post
深度学习（4）：基于深层卷积网络实现车牌识别

目的基于深层卷积神经网络结合CTC损失函数对车牌进行识别通过对车牌数据集进行训练获得识别模型并验证模型性能和将模型进行应用一原理了解深层卷积神经网络构建方法和基本原理熟悉目标识别相关算法的常规训练流程掌握CTC损失函数的基本
【工具分享】配置淘宝镜像

配置淘宝镜像淘宝镜像地址 https registry npmmirror com 命令行配置 npm config set registry https registry npmmirror com 使用 nrm 配置使用 npm 全
java 断言 assert 详解：断言开启、断言使用

java中的断言Assert的使用一背景二如何判断是否开启了断言三开启断言四断言的使用方法一 assert
unity 3D 自学笔记

刚开始创建一个正方体窗口布局恢复默认窗口场景默认场景中只有一个主摄像机和平行光源 3D物体 Duplicate 复制 Delete 删除 3D视图导航器 Gizmo 表示世界坐标的方向栅格 Grid 表示XZ坐标平面天空盒
oracle 查询本年12月,Oracle查询1-12月数据

模拟数据表 create table TB id int time datetime count int 添加模拟数据 insert TB select 1 2012 12 01 02 00 00 42 union all select 1
神经网络：Epoch、Batch Size和迭代

Epoch Batch Size和迭代深度学习模型离不开这3个术语下面我们来了解下它们的区别和联系背景知识梯度下降分三点 1 直观理解 2 梯度下降怎么做 3 梯度下降有啥用 1 直观理解梯度下降其实它没啥就是让计算机不断猜最
Java 中正则表达式的详解

博主前些天发现了一个巨牛的人工智能学习网站通俗易懂风趣幽默忍不住也分享一下给大家点击跳转到网站前言 Java提供正则表达式技术专门用于处理文本问题简单的说正则表达式 regular expression 是对字符串执行模式匹
cpu,内存条，硬盘，显卡，主板，显示器之间的关系

cpu不能直接处理硬盘上的数据操作系统将硬盘上的数据传输到内存条上 cpu再处理内存条上的数据如果是图像则通过显卡在显示器上输出如果是声音数据则被发送到声卡 cpu 内存条硬盘显卡都是插在主板上的这几个都是通过主板将其组织起来
ERROR in ./src/vue/login.vue?vue&type=template&id=28b333d2& 2:0 Module parse failed: Unexpected toke

简单 https blog csdn net qq 25835645 article details 83473078 通俗易懂清晰 https blog csdn net cominglately article details 805
vue富文本编辑器组件封装

Vue Quill Editor vue quill editor基本配置 gt npm install vue quill editor s main js中引入 import VueQuillEditor from vue quill

vue富文本编辑器 组件封装

Vue-Quill-Editor

vue富文本编辑器 组件封装 的相关文章

随机推荐

热门标签

vue富文本编辑器组件封装

vue富文本编辑器组件封装的相关文章