没有带 bootstrap 工具栏的 ckeditor，在 rails 中通过外部按钮显示预览

Question

我即将使用 CKEditor 实现 post 功能。但是我不需要 post 功能的工具栏。我需要提供 post 的 preview 应该是 HTML 版本，preview 功能应该由 onkeyup/any button 完成。 preview 部分将在 CKEditor.

下方

图片 http://grab.by/H5Sk

邮件的目的是向 user 提供格式化的 post。如果我使用 textarea 那么它 returns 一个 string 并且我不能显示为在 textarea 中输入的 user。

Answer 1

对于ckeditor：测试

CKEDITOR.replace('editor1', {工具栏: []});

另一个解决方案：

This is What Whosebug is using

Answer 2

您应该使用 editor#change and editor#contentDom 事件。您不应该像

那样禁用工具栏

CKEDITOR.replace('editor1', {toolbar: []})

因为它会禁止在您的编辑器中使用任何类型的内容作为 toolbar corresponds with Advanced Content Filter, unless you disable it by setting config.allowedContent = true, which is not recommended。

参见JSFiddle。

HTML

<textarea id="editor">
    <p>Hello world! <a href="http://google.com">This is some link</a>.</p>
    <p>And there is some <s>deleted</s>&nbsp;text.</p>
</textarea>    

<div id="preview"></div>

JS

var preview = CKEDITOR.document.getById( 'preview' );

function syncPreview() {
    preview.setHtml( editor.getData() );
}

var editor = CKEDITOR.replace( 'editor', {
    on: {
        // Synchronize the preview on user action that changes the content.
        change: syncPreview,

        // Synchronize the preview when the new data is set.
        contentDom: syncPreview
    }
} );

CSS

/* Hide the toolbar with CSS */
.cke_top { display: none !important }

没有带 bootstrap 工具栏的 ckeditor，在 rails 中通过外部按钮显示预览

ckeditor with no toolbar with bootstrap and display Preview by external button in rails

ckeditor

ruby-on-rails-3

twitter-bootstrap