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

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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写，需写出详细代码，代价私
  • ¥15 ROS系统搭建请教（跨境电商用途）
  • ¥15 AIC3204的示例代码有吗，想用AIC3204测量血氧，找不到相关的代码。