In their daily work with, certainly helpful to the rich text editor when the rich text editor is powerful and easy to use, I use Baidu rich text editor, you first need to download a good Baidu demo editor ,
Then create a file ueditor.html introduced Baidu editor and then introduced in the html file, and then use the editor to js example, as follows:
<!DOCTYPE html> <html> <head> <title>百度编辑器</title> </head> <body> <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"></script> <script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script> <script id="editor" type="text/plain" name="gdesc" style="width:100%;height:350px;"></script> <script type="text/javascript"> //实例化编辑器 var ue = UE.getEditor('editor', {}); </script> </body> </html>
Open here above ueditor.html can see the file in the browser as shown below:
This is the instantiation of the initial editor, which has a lot of features, part of which we may be entirely invisible, want to customize how to do it? Do not catch anxious, Baidu provides customizable functions, the examples of the above js code editor changed the following code:
<Script type = "text / JavaScript">
// instance editor
var UE = UE.getEditor ( 'Editor' , {
Toolbars: [
[
'Use the undo', // undo
'Bold', // bold
'underline' , // underline
'preview', // preview
'Horizontal', // dividing line
'inserttitle', // insert title
'cleardoc', // empty document
'fontFamily', // Font
'fontsize',// size
'paragraph',// Paragraph Format
'simpleupload', // Single Image Upload
'InsertImage', // plurality FIG Upload
'Attachment', // annex
'Music', // music
'InsertTable', // Insert Table
'Emotion', // expression
'insertvideo', // video
'justifyleft', // left-aligned
'justifyright', // ranking right-aligned
'justifycenter', // centered on
'justifyjustify',// Justified
'ForeColor', // font color
'Fullscreen', // Full Screen
'edittip', // editing tips
'customStyle', // custom title
'Template', // template
]
]
});
</ Script>
Ueditor.html refresh the page you'll see the changes:
Want to customize what features need only refer to the above ueditor.config.js download files in the demo editor toolbars property, the corresponding string can be added to it:
// All function buttons and drop-down box on the toolbar, you can choose to re-define their needs in an instance new editor , Toolbars: [[ 'Fullscreen', 'Source', '|', 'Use the undo', ' redo ',' | ' , ' Bold ',' Italic ',' underline ',' fontborder ',' strikethrough ',' Superscript ',' subscript ',' removeformat ',' formatmatch ',' autotypeset ',' blockquote ' , 'pasteplain', '|', 'the ForeColor', 'the BackColor', 'insertorderedlist', 'insertunorderedlist', 'selectAll', 'cleardoc', '|' , 'rowspacingtop', 'rowspacingbottom', 'lineHeight', ' | ' , ' customStyle ',' paragraph ',' fontFamily ','fontsize', '|', 'directionalityltr', 'directionalityrtl', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|', 'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|', 'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|', 'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|', 'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|', 'print', 'preview', 'searchreplace', 'drafts', 'help' ]]
ueditor.config.js file editor can customize many features, properties only need to correspond to the front '//' is removed, true is open, can be set to false Off example:
// elementPathEnabled // whether to enable the element path, the default is to show , elementPathEnabled: false // wordCount , wordCount: false // whether to open the word count // , maximumWords: 10000 // maximum number of characters allowed
// whether to automatically grow taller, default to true
, autoHeightEnabled: false
Ueditor.config.js finished modifying the file in accordance with the above code, refresh the page you'll see a different place:
The following elements of the path and word count are gone, it is not a more beautiful O (∩_∩) O ~
We also have practical applications in a domain name may upload content Baidu editor (for example: Upload a picture at www.52lnamp.com domain name), and the demand is not only to show in this domain, you also need in other domain name can be displayed, then the situation will be the picture that does not exist,
This is because the configuration file Baidu editor default upload path is relative, that is to say the address above picture upload is uploaded, only in the domain name you upload can show relative to the current domain name, the domain name is the other did not show up,
If you want to display on another domain, then only need to modify the configuration file as an absolute path on it, open the downloaded above demo, find php / config.json file, you will see open
Which imageUrlPrefix this property to add domain: "imageUrlPrefix": "http://www.xxx.com", / * image access path prefix * /
Note that when adding the domain name must bring http or https, the only way to write out a normal display, without words when you refer to will be repeated in front of the domain name plus a basic understanding of these sufficient to meet daily needs , there are other alternative requirements can refer to Baidu editor documentation are also welcome to add mutual learning.
Transfer "https://www.cnblogs.com/52lnamp/p/9232919.html"