如何在Ionic中使用Froala编辑器作为内联选项？

Question

我在Ionic中安装了Froala编辑器。它运作正常。在我的**home.html**中，我添加了这行代码

<div [froalaEditor]>Hello, Froala!</div>

看起来像这样：

如何在Ionic中内联使用？

他们的文件指南为js，但我不知道如何在Ionic中实现相同，下面是他们的指示

HTML

<div id="froala-editor1">
  <p>This is the first editor instance</p>
  <img src="/assets/editor/docs/photo14.jpg" class="fr-fil" alt="book" width="150"/>
</div>

JS

<script>

  $(function() {
    $('div#froala-editor1').froalaEditor({
      toolbarInline: true,
      toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'color', 'emoticons', '-', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent', '-', 'insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo']
    })
  });
</script>

Answer 1

Ionic实现正在使用Angular。见https://github.com/froala/angular-froala-wysiwyg#usage。您基本上应该在组件中执行类似的操作，然后将选项传递给指令。

public options: Object = {
  toolbarInline: true,
  toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'color', 'emoticons', '-', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent', '-', 'insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo']
}



<div [froalaEditor]='options'>Hello, Froala!</div>