Question

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

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

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

但我需要它

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

Answer 1

好。我知道回答迟到但我面临同样的问题。我从官方页面跟随example中的步骤，没有。

我的问题唯一解决方案是创建一个按钮（<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标记

Answer 2

浏览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;">

在froala

2 个答案: