vue富文本编辑器移入提示信息

周不凢

已于 2023-07-20 15:54:28 修改

阅读量1.3k

点赞数 1

分类专栏： VUE 文章标签： vue.js 前端

于 2020-06-24 11:58:12 首次发布

本文链接：https://blog.csdn.net/qq_39047060/article/details/106941257

版权

VUE 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

将每个按钮的对应class拾取出来进行提示语循环增加title

const titleConfig=[
  {Choice:'.ql-bold',title:'加粗'},
  {Choice:'.ql-italic',title:'斜体'},
  {Choice:'.ql-underline',title:'下划线'},
  {Choice:'.ql-header',title:'段落格式'},
  {Choice:'.ql-strike',title:'删除线'},
  {Choice:'.ql-blockquote',title:'块引用'},
  {Choice:'.ql-code',title:'插入代码'},
  {Choice:'.ql-code-block',title:'插入代码段'},
  {Choice:'.ql-font',title:'字体'},
  {Choice:'.ql-size',title:'字体大小'},
  {Choice:'.ql-list[value="ordered"]',title:'编号列表'},
  {Choice:'.ql-list[value="bullet"]',title:'项目列表'},
  {Choice:'.ql-direction',title:'文本方向'},
  {Choice:'.ql-header[value="1"]',title:'h1标题'},
  {Choice:'.ql-header[value="2"]',title:'h2标题'},
  {Choice:'.ql-align',title:'对齐方式'},
  {Choice:'.ql-color',title:'字体颜色'},
  {Choice:'.ql-background',title:'背景颜色'},
  {Choice:'.ql-image',title:'图像'},
  {Choice:'.ql-video',title:'视频'},
  {Choice:'.ql-link',title:'添加链接'},
  {Choice:'.ql-formula',title:'插入公式'},
  {Choice:'.ql-clean',title:'清除字体格式'},
  {Choice:'.ql-script[value="sub"]',title:'下标'},
  {Choice:'.ql-script[value="super"]',title:'上标'},
  {Choice:'.ql-indent[value="-1"]',title:'向左缩进'},
  {Choice:'.ql-indent[value="+1"]',title:'向右缩进'},
  {Choice:'.ql-header .ql-picker-label',title:'标题大小'},
  {Choice:'.ql-header .ql-picker-item[data-value="1"]',title:'标题一'},
  {Choice:'.ql-header .ql-picker-item[data-value="2"]',title:'标题二'},
  {Choice:'.ql-header .ql-picker-item[data-value="3"]',title:'标题三'},
  {Choice:'.ql-header .ql-picker-item[data-value="4"]',title:'标题四'},
  {Choice:'.ql-header .ql-picker-item[data-value="5"]',title:'标题五'},
  {Choice:'.ql-header .ql-picker-item[data-value="6"]',title:'标题六'},
  {Choice:'.ql-header .ql-picker-item:last-child',title:'标准'},
  {Choice:'.ql-size .ql-picker-item[data-value="small"]',title:'小号'},
  {Choice:'.ql-size .ql-picker-item[data-value="large"]',title:'大号'},
  {Choice:'.ql-size .ql-picker-item[data-value="huge"]',title:'超大号'},
  {Choice:'.ql-size .ql-picker-item:nth-child(2)',title:'标准'},
  {Choice:'.ql-align .ql-picker-item:first-child',title:'居左对齐'},
  {Choice:'.ql-align .ql-picker-item[data-value="center"]',title:'居中对齐'},
  {Choice:'.ql-align .ql-picker-item[data-value="right"]',title:'居右对齐'},
  {Choice:'.ql-align .ql-picker-item[data-value="justify"]',title:'两端对齐'}
];

//提示信息
    addQuillTitle() {
      document.getElementsByClassName('ql-editor')[0].dataset.placeholder=''
            for(let item of titleConfig){
                let tip = document.querySelector('.quill-editor '+ item.Choice)
                if (!tip) continue
                tip.setAttribute('title',item.title)
            }
    },

以下代码运行会错误，只做参考还需结合自己代码

<!--富文本编辑器-->
<el-form-item label="活动介绍" prop="activityIntroduction">
  <div class="editorContainer ql-editor eapeditor">
	  <quill-editor v-model.trim="activeReleaseForm.activityIntroduction" ref="myQuillEditor"
	  :defaultMsg="defaultMsg"
	  :options="editorOption"
	  class="editor" id="editor"
		  @change="onEditorChange($event)">
	  </quill-editor>
	  <div class="el-form-item__error" v-if="SizeLnegth>5000">内容不能为空，最多5000个字！</div>
	  <span style="position:absolute;right:0">
		<span :class="{'colorRed':SizeLnegth>=5000}">{{SizeLnegth}}</span>/<span style="color:#cc0000">5000</span>
	  </span>
  </div>
</el-form-item>
import { quillEditor } from "vue-quill-editor"; //富文本编辑器
const titleConfig=[
  {Choice:'.ql-bold',title:'加粗'},
  {Choice:'.ql-italic',title:'斜体'},
  {Choice:'.ql-underline',title:'下划线'},
  {Choice:'.ql-header',title:'段落格式'},
  {Choice:'.ql-strike',title:'删除线'},
  {Choice:'.ql-blockquote',title:'块引用'},
  {Choice:'.ql-code',title:'插入代码'},
  {Choice:'.ql-code-block',title:'插入代码段'},
  {Choice:'.ql-font',title:'字体'},
  {Choice:'.ql-size',title:'字体大小'},
  {Choice:'.ql-list[value="ordered"]',title:'编号列表'},
  {Choice:'.ql-list[value="bullet"]',title:'项目列表'},
  {Choice:'.ql-direction',title:'文本方向'},
  {Choice:'.ql-header[value="1"]',title:'h1标题'},
  {Choice:'.ql-header[value="2"]',title:'h2标题'},
  {Choice:'.ql-align',title:'对齐方式'},
  {Choice:'.ql-color',title:'字体颜色'},
  {Choice:'.ql-background',title:'背景颜色'},
  {Choice:'.ql-image',title:'图像'},
  {Choice:'.ql-video',title:'视频'},
  {Choice:'.ql-link',title:'添加链接'},
  {Choice:'.ql-formula',title:'插入公式'},
  {Choice:'.ql-clean',title:'清除字体格式'},
  {Choice:'.ql-script[value="sub"]',title:'下标'},
  {Choice:'.ql-script[value="super"]',title:'上标'},
  {Choice:'.ql-indent[value="-1"]',title:'向左缩进'},
  {Choice:'.ql-indent[value="+1"]',title:'向右缩进'},
  {Choice:'.ql-header .ql-picker-label',title:'标题大小'},
  {Choice:'.ql-header .ql-picker-item[data-value="1"]',title:'标题一'},
  {Choice:'.ql-header .ql-picker-item[data-value="2"]',title:'标题二'},
  {Choice:'.ql-header .ql-picker-item[data-value="3"]',title:'标题三'},
  {Choice:'.ql-header .ql-picker-item[data-value="4"]',title:'标题四'},
  {Choice:'.ql-header .ql-picker-item[data-value="5"]',title:'标题五'},
  {Choice:'.ql-header .ql-picker-item[data-value="6"]',title:'标题六'},
  {Choice:'.ql-header .ql-picker-item:last-child',title:'标准'},
  {Choice:'.ql-size .ql-picker-item[data-value="small"]',title:'小号'},
  {Choice:'.ql-size .ql-picker-item[data-value="large"]',title:'大号'},
  {Choice:'.ql-size .ql-picker-item[data-value="huge"]',title:'超大号'},
  {Choice:'.ql-size .ql-picker-item:nth-child(2)',title:'标准'},
  {Choice:'.ql-align .ql-picker-item:first-child',title:'居左对齐'},
  {Choice:'.ql-align .ql-picker-item[data-value="center"]',title:'居中对齐'},
  {Choice:'.ql-align .ql-picker-item[data-value="right"]',title:'居右对齐'},
  {Choice:'.ql-align .ql-picker-item[data-value="justify"]',title:'两端对齐'}
];
mounted() {
    this.addQuillTitle();
 document.getElementById("editor").children[1].children[0].setAttribute("dataplaceholder", "请输入活动介绍");
},
computed: {
  editor() {
    return this.$refs.myQuillEditor.quill;
  },
},
methods: {
    // 富文本编辑器的change事件
    onEditorChange(e) {
	    e.editor.deleteText(5000, 4);
	    if (this.activeReleaseForm.activityIntroduction === "") {
	      this.SizeLnegth = 0;
	    } else {
	  this.SizeLnegth = e.editor.getLength() - 1;
	    }
    },
    //提示信息
    addQuillTitle() {
      document.getElementsByClassName('ql-editor')[0].dataset.placeholder=''
            for(let item of titleConfig){
                let tip = document.querySelector('.quill-editor '+ item.Choice)
                if (!tip) continue
                tip.setAttribute('title',item.title)
            }
    },
},

周不凢

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
vue富文本编辑器移入提示信息

const titleConfig=[ {Choice:'.ql-bold',title:'加粗'}, {Choice:'.ql-italic',title:'斜体'}, {Choice:'.ql-underline',title:'下划线'}, {Choice:'.ql-header',title:'段落格式'}, {Choice:'.ql-strike',title:'删除线'}, {Choice:'.ql-blockquote',title:'块引用'}, {Cho...
复制链接

扫一扫

专栏目录