CODEWITHSUNDEEP
ruby-on-rails-3twitter-bootstrapckeditor
Vinay
Vinay

Reputation: 334

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

I am about to use CKEditor for post functionality. But I don't need a toolbar for the post functionality. I need to provide a preview of the post that should be HTML version, preview functionality should be done by onkeyup/any button. And preview section will be below the CKEditor.

Image http://grab.by/H5Sk

The mail purpose is to provide a formatted post to the user. If I am using textarea then it returns a string and I can not display as user entered in textarea.

Upvotes: 0

Views: 947

Answers (2)

oleq
oleq

Reputation: 15895

You should use editor#change and editor#contentDom events. You should not disable the toolbar like

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

because it will disallow any type type of the content in your editor as the toolbar corresponds with Advanced Content Filter, unless you disable it by setting config.allowedContent = true, which is not recommended.

See the 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 }

Upvotes: 1

Pardeep Dhingra
Pardeep Dhingra

Reputation: 3946

For ckeditor: Test

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

Another solution:

This is What Stackoverflow is using

Upvotes: 0

Related Questions