思享工具箱

vue-quill-editor 封装成组件；图片文件流上传；同一页面多个编辑器样式异常解决办法

摘要：
使用方法：引入并注册组件，然后直接使用；@getcode是同步获取编辑器内容的；:contentDefault是编辑器的默认内容；注意：如果同一个页面多个编辑器，参数id不能相同，否则只有第一个编辑器有样式；封装组件：工具栏可以自己添加配置，看自己项目需求小常规大特大˂!

vue-quill-editor 封装成组件；图片文件流上传；同一页面多个编辑器样式异常解决办法第1张

使用方法：

引入并注册组件，然后直接使用；

@getcode是同步获取编辑器内容的；:contentDefault是编辑器的默认内容；

注意：如果同一个页面多个编辑器，参数id不能相同，否则只有第一个编辑器有样式；

vue-quill-editor 封装成组件；图片文件流上传；同一页面多个编辑器样式异常解决办法第2张

封装组件：

工具栏可以自己添加配置，看自己项目需求

<template>
  <div class="quill_box">
    <quill-editor
      v-model="content"
      ref="myTextEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    >
      <div :id="id"slot="toolbar">
        <select class="ql-size">
          <option value="small">小</option>
          <option selected>常规</option>
          <option value="large">大</option>
          <option value="huge">特大</option>
        </select>
        <!--Add subscript and superscript buttons -->
        <span class="ql-formats">
          <button type="button"class="ql-bold"></button>
        </span>
        <span class="ql-formats">
          <select class="ql-color">
            <option selected="selected"></option>
            <option value="#e60000"></option>
            <option value="#ff9900"></option>
            <option value="#ffff00"></option>
            <option value="#008a00"></option>
            <option value="#0066cc"></option>
            <option value="#9933ff"></option>
            <option value="#ffffff"></option>
            <option value="#facccc"></option>
            <option value="#ffebcc"></option>
            <option value="#ffffcc"></option>
            <option value="#cce8cc"></option>
            <option value="#cce0f5"></option>
            <option value="#ebd6ff"></option>
            <option value="#bbbbbb"></option>
            <option value="#f06666"></option>
            <option value="#ffc266"></option>
            <option value="#ffff66"></option>
            <option value="#66b966"></option>
            <option value="#66a3e0"></option>
            <option value="#c285ff"></option>
            <option value="#888888"></option>
            <option value="#a10000"></option>
            <option value="#b26b00"></option>
            <option value="#b2b200"></option>
            <option value="#006100"></option>
            <option value="#0047b2"></option>
            <option value="#6b24b2"></option>
            <option value="#444444"></option>
            <option value="#5c0000"></option>
            <option value="#663d00"></option>
            <option value="#666600"></option>
            <option value="#003700"></option>
            <option value="#002966"></option>
            <option value="#3d1466"></option>
          </select>
        </span>
        <span class="ql-formats">
          <select class="ql-background">
            <option value="#000000"></option>
            <option value="#e60000"></option>
            <option value="#ff9900"></option>
            <option value="#ffff00"></option>
            <option value="#008a00"></option>
            <option value="#0066cc"></option>
            <option value="#9933ff"></option>
            <option selected="selected"></option>
            <option value="#facccc"></option>
            <option value="#ffebcc"></option>
            <option value="#ffffcc"></option>
            <option value="#cce8cc"></option>
            <option value="#cce0f5"></option>
            <option value="#ebd6ff"></option>
            <option value="#bbbbbb"></option>
            <option value="#f06666"></option>
            <option value="#ffc266"></option>
            <option value="#ffff66"></option>
            <option value="#66b966"></option>
            <option value="#66a3e0"></option>
            <option value="#c285ff"></option>
            <option value="#888888"></option>
            <option value="#a10000"></option>
            <option value="#b26b00"></option>
            <option value="#b2b200"></option>
            <option value="#006100"></option>
            <option value="#0047b2"></option>
            <option value="#6b24b2"></option>
            <option value="#444444"></option>
            <option value="#5c0000"></option>
            <option value="#663d00"></option>
            <option value="#666600"></option>
            <option value="#003700"></option>
            <option value="#002966"></option>
            <option value="#3d1466"></option>
          </select>
        </span>
        <span class="ql-formats">
          <button type="button"class="ql-italic"></button>
        </span>
        <span class="ql-formats">
          <button type="button"class="ql-underline"></button>
        </span>
        <span class="ql-formats">
          <button type="button"class="ql-strike"></button>
        </span>
        <span class="ql-formats">
          <button type="button"class="ql-blockquote"></button>
        </span>
        <span class="ql-formats">
          <button type="button"class="ql-list"value="ordered"></button>
        </span>
        <span class="ql-formats">
          <button type="button"class="ql-list"value="bullet"></button>
        </span>
        <span class="ql-formats">
          <button type="button"class="ql-link"></button>
        </span>
        <span class="ql-formats">
          <button type="button"@click="imgClick"style="outline:none">
            <svg viewBox="0 0 18 18">
              <rect class="ql-stroke"height="10"width="12"x="3"y="4" />
              <circle class="ql-fill"cx="6"cy="7"r="1" />
              <polyline class="ql-even ql-fill"points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12" />
            </svg>
          </button>
        </span>
      </div>
    </quill-editor>
  </div>
</template> 
<script>
import Vue from "vue";
import { imgUpload } from "../../http/api";
//富文本编辑器
import VueQuillEditor from "vue-quill-editor";
//require styles 引入样式
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
Vue.use(VueQuillEditor);
export default{
  data() {
    let _this = this;
    return{
      content: "",
      editorOption: {
        placeholder: "请在此处编辑富文本",
        modules: {
          toolbar: '#'+_this.id
        }
      }
    };
  },
  computed: {
    editor() {
      return this.$refs.myTextEditor.quill;
    }
  },
  props: {
    id:'',
    //默认内容
contentDefault: {
      type: String,
      default: ""
    },
    /*上传图片的地址*/
    uploadUrl: {
      type: String,
      default: "/"
    },
    /*上传图片的file控件name*/
    fileName: {
      type: String,
      default: "file"
    }
  },
  watch: {
    contentDefault: function() {
      this.content = this.contentDefault;
    }
  },
  mounted: function() {
    this.content = this.contentDefault;
  },
  methods: {
    onEditorBlur() {
      //失去焦点事件
      //console.log('失去焦点');
},
    onEditorFocus() {
      //获得焦点事件
      //console.log('获得焦点事件');
},
    onEditorChange() {
      //内容改变事件
      //console.log('内容改变事件');
      this.$emit("getcode", this.content);
    },
    /*点击上传图片按钮*/
    imgClick() {
      //if (this.uploadUrl=='/') {
      //console.log('no editor uploadUrl');
      //return;
      //};
      /*内存创建input file*/
      varinput =document.createElement("input");
      input.type = "file";
      input.name = this.fileName;
      input.accept = "image/jpeg,image/png,image/jpg,image/gif";
      input.onchange = this.onFileChange;
      input.click();
    },
    /*选择上传图片切换*/
    onFileChange(e) {
      varfileInput =e.target;
      if(fileInput.files.length === 0) {
        return;
      }
      this.editor.focus();
      if(fileInput.files[0].size > 1024 * 1024 * 2) {
        this.$message.error("图片不能大于2M", "图片尺寸过大");
      }
      this.uploadFilePic(fileInput.files[0]);
    },
    //上传图片到服务器
uploadFilePic: function(imgSource) {
      console.log(imgSource);
      let formData = newFormData();
      formData.append("imageFile", imgSource);
      console.log(formData);
      imgUpload(formData)
        .then(res =>{
          console.log(res);
          //获取光标所在位置
let length = this.editor.getSelection().index;
            this.editor.insertEmbed(length, 'image',res.response.fileUrl);
            //调整光标到最后
            this.editor.setSelection(length + 1)
        })
        .catch(err =>{
          console.log(err);
        });
    }
  }
};
</script> 
<style lang="less">
.quill_box {
  select{outline:none;}
  .ql-toolbar.ql-snow {
    border-color:#dcdfe6;
  }
  .ql-container {
    height:200px !important;
    border-color:#dcdfe6;
  }
  .ql-snow .ql-color-picker .ql-picker-label svg,
  .ql-snow .ql-icon-picker .ql-picker-label svg {
    position:relative;
    top:-6px;
  }
  .ql-color{padding-top:3px;}
  .ql-background{padding-top:2px;}
  .ql-size{height:30px;line-height:30px;}
}
</style>

标签：#按钮#editor#formdata | 浏览：247 | 发布日期：

免责声明：文章转载自《vue-quill-editor 封装成组件；图片文件流上传；同一页面多个编辑器样式异常解决办法》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇1、SpringMVC+MyBaits实现查询所有spotless-maven-plugin java代码自动格式化mvn spotless:apply -fn下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

Spyder——科学的Python开发环境

刚开始接触Python的时候，网上找到的资料基本上上来就是介绍Python语言，很少有对开发环境进行讲解的，但如果在学习的过程中不断练习，这样效率会更高，所以特意将一个Python的开发环境Spyder自带的入门教程翻译出来，希望可以帮助到和我有同样困惑的你。 个人水平有限，会有翻译不到位的地方，欢迎批评指正！ Spyder是使用Python编程语言进行科...

WPF 纯代码生成界面（不使用XAML）

    对于编写 WPF 应用程序，只是用代码进行开发而不使用任何 XAML 不是常见的方式（但是仍然完全支持）。只使用代码进行开发的明显缺点是，有可能会使用编写 WPF 应用程序成为极端乏味的工作。 WPF 控件没有包含参数化的构造函数，因此即使为窗体添加一个简单的按钮也需要编写几行代码。只使用代码进行开发的一个潜在的优点是可以随意定制应用程序。例如，可...

layui监听工具栏（操作列表按钮）

<table lay-filter="test"></table> <script type="text/html" id="barDemo"> <a lay-event="edit">查看详情</a></script> layui.use('table', function() {...

winform子窗口调用父窗口的控件及方法-一般调用

首先新建一个窗体应用程序，在项目属性中点击右键->添加->添加新项，选择Windows窗体->添加。  在Form1和Form2窗口中各添加一个按钮，并双击添加事件处理函数：     父窗口Form1的按钮处理函数，打开子窗口Form2，另外定义一个显示消息框的方法供子窗口调用（定义为public才能被调用）： 注意：弹出窗体2的代...

屏蔽微信内置底部前进后退按钮（很迫切的需求）

在使用window.location.href进行页面跳转或者react内部项目使用 this.props.history.push进行页面跳转时，做好的h5页面放在微信里，底部会出选前进后退的按钮，如下图： 废话不多说，解决问题： 第一种情况：如果只是页面之间跳转，使用window.location.replace 代替window.location.h...

JS实现刷新iframe的方法

<iframe src="http://t.zoukankan.com/1.htm" name="ifrmname" id="ifrmid"></iframe> 方案一:用iframe的name属性定位 <input type="button" name="Button" value="Button"onclick="docu...

最新文章

随机推荐

思享工具箱导航