笨么笨 2021-05-29 02:23 采纳率: 50%
浏览 235
已采纳

ckeditor5 图片上传时如何给图片添加样式

使用的ckfinder方法图片上传的,希望给上传成功后的图片添加一个自定义的class类名

  • 写回答

2条回答 默认 最新

  • CSDN专家-showbo 2021-05-29 08:34
    关注

    https://ckeditor.com/docs/ckeditor5/latest/api/module_image_imageupload_imageuploadediting-ImageUploadEditing.html

    这个api说可以加自定义属性,但是测试了无效。。。

     

    用js处理下就可以了~用api内容太多就不研究了,getData还处理掉了xss一些非白名单属性,需要获取内容后再处理,不能直接处理ckeditor容器中的内容

    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    	<link type="text/css" href="sample/css/sample.css" rel="stylesheet" media="screen" />
    	<title>CKEditor 5 – classic editor build sample</title>
    </head>
    <body>
    	<main>
    			<div class="centered">
    				<div id="editor" name="editor">
    				
    				<figure class="image">
    				<img src="sample/img/umbrellas.jpg" alt="Three Monks walking on ancient temple.">
    
    				<figcaption>Leaving your comfort zone might lead you to such beautiful sceneries like this one.</figcaption>
    				</figure>
    
    				<h3>Confidence</h3>
    
    				<p>Going to a new place can be quite terrifying. While change and uncertainty makes us scared, traveling teaches us how ridiculous it is to be afraid of something before it happens. The moment you face your fear and see there was nothing to be afraid of, is the moment you discover bliss.</p>
    			</div>
    
    			</div>
    			<div style="text-align:center"><input type="submit" onclick="return addMoreAttr()" /></div>
    		
    	</main>
    
    
    	<script src="ckeditor.js"></script>
    	<script src="translations/zh-cn.js"></script>
    	<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
    	<script>
    		function addMoreAttr() {
    			var s = editor.getData();
    			console.log(s)
    			s = $('<div>' + s + '</div>').find('figure.image img').each(function () {
    				$(this).addClass('progressive__img progressive--not-loaded').parent().addClass('progressive')
    			}).end().html();
    			console.log(s)
    		}
    		ClassicEditor
    			.create(document.querySelector('#editor'), {
    				language: 'zh-cn',
    				ckfinder: {
    					uploadUrl: '/home/upload'
    				}
    			})
    			.then(editor => {
    				window.editor = editor;
    
    			})
    			.catch(err => {
    				console.error(err.stack);
    			});
    
    	</script>

    展开全部

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 爱快路由器端口更改错误导致无法访问
  • ¥20 安装catkin时遇到了如下问题请问该如何解决呢
  • ¥15 VAE模型如何输出结果
  • ¥15 编译python程序为pyd文件报错:{"source code string cannot contain null bytes"
  • ¥20 关于#r语言#的问题:广义加行模型拟合曲线后如何求拐点
  • ¥15 fluent设置了自动保存后,会有几个时间点不保存
  • ¥20 激光照射到四象线探测器,通过液晶屏显示X、Y值
  • ¥50 数据库开发问题求解答
  • ¥15 安装anaconda时报错
  • ¥15 小程序有个导出到插件方式,我是在分包下引入的插件,这个export的路径对吗,我看官方文档上写的是相对路径
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部