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 类。使图像浮动的方法是float-right。

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