qull富文本编辑器实现文本标注颜色
示例版本
"quill": "^1.3.7",
引入插件
import Quill from 'quill'
import 'quill/dist/quill.snow.css'
绑定dom
<div class="main-text" ref="editor" :content="content" v-if="textContent.ainsContent"> <!-- 循环段落 --> <p v-for="(item, index) in textContent.ainsContent.parag" :key="index" class="parag"> <!-- 循环句子 --> <span class="sent" :parag="item[0]" :sent="sent[0]" v-for="(sent, sentIndex) in handleSent(item)" :key="sentIndex" >{{ sent[1] }}</span > </p> </div>
初始化编辑器
data() {
return {
content: '<p>example content</p>',
editorOption: {
placeholder: '暂无数据'
},
qull:null
}
}
//初始化编辑器 quillInit() { let dom = this.$refs.editor this.quill = new Quill(dom, this.editorOption) this.quill.enable(false)//禁用编辑 this.setFontColor(0, this.quill.getLength(), '#ffffff', '#000') },
获取选中
selectionContent() { let range = this.quill.getSelection() let text, start, length, end if (!range) { return {text, start, length, end} } text = this.quill.getText(range.index, range.length) start = range.index length = range.length end = start + length - 1 return { text, start, length, end } },
设置背景色
setFontColor(start, length, bgColor, color, uuid) { this.quill.formatText(start, length, { background: `${bgColor || ''}`, color: color || '' }) },
自定义设置dom
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { quillEditor } from 'vue-quill-editor';
var Quill = require('quill/dist/quill.js');
const Inline = Quill.import('blots/inline');
class format extends Inline {
static create(cc) {
const node = super.create();
node.setAttribute('class', cc);
node.style.color = 'red';
console.log(cc);
return node;
}
static formats(node) {
console.log('dhkjahdk');
return node;
}
}
format.blotName = 'format';
format.tagName = 'span';
Quill.register(formatParam);
this.editor.format('format', new Date().getTime()); // 全文格式化
this.editor.formatText(
开始下标,
lengtj,
'format',
new Date().getTime()
); //指定下标格式化
示例2:
// 引入源码中的BlockEmbed const BlockEmbed = Quill.import('blots/block/embed') // 定义新的blot类型 class AppPanelEmbed extends BlockEmbed { static create(value) { const node = super.create(value) node.setAttribute('contenteditable', 'false') node.setAttribute('width', '100%') // 设置自定义html node.innerHTML = this.transformValue(value) return node } static transformValue(value) { let handleArr = value.split('\n') handleArr = handleArr.map(e => e.replace(/^[\s]+/, '').replace(/[\s]+$/, '')) return handleArr.join('') } // 返回节点自身的value值 用于撤销操作 static value(node) { return node.innerHTML } } // blotName AppPanelEmbed.blotName = 'AppPanelEmbed' // class名将用于匹配blot名称 AppPanelEmbed.className = 'embed-innerApp' // 标签类型自定义 AppPanelEmbed.tagName = 'div' Quill.register(AppPanelEmbed, true)
插入示例
this.quill.insertEmbed(200, 'AppPanelEmbed', Dom.innerHTML)
本文作者:混名汪小星
本文链接:https://www.cnblogs.com/wxyblog/p/16165096.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步