富文本编辑器...quill 的使用放...
移动端 quill 时候用的 是 div 而不是 textarea....
引入 dom
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
js..注意要重写图片预览方法!!..如果不重写的话,会使用默认的base64 来处理..那样会造成文本太长!!!
//初始化富文本..
var quill = new Quill('#introduce', {
theme: 'snow',
modules: {
toolbar: [
[{header: [1, 2, 3, false]}],
['bold', 'italic', 'underline'],
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'align': []}],
[{'font': []}],
[{'color': []}, {'background': []}],
['image', 'video']
]
}
});
//重写编辑器的图片预览方法
var toolbar = quill.getModule('toolbar');
toolbar.addHandler('image', function () {
var fileInput = this.container.querySelector('input.ql-image[type=file]');
if (fileInput == null) {
fileInput = document.createElement('input');
fileInput.setAttribute('type', 'file');
fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
fileInput.classList.add('ql-image');
fileInput.addEventListener('change', function () {
if (fileInput.files != null && fileInput.files[0] != null) {
var formData = new FormData();
formData.append('file', fileInput.files[0]);
$.ajax({
url: '/home/upload/uploadFormImg',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false
}).done(function (res) {
//你的图片上传成功后的返回值...所以格式由你来定!
console.log(res);
var range = quill.getSelection(true);
quill.insertEmbed(range.index, 'image', res.data[0]);
quill.setSelection(range.index + 1);
}).fail(function (res) {
});
}
});
this.container.appendChild(fileInput);
}
fileInput.click();
});
quill.on('text-change', function (delta, oldDelta, source) {
//监听文本变化..将值赋给 vue 的shop 对象...
/* if (source == 'api') {
console.log("An API call triggered this change.");
} else if (source == 'user') { }*/
t.shop.introduce = quill.container.firstChild.innerHTML;
});
富文本编辑器...quill 的使用放...的更多相关文章
- 现代富文本编辑器Quill的内容渲染机制
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...
- 富文本编辑器Quill(一)简单介绍
Quill是一个很流行的富文本编辑器,github上star大约21k: github:https://github.com/quilljs/quill/ 官网: https://quilljs.co ...
- 现代富文本编辑器Quill的模块化机制
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...
- 富文本编辑器Quill(二)上传图片与视频
image与video在Quill formats中属于Embeds,要在富文本中插入图片或者视频需要使用insertEmbed api. insertEmbed insertEmbed(index: ...
- 富文本编辑器Quill的使用
我们经常需要使用富文本编辑器从后台管理系统上传文字,图片等用于前台页面的显示,Quill在后台传值的时候需要传两个参数,一个用于后台管理系统编辑器的显示,一个用前台页面的显示,具体代码如下截图: 另Q ...
- react-quill 富文本编辑器
适合react的一款轻量级富文本编辑器 1.http://blog.csdn.net/xiaoxiao23333/article/details/62055128 (推荐一款Markdown富文本编辑 ...
- Quill – 可以灵活自定义的开源的富文本编辑器
Quill 的建立是为了解决现有的所见即所得(WYSIWYG)的编辑器本身就是所见即所得(指不能再扩张)的问题.如果编辑器不正是你想要的方式,这是很难或不可能对其进行自定义以满足您的需求. Quill ...
- Quill 富文本编辑器
Quill 富文本编辑器 https://quilljs.com/ https://github.com/quilljs/quill https://github.com/quilljs/awesom ...
- Vue整合Quill富文本编辑器
Quill介绍 Quill是一款开源的富文本编辑器,基于可扩展的架构设计,提供丰富的 API 进行定制.截止2021年1月,在github上面已有28.8k的star. Quill项目地址:https ...
随机推荐
- 监控和安全运维 1.5 nagios监控客户端-1
3. Nagios安装 - 客户端(192.168.0.12)在客户端机器上 rpm -ivh http://www.aminglinux.com/bbs/data/attachment/forum/ ...
- 数据库监听。数据库一次notify,Activity多次接收
今天项目中发现一个bug: (1)当uri数据库中有更新,会从数据库层DataService中通知应用层,调用notifyChange: mContext.getContentResolver().n ...
- maven中pom.xml元素含义
- windows系统中启动应用需要的端口被别的程序占用
开始--运行--cmd 进入命令提示符 输入netstat -ano 即可看到所有连接的PID 之后在任务管理器中找到这个PID所对应的程序如果任务管理器中没有PID这一项,可以在任务管理器中选&qu ...
- 如何使用google等一系列搜索引擎?
对于我们经常使用的搜索引擎大家都都不陌生,但是,如何高效的利用呢?大家都知道空格是搜索多个关键词,那么有没有其他的快捷键呢?答案是肯定的,以下内容转自知乎 1.双引号 把搜索词放在双引号中,代表完全匹 ...
- day70-oracle 12-触发器
查询是没有触发器的.trigger是一个数据库的对象.PL/SQL程序是在我插入之前执行还是在插入之后执行?触发器类似于java中的监听器. 监听插入操作,执行一段PLSQL程序. 禁止在非工作时间插 ...
- Ros指令集
rospack = ros+pack(age) : provides information related to ROS packages rosstack = ros+stack : provid ...
- JAVA语法规则总结
单继承多实现 抽象类 抽象方法 使用关键字:abstract修饰的方法就是抽象方法; 抽象方法的形式:只有方法的声明,没有方法体; 抽象方法一般存在于父类中,相当于强制要求子类必须重写该方法,相当于 ...
- 关于 block的一些浅识
block的定义:“带自动变量的匿名函数” (一)写法: ^ void (int iAge){ NSLog(@"%d", iAge);}; 和C函数写法区别在于: 1) :以插入符 ...
- p2114 起床困难综合症
传送门 分析 orz zwj 最好想到的方法是我们枚举每一位是0还是1,然后暴力求出经过n个操作之后的结果来决定这一位是0还是1 然后我们发现这种暴力的做法居然能a 但是还有更好的方法 我们只考虑开始 ...