Egg.js富文本编辑器 wysiwyg-editor的使用

发布于 6 年前 作者 fengcaizl 2648 次浏览 最后一次编辑是 6 年前 来自 分享

nodejs或者express 或者 koa中可以使用百度的富文本编辑器UEditor

但是Egg.js中直接用百度的富文本编辑器UEditor 的话还需要很多额外配置非常麻烦。

下面的话给大家推荐一款Egg.js富文本编辑器 wysiwyg-editor的使用。

一个设计精美的基于HTML5的WYSIWYG HTML编辑器，它非常小但是非常强大。我们不仅可以在nodejs中使用它，还可以在vue 、 react 、angular前端框架中使用，并还可以在 PHP, .NET, Java, and Python等其他后端语言使用。

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

wysiwyg-editor 在egg.js中使用


<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<!-- Include Editor style. -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1/css/froala_style.min.css" rel="stylesheet" type="text/css" />

<!-- Create a tag that we will use as the editable area. -->
<!-- You can use a div tag as well. -->
<textarea></textarea>

<!-- Include jQuery lib. -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<!-- Include Editor JS files. -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1//js/froala_editor.pkgd.min.js"></script>

<!-- Initialize the editor. -->
<script>
  $(function() {
    $('textarea').froalaEditor()
  });
</script>
回到顶部