js 去除Quill富文本编辑器的首尾空行,空格

js中把Quill富文本编辑器的首尾空行,空格去掉

function format_rich_text__br(rich_text) {
    let reg = /<p><br><\/p>/gim;
    let t = [];
    let arr = [];
    while (t = reg.exec(rich_text)) {
        arr.push(t.index)
    }
    let start = 0;
    let end = rich_text.length;
    let m = 11;//空行的标签字符长度
    for (var n = 0;n < arr.length;n++) {
        if (arr[n] == n * m) {
            start = (n + 1) * m
        }
    }
    for (var n = arr.length;n > 0;n--) {
        if (arr[n - 1] == rich_text.length - ((arr.length - (n - 1)) * m)) {
            end = arr[n - 1]
        }
    }
    //若只有空行则直接 return text.slice(start, end)
    return rich_text.slice(start, end);
}

若空行中还有其他标签,比如添加了加粗,斜体等字体样式,还需继续处理,在removeBlankSpace函数中继续处理
如果有加粗样式设置的话,标签中会多出span标签和含有‘cursor’字符的属性,所以用span标签和cursor进行判断,

let empty = text.slice(start, end);
let other = empty.split('</p>').filter(item=>item !== '');
let html = '';
let array= [];
other.forEach((item,i)=>{
	if(i == 0 || i == other.length-1){
		if(item.indexOf('</span>') ==-1 || (item.indexOf('</span>') !==-1 && item.indexOf('cursor') ==-1)){
				arr.push(item);
			}
		}else{
			if(item.indexOf('br')==-1) arr.push(item);
		}
})
array.forEach(item=>{
	html += item + '</p>';
})
return html;

注:不能直接用‘></span>’去判断,因为富文本框中会默认生成一个字符,巨坑!!!!!所以要搭配到字符cursor一起判断
![在这里插入图片描述](https://img-blog.csdnimg.cn/4eb4895cca1d40cf83fecac4fa11411c.png
富文本编辑器中还可以添加很多样式,具体情况具体分析~

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Quill 是一个基于浏览器的富文本编辑器,它提供了一种简单、灵活、强大的方式来创建和编辑富文本内容。下面是 Quill 富文本编辑器的使用教程: 1. 引入 Quill 库 首先,在你的 HTML 文件中引入 Quill 库: ```html <script src="//cdn.quilljs.com/1.3.6/quill.js"></script> <link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"> ``` 2. 创建 Quill 实例 在页面中创建一个空的 div 元素,用于 Quill 编辑器的容器: ```html <div id="editor"></div> ``` 然后,在 JavaScript 中创建一个 Quill 实例: ```javascript var quill = new Quill('#editor', { theme: 'snow' // 使用 snow 主题 }); ``` 3. 添加编辑器内容 在 Quill 编辑器中添加内容可以通过 `setContents` 方法或 `setText` 方法实现。 ```javascript // 使用 setContents 方法添加内容 quill.setContents([ { insert: 'Hello World!' } ]); // 使用 setText 方法添加内容 quill.setText('Hello World!'); ``` 4. 监听编辑器内容变化 如果你需要在内容变化时执行一些操作,可以监听 `text-change` 事件: ```javascript quill.on('text-change', function(delta, oldDelta, source) { console.log('内容已经变化'); }); ``` 5. 获取编辑器内容 你可以使用 `getContents` 方法获取 Quill 编辑器中的内容: ```javascript var content = quill.getContents(); console.log(content); ``` 6. 获取编辑器纯文本内容 你可以使用 `getText` 方法获取 Quill 编辑器中的纯文本内容: ```javascript var text = quill.getText(); console.log(text); ``` 7. 自定义编辑器样式 你可以通过修改 CSS 样式来自定义编辑器的样式,Quill 提供了许多 CSS 类名,用于定制不同的编辑器元素。 例如,你可以修改编辑器的背景颜色: ```css .ql-editor { background-color: #f5f5f5; } ``` 以上就是 Quill 富文本编辑器的使用教程,希望能对你有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值