Solved

Is there a responsive rich text editor?

Posted on 2013-12-22
10
317 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
Comment Utility
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
Comment Utility
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
Comment Utility
Take a look at this

http://ckeditor.com/
0
 

Author Comment

by:darroosh
Comment Utility
It is not responsive ....
0
 
LVL 25

Expert Comment

by:Tony Giangreco
Comment Utility
sorry... good luck
0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
> 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 108

Expert Comment

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

Author Comment

by:darroosh
Comment Utility
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
Comment Utility
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
Comment Utility
i used with success this one: http://www.responsivefilemanager.com/ with TinyMCE
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

772 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now