Text Editor example

lulu50
lulu50 used Ask the Experts™
on
Hi,

I have to add a text editor to my project and I wonder if you anyone know where I can download an example.

The user should be able to bold and change the color of the text. so that's why I need to add a text editor to my project.  

Thanks,
lulu
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
TinyMCE is quite good one.
kaufmedGlanced up at my screen and thought I had coded the Matrix...  Turns out, I just fell asleep on the keyboard.
Most Valuable Expert 2011
Top Expert 2015

Commented:
Summernote is also an option.
leakim971Multitechnician
Top Expert 2014

Commented:
CKEditor : https://cdn.ckeditor.com/

test page : https://jsfiddle.net/hb3c9fv0/

about licencing : https://ckeditor.com/legal/ckeditor-oss-license/

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>CKEditor</title>
                <script src="https://cdn.ckeditor.com/4.13.0/standard/ckeditor.js"></script>
        </head>
        <body>
                <textarea name="editor1"></textarea>
                <script>
                        CKEDITOR.replace( 'editor1' );
                </script>
        </body>
</html>

Open in new window

CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

Multitechnician
Top Expert 2014
Commented:
for the color, you need to add the colorbutton plugin  
you can build a custom ckeditor "distibution" using : https://ckeditor.com/cke4/builder
1 - Basic
2a - drag and drop colorbutton from the right to the left :
colobutton plugin added
2b - choose a skin
3 - choose a language (english by default)

and download it (see file attached)
unzip and use :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CKEditor</title>
    <script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea name="editor1"></textarea>
<script>
    CKEDITOR.replace('editor1');
</script>
</body>
</html>

Open in new window


and you get :
result.png
Each of well known and advanced text editor have plugins and settings, so for example you can allow to only access to the features you want or need like  Bold and Colors.

The problem you may encounter is when saving the data into the database, so you will need to make tests to make sure it save it correctly.

I do like TinyMCE because it is very flexible and tons of addons you can use the Raw feature when saving this may be helpful.
https://www.tiny.cloud/docs-3x/reference/configuration/Configuration3x@entity_encoding/

There is also a template mode which is very useful.
https://www.tiny.cloud/docs/plugins/template/#templates
You can set a template file html file and set place holder then when user fill the text editor and save, it use your template, so you don't need to save the HTML into DB and user don't need to know how to code HTML.
lulu50Web application

Author

Commented:
leakim971

I'm using Ckeditor but I'm getting this error

 JavaScript runtime error: 'CKEDITOR' is undefined

I don't know why it's saying that.

<script src="~/Scripts/sample.js" type="text/javascript"></script>
<script src="~/Scripts/sf.js" type="text/javascript"></script>

<link href="~/Content/CWScss/samples.css" rel="stylesheet" type="text/css" />


<script>
    CKEDITOR.replace('editor1');
</script>

            <textarea name="editor1"></textarea>

Open in new window



and


if I use your example above it works but I don't want to point to outside website.

is there a way to get this file read from my local folder?

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>CKEditor</title>
                <script src="https://cdn.ckeditor.com/4.13.0/standard/ckeditor.js"></script>
        </head>
        <body>
                <textarea name="editor1"></textarea>
                <script>
                        CKEDITOR.replace( 'editor1' );
                </script>
        </body>
</html>

Open in new window

leakim971Multitechnician
Top Expert 2014

Commented:
follow the instruction from my last example (1,2a,2b,3)
lulu50Web application

Author

Commented:
Thank you

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial