首页
学习
活动
专区
圈层
工具
发布

vue富文本编辑器tinymce_vue移动端富文本编辑器

主流富文本编辑器对比 前言:vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想。所以果断使用vue-quill-editor来实现。...wangEditor(国产,基于javascript和css开发的web富文本编辑器,开源免费)优势:轻量简介,最重要的是开源且中文文档齐全。缺点:更新不及时。没有强大的开发团队支撑。...在使用时需要配置后端的一些东西,使用不便。 Kindeditor () 优势:文档齐全,为中文,阅读方便。缺点:图片上传存在问题,上传历史过多,会全部加载,导致浏览器卡顿。...需要有默认值的 标题 - header [{ 'header': 1 }, { 'header': 2 }] 值字体大小 列表 - list [{ 'list': 'ordered...点击quill-editor的图片上传时,实际点击了自定义的图片上传,而后在返回网络路径后将图片插入富文本编辑器即可。

4.3K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Vue + Element + vue-quill-editor 实现源码编辑、自定义图片上传和汉化

    , {script: 'super'}], // 缩进 [{indent: '-1'}, {indent: '+1'}], // 文本方向 [{direction: 'rtl'}], // 字体大小...{ toolbar: { // 工具栏选项 container: toolOptions, // 事件重写 handlers: handlers } }, // 在使用的页面中初始化按钮样式...例如上面代码中,我的工具名是sourceEditor,我的方法名也是sourceEditor,而生成的button工具的类名就是ql-sourceEditor了。 ?...自定义上传图片 vue-quill-editor自带的上传,是把图片变成了base64的格式,不符合一般的项目需求。我猜它是用的FileReader的API。...也可以自己监听change事件 ⚠️注意点: name不能一样 上传逻辑按自己的来,跟我应该不一样 其实最重要的是回显到富文本中的那段代码,无论你怎么上传,甚至可以不用elementui的上传组件

    2.6K20

    Quill编辑器介绍及扩展

    修改字体大小选择,使用自定义的列表和单位(rem) 自带的字体大小编辑有2个如下。但是显然不太能支持我们的用法。一开始吧size扩展成了px。但是后来经过测试发现手机端使用的是rem,so。...//1rem=36px 'size': ['0.26rem', '0.31rem', '0.37rem', '0.41rem', '0.47rem', '0.52rem'] }] 为了在菜单栏中显示对应的字体大小...{ content: '14px'; font-size: 14px; } //rem:需要说明一下,在编辑的时候还是显示px单位,但最终生成的源代码使用rem,因为编辑是在pc上,并且运营人员也只熟悉...当然为了在pc上rem字体能生效,还必须得加上一行。...然后在来一个高级一点的。设置字体为粗体 quill默认使用的是strong或者b标签方式。其实这也是没有问题的,但是架不住公司的"高级"前端对手机端的所有html标签都reset了。

    4.5K20

    Quill编辑器自定义字体和字体大小

    Quill编辑器自定义字体和字体大小 场景 由于官方自带的字体大小只有Samll,Normal,Large,Huge这四种,在实际开发中肯定是不满足要求的,此时我们需要手动修改下载的本地仓库中的相关js...和css, 需要注意的是,在生产环境部署中,需要在本地打包上传,不然恢复默认状态 ?...mavonEditor } from 'mavon-editor' //引入富文本组件 import { Quill, quillEditor } from 'vue-quill-editor' //引入自定义字体样式...改动1 修改字体大小,文件路径在 *\node_modules\quill\dist路径下的quill.core.js 文件里 大概在6115行,可以直接搜索size修改 var SizeClass =...改动3 文件路径在 *\node_modules\quill\dist路径下的quill.core.css 文件里中添加 .ql-editor .ql-size-10px { font-size:

    3.3K20

    【愚公系列】2023年04月 Halcon机器视觉-15种常用缺陷检测实例

    该技术可以检测出产品表面的缺陷,如裂纹、凹陷、划痕、气泡等,并且可以实时监测和诊断制造过程中的问题。...在制造业中,机器视觉缺陷检测技术已经被广泛应用于各种产品的质量控制和检测工作中,如电子产品、汽车零部件、医疗器械等。...:字体大小为16,字体为mono,粗体,斜体 set_display_font (WindowHandle, 14, 'mono', 'true', 'false') *设置区域的填充方式 dev_set_draw...:字体大小为16,字体为mono,粗体,斜体 set_display_font (WindowID, 16, 'mono', 'true', 'false') *设置区域的填充方式 dev_set_draw...图像预处理******************************************************** *读取一张图像 read_image(Image,'1.bmp') *对图像的灰度值在

    3.3K45

    字体是网页设计中最重要的细节

    这两个字体,就是无衬线字体,没有边角的修饰,令人看起来很整齐光滑,没有毛刺。比较适合用在网页中,让浏览者获取大量的文字信息而不会疲劳。...看下面的这张图片: 里面的字,是相同大小的,同时排放在一条竖线上。为其应用了四种不同的字体后,体现出来了不同的形态和粗细大小。在中文字体中,不同的字体,在字间距中通常没有很大的变化。...而在英文字体中,不同的字体会改变字母的大小,导致整体的尺寸布局不同,进而导致整个排版混乱。 相同的字体大小,在不同的字体下面,显示的效果几乎完全不同。这是英文字体选择中,比较麻烦和头疼的问题。...这涉及到一个锯齿的问题,特别是在早期的显示器中,往往不能很好的处理文字的锯齿问题,而使用单数的像素,极有可能造成锯齿,所以默认的通常使用偶数大小。...使用在线字体 在 CSS3 中,引入了一个非常强大而且实用的功能来面对上面的字体选择问题。传统的字体选择,要你的操作系统中安装相应字体才可以显示。

    1.3K10

    C#之二十 Win Form对话框

    可在基于 Windows 的应用程序中将其用作简单的字体选择解决方案,默认情况下,该对话框显示字体、字体样式和字体大小的列表框;删除线和下划线等效果的复选框。...FontDialog组件常用属性 属性名称 说明 Color 获取或设置选定的字体颜色 Font 获取或设置选定的字体 MaxSize 获取或设置可选择的最大磅值 MinSize 获取或设置可选择的最小磅值...创建一窗体,将窗体布置如下图样子(字体对话框是组件在工具箱的对话框项中,将它拖入窗体后不显示在窗体中): 使用控件列表 控件标识 说明 btnOpenFontDialog 打开字体对话框按钮 txtFont...,默认为桌面 ​​SelectedPath​​ 获取或设置用户选定的路径 ​​ShowNewFolderButton​​ 获取或设置一个值,该值指示“新建文件夹”按钮是否显示在文件夹浏览对话框中 FolderBrowserDialog...获取或设置文件对话框中当前选定筛选器的索引 ​​InitialDirectory​​ 获取或设置文件对话框显示的初始目录 ​​OverwritePrompt​​ 获取或设置一个值,该值指示如果用户指定的文件名已存在

    1.2K00

    最新Python大数据之Excel进阶

    1.利用连续区域的所有数据 使用工作表中连续区域的所有数据,只需单击该数据区域的任一单元格,通过插入图表命令插入图表即可 选定部分数据 先选择建表要用到的数据,再通过插入图表命令插入选定类型的图表...•此时,新选中的数据系列已经在列表当中,点击确定,完成系列增加。...格式化图表 保证图表的完整性 一个完整的图表必须包含以下基本元素:图表标题、数据系列、图例、坐标轴、数据单位 格式化图表区/绘图区 图表区格式的设置主要包括字体、背景填充、边框、大小、属性等 格式化图表标题...创建数据透视表 •使用推荐的透视表 在原始数据表中,单击【插入】选项卡下【表格】组中的【推荐的数据透视表】按钮,即可出现一系列推荐的透视表 。...如下图所示,选中不同的透视表,在右边可以看到透视表的明细。 •自定义建立透视表 自定义建立透视表的方法是,单击【插入】选项卡下【数据透视表】按钮,出现如下图所示的对话框。

    3.3K50

    实习生的监控算法: 利用机器学习方法进行曲线分类

    当然在使用变异系数时,最好将均值和标准差列出,变异系数的大小,同时受平均数和标准差两个统计量的影响。 其次是数据时域方面的特征。时域方面选择了自相关系数和信息熵作为参考。...这个特征可以有效分辨出不规则的毛刺数据。 最后是频域特征,频域特征我处理的比较粗糙,就是将曲线进行小波变换得到一系列小波系数(低频系数, 高频系数)。 小波变换的实质是:原信号与小波基函数的相似性。...聚类算法首先选用的是KMeans,这是一种选定初始质心,不断更新质心的值直到聚类结果不在发生变化的算法,Kmeans的基本步骤如下: 从D中随机取k个元素,作为k个簇的各自的质心。...在实际应用时采用scikit-learn中的Kmeans函数,可以指定簇的个数(num_clusters), 选定质心的方式(init是随机还是k-means++, 官网上的例子一般是选的k-means...四.结尾 这篇文章的思路和做法和之前在KM上的文章很类似,这里只是详细的描述曲线分类过程中自己遇到的问题和解决方法。

    7.7K20

    《101 Windows Phone 7 Apps》读书笔记-ALARM CLOCK

    隔离存储空间只受手机配置的影响。与web版本的silverlight不同,对于每个应用程序的隔离存储空间,并没有人为引入空间大小的限制。...这个应用程序使用了更加简单的方法:使用自定义字体。列表20.8包含了TimeDisplay用户控件的XAML代码,它实现了七段显示。     在使用自定义字体之前,确保你具有这个权限!    ...虽然使用自定义字体比较简单,但是否合法使用就是另一回事情了。在使用字体之前,应该确保了解它的使用规则。...注意: Ø 使用自定义字体,只需要将字体文件包含到项目工程中(将其Build Action设置为Content),并在需要使用该字体的text block、text box控件(或者是那些继承字体的子控件...Ø 每个text block分为两个不同的部分,一个用于显示小时/分钟,其面积较大;另一个用于显示秒,其面积较小(它们的面积和显示值均可以在代码文件中设置)。

    1.5K60

    H7-TOOL发布固件V2.13,全新示波器上位机界面,信号发生器任意波形输出,脱机烧录增加BlueNRG-LP和桃芯科技(2022-02-11)

    5、TOOL在电压表界面,直接打印电压值到串口示波器 6、Lua输出窗口字体 字体大小可调节 7、信号发生器独立到单独的窗口,新增任意波形输出功能 8、解决在win11下左侧图标闪烁问题...现在显示区做了控制,不会完全移动到波形区外: (4)、CH1和CH2波形放缩 CH1和CH2是同时放缩的,鼠标剪头在波形显示区内,鼠标滚轮可以放缩波形: (5)、垂直光标测量,用于波形周期测量...TOOL在电压表界面,直接打印电压值到串口示波器 5. Lua输出窗口字体 字体大小可调节 6. 信号发生器独立到单独的窗口,新增任意波形输出功能 7...., 出现半个汉字则会显示乱码 - 增加1拖16功能 - 修正无法解析特殊HEX文件(最后1行无回车)的bug - 新增NXP的MKLXX系列烧录 3....波形显示,修正X,格式显示异常的问题. DS18B20不能显示波形 4. 修正底栏缩放文字重叠问题 5. CAN助手解码器如有语法错误则显示出错原因 6.

    1.5K30

    带你走近AngularJS - 基本功能介绍

    所以,Wijmo是学习AngularJS很好的参考示例:AngularJS Directive Gallery ? 创建自定义指令是非常容易的。指令可以测试、维护并且在多个项目中复用。...filter 构造函数返回一个方法用于更改input文本的显示方式。Angular 提供很多内置的filter,同时,你也可以添加自定义filter,操作方式Angular内置filter相同。...示例中我们绑定了mouseenter 和mouseleave 事件用于切换文本高亮显示。这是一个功能简单的指令,在后续的章节将展示如何创建一些复杂指令。...注意应用中module、controller和filter 作为特性值应用。它们代表JavaScript 对象,因此名称是区分大小写的。...指令的名称同样也是属性值,它作为HTML标签被解析,所以也是区分大小写的。

    4.1K100

    2022年最新Python大数据之Excel基础

    •选中要计算的区域 •在数据菜单下点击删除重复值按钮 •选择要对比的列,如果所有列的值均相同则删除重复数据 •点击确定,相容内容则被删除,仅保留唯一值 条件格式删除重复项 使用排序的方法删除重复项有一个问题...中位数:是指将数据按大小顺序排列起来,形成一个数列,居于数列中间位置的那个数据。 众数:众数是指一组数据中出现次数最多的那个数据,一组数据可以有多个众数,也可以没有众数。...1.利用连续区域的所有数据 使用工作表中连续区域的所有数据,只需单击该数据区域的任一单元格,通过插入图表命令插入图表即可 选定部分数据 先选择建表要用到的数据,再通过插入图表命令插入选定类型的图表...格式化图表 保证图表的完整性 一个完整的图表必须包含以下基本元素:图表标题、数据系列、图例、坐标轴、数据单位 格式化图表区/绘图区 图表区格式的设置主要包括字体、背景填充、边框、大小、属性等 格式化图表标题...创建数据透视表 •使用推荐的透视表 在原始数据表中,单击【插入】选项卡下【表格】组中的【推荐的数据透视表】按钮,即可出现一系列推荐的透视表 。

    12K20

    C#学习笔记—— 常用控件说明及其属性、事件

    (9)ControlBox属性:用来获取或设置一个值,该值指示在该窗体的标题栏中是否显示控制框。值为true时将显示控制框,值为false时不显示控制框。...(2)AutoSize 属性:用来获取或设置一个值,该值指示是否自动调整控件的大小以完整显示其内容。...这时将遇到一个问题,即子控件与父控件的位置关系问题,即当父控件的位置、大小变化时,子控件按照什么样的原则改变其位置、大小。Anchor属性就规定了这个原则。...两种控件间的其他差异在于,复选列表框只支持DrawMode.Normal,并且复选列表框只能有一项选定或没有任何选定。...该控件在工具箱中的图标为 字体对话框的作用是显示当前安装在系统中的字体列表,供用户进行选择。下面介绍字体对话框的主要属性。

    14.6K20

    angularjs中常用的ng指令介绍【转载】

    ng提供的或者自定义的标签和属性,用来增强HTML表现力。 标记(markup)。即双大括号{{}},可将数据单向绑定到HTML中。 过滤器(filter)。用来格式化输出数据。 表单控制。...}}} 如果你想拼接一个类名出来,可以使用插值表达式,如: 字体样式测试 然后在controller中指定style的值: 注意我用了class...这个用来在表格中实现隔行换色再方便不过了。 2.  ng-style ng-style用来绑定元素的css样式,其表达式的返回值为一个js对象,键为css样式名,值为该样式对应的合法取值。...顺着这个思路再多想一点,我们在模板中使用{{}}显示数据时,在ng编译完成之前页面上岂不是会显示出大括号及里面的表达式?确实是这样。...因为我编写的是单页面应用,页面只会在加载index.html的时候出这个问题,只需在index.html中的模板中换成ng-bind就行。其他的模板是我们动态加载的,就可以放心使用{{}}了。

    2.6K30

    国产linux操作系统深度系统20.3发布(推荐)

    系统更新日志: 新增及优化 DDE 新增全局搜索功能快捷键,支持搜索markdown文件 优化任务栏声音调整最小刻度值 优化在多屏模式下选择为扩展模式时,在任务栏鼠标右键后菜单显示多屏显示设置 优化控制中心下的时间...,且输入框不恢复的问题 修复从控制中心切换进入通知中心效率慢的问题 修复任务栏调整字体大小后时间显示不全的问题 修复使用全局搜索无任何结果时显示结果有文件的问题 修复启动器中无法正确卸载deb包安装的应用...10M大小的jpeg格式图片,键盘按ESC键无法退出弹框并且焦点在自定义标签页上的问题 修复长按自定义标签页快捷图标,无法调起右键菜单的问题 修复深色主题模式下,浏览器窗口化状态显示浅色滚动条的问题 修复设置自定义背景后做重置操作...efi程序使用目前最新版本grub生成efi文件,修复xen引导失败问题 字体管理器 修复删除用户字体目录/系统字体目录的字体文件,字体应用中相应的字体未被全部删除的问题 修复在删除/禁用/启用字体集提示窗口显示情况下调节字体大小...,弹窗不能实时调整并会出现显示大量留白/截断的问题 修复安装ttc字体文件,验证提示框出现显示透明卡顿的问题 修复使用Tab键切换焦点至启用/禁用/删除,在字体集提示框中的“应用到所有选定的字体集”选择框按回车键

    6.8K20

    Sketch 94 mac,草图94中文最新版支持M1,支持macOS Ventura 13

    强大的文本属性覆盖您现在可以在 Symbol 实例中覆盖字体属性,如粗细、对齐、颜色等——这意味着您无需为项目中的每个字体变体创建新的文本样式。颜色覆盖覆盖所有颜色!...它现在使用应用程序的强调色,更容易看到选定的图层(特别是在选择多个形状和画板时)。Symbol 实例中的选定图层现在在其角上显示 X 标记和更粗的边框,以将它们与普通图层区分开来。...如果在将鼠标悬停在手柄上时按住 ⌘ 键,您将看到线条的角度。我们修复了在插入或复制粘贴位图后关闭文档时会发生的内存泄漏。修复了无法通过拖动未填充区域来移动带有边框但没有填充的选定形状的问题。...修复了使用选定的画板将图像拖放到画布上会忽略您放置它的位置的问题。修复了如果叠加层是自动链接目标,则叠加层预览无法正确显示的问题。修复了一个错误,如果交互在文本层上,您将无法在画布周围移动叠加层。...修复了在画板之外扩展的带有阴影或模糊的叠加层无法正确渲染的问题。修复了一个错误,在该错误中,分离包含具有缩放文本的嵌套实例的符号会将文本重置为其原始大小。

    13K70
    领券