froala - 对 froala 中的图像使用内联样式而不是类

Question

有没有一种简单的方法可以强制 Froala 使用内联样式而不是类来对齐图像？

换句话说，当 froala 对齐图像时，html 输出变为

<img src="..." class="fr-dii fr-fil">

但我需要它

<img src="..." style="float: left;">

Answer 1

查看 image.js 代码，您可以设置一些选项来实现此目的：

imageDefaultDisplay可以设置为“块”或“内联”

https://www.froala.com/wysiwyg-editor/docs/options#imageDefaultDisplay

然后，将useClasses选项设置为false。（这将防止类被到处使用，所以要小心）

https://www.froala.com/wysiwyg-editor/docs/options#useClasses

froala 初始化代码示例：

$("#wysiwyg").froalaEditor({
    useClasses: false,
    imageDefaultDisplay: 'block'
});

然后，当您将图像向右浮动时，它将呈现如下：

（useClasses: false和imageDefaultDisplay: 'block'）：

<img src="http://www.fakewebsite.com/images/image.jpg" style="display: inline-block; vertical-align: bottom; margin: 5px 0px 5px 5px; max-width: calc(100% - 5px); text-align: right; float: right;">

或者

（useClasses: false和imageDefaultDisplay: 'inline'）：

<img src="http://www.fakewebsite.com/images/image.jpg" style="display: inline-block; vertical-align: bottom; margin: 5px 0px 5px 5px; max-width: calc(100% - 5px); text-align: right; float: right;">

Answer 2

出色地。我知道回答迟了，但我遇到了同样的问题。我按照官方页面中示例中的步骤进行操作，但什么也没做。

我的问题的唯一解决方案是创建一个按钮（<div class="mybutton">），当我按下它时，编辑器（<div id="edit">）中的内容被复制到一个<div class="result">和中，并制作如下内容：

 $(document).ready(function(){
   $(".mybutton").click(function(){
      var text = $('#edit').froalaEditor('html.get');
      // copying to div
      $('#result').html( text );

      //here I add a bootstrap class to every img tag in div 
      $('#result').find("img").addClass('img-responsive');
    });
  });

如您所见，您可以创建您的类并添加您的样式并自定义每个 img 标签