Rich text editor learning (the use of Ckeditor)

• Introduction to several rich text editors

UEditor/kindeditor/simditor/bootstrap-wysiwyg/wangEditor/CKEditor/tinymce

https://www.cnblogs.com/linkstar/p/6858995.html

https://blog.csdn.net/lzc4869/article/details/77772695

• ckeditor使用--http://ckeditor.com/

FCKeditor is an open source WYSIWYG text editor specially used on web pages. It aims to be lightweight and can be used without too complicated installation steps. It can be combined with different programming languages ​​such as PHP, JavaScript, ASP, ASP.NET, ColdFusion, Java, and ABAP. The "FCK" in the name "FCKeditor" is an abbreviation of Frederico Caldeira Knabben, the author of this editor. It has now been renamed CKeditor.

CKEditor is a rich text web page editor written by javascript, which can fill in text, insert pictures, videos, Excel and other rich media information.

CKEditor includes Basic, Standard, and Full versions, you can choose one to download, and then you can add extensions. After importing the file and using it, the effect is the same. I don't know what happened. The three effects are the same, as follows:

Workaround: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar

Add label buttons to JSP pages, how many do you need to add ?

method one:

Method 2

Set it in the config.js file

jsp get ckeditor content

<ckeditor:editor editor="editor1" basePath="/model2msg/ckeditor/"/>

function showcontent(){

//var editor = CKEDITOR.instances.editor1;

var editor = CKEDITOR.instances['editor1'];

var selection = editor.getSelection();//Get the selected object

var content_with_tag = editor.getData();//Get tag + text

var content = editor.document.getBody().getText();//Get plain text

var content_selected = selection.getNative();//Get the selected text

}

http://669341085.iteye.com/blog/775334

The basic steps:

Put the ckditor file in the project resource directory

Import JS files

<script src="${ctx}/ckeditor/ckeditor.js"></script>

Write js below the textarea to be converted into rich text

<div>

<textarea rows="100" cols="20" id="opinion" name="opinion"></textarea>

<script type="text/javascript">CKEDITOR.replace('opinion');</script>

</div>

Use CKFinder to achieve image or file upload

Reference address

https://blog.csdn.net/javaee_sunny/article/details/52703283

https://blog.csdn.net/zhang__x/article/details/52776201

https://blog.csdn.net/latency_cheng/article/details/72470468

https://blog.csdn.net/u013238512/article/details/78294736