Solved

Is there a responsive rich text editor?

Posted on 2013-12-22
10
321 Views
Last Modified: 2013-12-28
Hi,

I need a responsive rich text editor that is suitable for mobiles , tablets , laptops and large PCs..

Any suggestions ?
0
Comment
Question by:darroosh
  • 3
  • 3
  • 2
  • +2
10 Comments
 
LVL 25

Expert Comment

by:Tony Giangreco
ID: 39734647
We've used Ultra Edit for years.  It has great features, the support is the best i've ever seen and it just works perfect without any problems.

http://www.ultraedit.com/
0
 

Author Comment

by:darroosh
ID: 39734682
This is a desktop version..
I need a webbased responsive Rich text editor that can be implemented inside HTML pages..
0
 
LVL 25

Expert Comment

by:Tony Giangreco
ID: 39734692
Take a look at this

http://ckeditor.com/
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

Author Comment

by:darroosh
ID: 39734696
It is not responsive ....
0
 
LVL 25

Expert Comment

by:Tony Giangreco
ID: 39734702
sorry... good luck
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39735351
> Take a look at this http://ckeditor.com/
>> It is not responsive ....

You can set the width http://docs.ckeditor.com/#!/guide/dev_howtos_interface-section-2
editor.resize( '100%', '350' );
0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 39736209
IIRC CKEditor is the thing that powers WordPress.  You can't get much more mainstream than that.
0
 

Author Comment

by:darroosh
ID: 39739011
Thank you padas.
But I don't know where to write "editor.resize( '100%', '350' );"
Can you please tell me ?
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39739018
I found a jsbin with ckeditor and updated it.  Notice I commented out the width and replaced with 100%  http://jsbin.com/utupol/2/edit?html,js,output

CKEDITOR.stylesSet.add( 'my_styles',
[
    // Block-level styles
    { name : 'Blue Title', element : 'h2', styles : { 'color' : 'Blue' } },
    { name : 'Red Title' , element : 'h3', styles : { 'color' : 'Red' } },
 
    // Inline styles
    { name : 'CSS Style', element : 'span', attributes : { 'class' : 'my_style' } },
    { name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } }
]);	

CKEDITOR.replace('ShortDesc', {
  //width: '400px',
  width: '100%',
  height: '200px',
  stylesSet: 'my_styles',
 
  toolbar: [
    ['Source', '-', 'Save', 'Preview'],
    ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
    ['SpecialChar', 'Styles'],
    ['Bold', 'Italic', 'Underline', 'Strike'],
    ['FontSize'],
    ['NumberedList', 'BulletedList'],
    ['TextColor', 'BGColor'],
    ['Link', 'Unlink', 'Anchor']
    ],
      on: {
        instanceReady: function (ev) {
        this.dataProcessor.writer.setRules('p', {
        indent: false,
        breakBeforeOpen: true,
        breakAfterOpen: false,
        breakBeforeClose: false,
        breakAfterClose: true
          });
        }
      }
  });

Open in new window

0
 
LVL 3

Expert Comment

by:teodor birca
ID: 39739104
i used with success this one: http://www.responsivefilemanager.com/ with TinyMCE
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question