Tinymce如何浮动图像？

Question

默认情况下，没有图像浮动，只有图像，文本对齐我应该手动执行还是已经有一些插件？无法找到任何......或者我如何获得当前选定的元素并浮动它们？

Answer 1

您可以使用style_formats选项 文件在这里：https://www.tiny.cloud/docs/configure/content-formatting/#style_formats

  

此选项可让您为文本添加更多高级样式格式   和编辑器的其他元素。此选项的值将是   在格式下拉列表中呈现为样式。

初始化时，你可以这样做。

tinymce.init({
    ...
    style_formats: [
    {
        title: 'Image Left',
        selector: 'img',
        styles: {
            'float': 'left', 
            'margin': '0 10px 0 10px'
        }
     },
     {
         title: 'Image Right',
         selector: 'img', 
         styles: {
             'float': 'right', 
             'margin': '0 0 10px 10px'
         }
     }
]
});

希望这有帮助。

Answer 2

在 TinyMce v4 和 v5 中，当您安装了 image 插件时，

plugins: [
    "... image"
],

然后您可以使用 image_class_list 属性来允许用户向图像添加类。

例如，在下面的示例中，用户使图像向右浮动，选择“向右”选项。 我已经为该选项分配了一些 TailwindCSS 类。使图像浮动的是浮动右。

image_class_list: [
    { title: 'Left', value: '' },
    { title: 'Right', value: 'w-full md:float-right' }
],

这里是image_class_list的官方文档： https://www.tiny.cloud/docs/plugins/opensource/image/#image_class_list

如果您还想让图像在编辑器中浮动，您还必须添加 content_style 属性并分配相应的 CSS 属性。

content_style: "body img.md\\:float-right{ float: right; }"
               

这里是content_style的官方文档： https://www.tiny.cloud/docs/configure/content-appearance/#content_style