李武明
2021-05-29 10:23
采纳率: 100%
浏览 107
已采纳

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

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

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • CSDN专家-showbo 2021-05-29 16: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>
    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • 有问必答小助手 2021-05-31 16:05

    您的问题已经有小伙伴解答了,请点击【采纳】按钮,采纳帮您提供解决思路的答案,给回答的人一些鼓励哦~~

    ps:开通问答VIP,享受5次/月 有问必答服务,了解详情↓↓↓

    【电脑端】戳>>>  https://vip.csdn.net/askvip?utm_source=1146287632
    【APP 】  戳>>>  https://mall.csdn.net/item/52471?utm_source=1146287632

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题