How to insert Html into Baidu rich text editor ueditor

The main content of this article is to teach you how to insert Baidu Rich Text Editor into Html. Friends who are interested can learn about it. I hope it will be helpful to you.

In daily work, you will definitely need a rich text editor. The rich text editor is powerful and easy to use. If you use Baidu rich text editor, you first need to download the demo of Baidu editor, and then Create the ueditor.html file, introduce Baidu editor, then introduce it in the html file, and then use js to instantiate the editor. The code is as follows:

Go here and open the ueditor.html file above in the browser and you will see the following picture:

This is instantiation There are many functions in the initial editor, some of which may not be used by us at all. What should we do if we want to customize it? Don’t worry, Baidu provides customizable functions. Just use the js that instantiates the editor above. Change the code to the following code:

Refresh the ueditor.html page and you will see the changes:

If you want to customize any functions, just refer to the above In the ueditor.config.js file in the downloaded editor demo, add the corresponding string to the toolbars attribute:

        //工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的重新定义
        , toolbars: [[
            'fullscreen', 'source', '|', 'undo', 'redo', '|',
            'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', '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 can customize the editor For many functions, you only need to remove the '//' in front of the corresponding attribute. True means on, false means off and set it. For example:

        //elementPathEnabled
        //是否启用元素路径，默认是显示
        ,elementPathEnabled : false

        //wordCount
        ,wordCount:false          //是否开启字数统计
        //,maximumWords:10000       //允许的最大字符数

// Whether to automatically grow taller, the default is true
,autoHeightEnabled:false

After modifying the ueditor.config.js file according to the above code, refresh the page and you will see the difference:

The following The element path and word count have disappeared. Isn’t it more beautiful? O(∩_∩)O~

In practical application, we may also upload content edited by Baidu editor under a domain name (for example: A picture was uploaded under the domain name www.52lnamp.com), and the requirement is not only to display it under this domain name, but also to display it under other domain names. In this case, the picture will not exist,

This is because the default upload path in the Baidu Editor configuration file is a relative path, which means that the address of the image uploaded above is uploaded relative to the current domain name, and can only be displayed under the domain name you uploaded. Other domain names cannot be displayed.

If you want to display it on another domain name, you only need to modify the configuration file to an absolute path. Open the demo downloaded above, find the php/config.json file, and open it. Then you will see

where the attribute imageUrlPrefix can be added to the domain name: "imageUrlPrefix": "http://www.xxx.com", /* Image access Path prefix */

It should be noted that when adding a domain name, you must include http or https. Only if it is written in this way can it be displayed normally. If not, it will be displayed normally. When you quote, you will repeatedly add a domain name in front of it. A basic understanding of these is enough to meet daily needs. If you have other alternative needs, you can refer to the Baidu editor documentation. You are also welcome to supplement and learn from each other.

Related tutorials: javascript video tutorial

The above is the detailed content of How to insert Html into Baidu rich text editor ueditor. For more information, please follow other related articles on the PHP Chinese website!