TQEditor

wrapimage 图片环绕 ​

TIP

仅对图片有效，支持图片和整体块（作答区、影子题号、题目、图片热区）的环绕操作

代码演示 ​

测试图片环绕某校在课后服务时间里为六年级学生开设了艺术、体育、科技三类社团活动，测试图片环绕某校在课后服务时间里为六年级学生开设了艺术、体育、科技三类社团活动

测试图片环绕某校在课后服务时间里为六年级学生开设了艺术、体育、科技三类社团活动，测试图片环绕某校在课后服务时间里为六年级学生开设了艺术、体育、科技三类社团活动

html 结构 ​

左环绕 ​

html
<p>
  文字内容<img class="qyx-wrapimage-left" src="" alt="">文字内容
</p>

右环绕 ​

html
<p>
  文字内容<img class="qyx-wrapimage-right" src="" alt="">文字内容
</p>

整体块环绕 ​

当图片位于作答区、影子题号、题目、图片热区等整体块中时，环绕 class 应用在整体块上：

html
<p>
  文字内容<div class="qyx-wrapimage-left" data-block-type="answer-field">...</div>文字内容
</p>

使用 ​

js
const options = {
  plugins: ['wrapimage'],
  toolbar: 'wrapimage',
}

属性 ​

属性说明默认值
qyx-wrapimage-left左环绕 class，图片或整体块浮动到文字左侧-
qyx-wrapimage-right右环绕 class，图片或整体块浮动到文字右侧-

命令 ​

名称说明
WrapImageLeft左环绕
WrapImageRight右环绕
WrapImageNone取消环绕

示例 ​

js
// 左环绕
tinymce.activeEditor.execCommand('WrapImageLeft')

// 右环绕
tinymce.activeEditor.execCommand('WrapImageRight')

// 取消环绕
tinymce.activeEditor.execCommand('WrapImageNone')

交互行为 ​

拖拽 ​

  • 环绕图片拖拽：带 qyx-wrapimage-left/right class 的图片拖拽时，以 inline 方式插入目标段落，不会产生独立 <p> 包裹
  • 整体块拖拽：图片在作答区等整体块中时，整个块作为整体拖拽，保留所有 style、class、data-block-type 等属性

对齐操作拦截 ​

对带环绕样式的图片或整体块执行对齐操作（居中、左对齐、右对齐等）时，会自动先清除环绕 class 和 float 样式，再应用对齐样式