如何在 Rails 上使用史诗编辑器答案

【问题标题】：How to use epic editor on rails如何在 Rails 上使用史诗编辑器
【发布时间】：2014-09-27 21:52:16
【问题描述】：

我是在 Rails 上使用 javascript 的新手，我希望有一个界面，以便在视图上，用户可以使用 markdown 在 textarea 中键入，并且输出应根据用户的 markdown 语法进行更新继续打字。我找到了史诗编辑器作为解决方案，并在我的资产/javascripts 和我的模型的 js.coffee 文件中创建了一个 epiceditor.js 文件

editor = new EpicEditor().load()

但是，我不知道如何使用史诗编辑器在同一视图中呈现输入文本区域和输出？有人可以给我一些指导吗？谢谢！

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-4

【解决方案1】：

刚刚开始使用史诗编辑器与 rails 结合，这就是我目前所拥有的：

更改 basePath 和主题、预览、编辑器路径。

defaults = { container: 'epiceditor'
    , basePath: '/assets'
    , textarea: 'content-input'
    , clientSideStorage: true
    , localStorageName: 'epiceditor'
    , useNativeFullscreen: true
    , file: { name: null
    , defaultContent: ''
      , autoSave: 100 // Set to false for no auto saving
      }
    , theme: { base: '/epiceditor.css'
      , preview: '/github.css'
      , editor: '/epic-style.css'
      }

如果您使用 simple_form gem，您可以将其添加到您的表单中：

<%= f.input :content, label: false, input_html: {id: "content-input"}, as: :hidden%>
<div id="epiceditor"></div>

然后在您的 epiceditor.js 文件中将 textarea 更改为 textarea: 'content-input'（textarea id），以便它与隐藏的 textarea 同步。

function EpicEditor(options) {
// Default settings will be overwritten/extended by options arg
var self = this
  , opts = options || {}
  , _defaultFileSchema
  , _defaultFile
  , defaults = { container: 'epiceditor'
    , basePath: '/assets'
    , textarea: 'content-input'
    , clientSideStorage: true
    , localStorageName: 'epiceditor'
    , useNativeFullscreen: true
    , file: { name: null

默认同步/导出是文本，将其更改为 'html'

_syncTextarea = function () {
  self._textareaElement.value = self.exportFile(textareaFileName, 'html', true) || self.settings.file.defaultContent;
}

当然加载脚本

<script type="text/javascript">
    var editor = new EpicEditor().load();
</script>

【讨论】：