How to insert Html into Baidu rich text editor ueditor-JS Tutorial-php.cn

How to insert Html into Baidu rich text editor ueditor

little bottle

Release： 2019-04-24 15:20:59

forward

4639 people have browsed it

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:

<!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(&#39;editor&#39;, {});
    </script>
</body>
</html>

Copy after login

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:

    <script type="text/javascript">
        //实例化编辑器
        var ue = UE.getEditor(&#39;editor&#39;, {
        toolbars: [
            [
                &#39;undo&#39;, //撤销
                &#39;bold&#39;, //加粗
                &#39;underline&#39;, //下划线
                &#39;preview&#39;, //预览
                &#39;horizontal&#39;, //分隔线
                &#39;inserttitle&#39;, //插入标题
                &#39;cleardoc&#39;, //清空文档
                &#39;fontfamily&#39;, //字体
                &#39;fontsize&#39;, //字号
                &#39;paragraph&#39;, //段落格式
                &#39;simpleupload&#39;, //单图上传
                &#39;insertimage&#39;, //多图上传
                &#39;attachment&#39;, //附件
                &#39;music&#39;, //音乐
                &#39;inserttable&#39;, //插入表格
                &#39;emotion&#39;, //表情
                &#39;insertvideo&#39;, //视频
                &#39;justifyleft&#39;, //居左对齐
                &#39;justifyright&#39;, //居右对齐
                &#39;justifycenter&#39;, //居中对
                &#39;justifyjustify&#39;, //两端对齐
                &#39;forecolor&#39;, //字体颜色
                &#39;fullscreen&#39;, //全屏
                &#39;edittip &#39;, //编辑提示
                &#39;customstyle&#39;, //自定义标题
                &#39;template&#39;, //模板
                 ]
            ]
        });
    </script>

Copy after login

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: [[
            &#39;fullscreen&#39;, &#39;source&#39;, &#39;|&#39;, &#39;undo&#39;, &#39;redo&#39;, &#39;|&#39;,
            &#39;bold&#39;, &#39;italic&#39;, &#39;underline&#39;, &#39;fontborder&#39;, &#39;strikethrough&#39;, &#39;superscript&#39;, &#39;subscript&#39;, &#39;removeformat&#39;, &#39;formatmatch&#39;, &#39;autotypeset&#39;, &#39;blockquote&#39;, &#39;pasteplain&#39;, &#39;|&#39;, &#39;forecolor&#39;, &#39;backcolor&#39;, &#39;insertorderedlist&#39;, &#39;insertunorderedlist&#39;, &#39;selectall&#39;, &#39;cleardoc&#39;, &#39;|&#39;,
            &#39;rowspacingtop&#39;, &#39;rowspacingbottom&#39;, &#39;lineheight&#39;, &#39;|&#39;,
            &#39;customstyle&#39;, &#39;paragraph&#39;, &#39;fontfamily&#39;, &#39;fontsize&#39;, &#39;|&#39;,
            &#39;directionalityltr&#39;, &#39;directionalityrtl&#39;, &#39;indent&#39;, &#39;|&#39;,
            &#39;justifyleft&#39;, &#39;justifycenter&#39;, &#39;justifyright&#39;, &#39;justifyjustify&#39;, &#39;|&#39;, &#39;touppercase&#39;, &#39;tolowercase&#39;, &#39;|&#39;,
            &#39;link&#39;, &#39;unlink&#39;, &#39;anchor&#39;, &#39;|&#39;, &#39;imagenone&#39;, &#39;imageleft&#39;, &#39;imageright&#39;, &#39;imagecenter&#39;, &#39;|&#39;,
            &#39;simpleupload&#39;, &#39;insertimage&#39;, &#39;emotion&#39;, &#39;scrawl&#39;, &#39;insertvideo&#39;, &#39;music&#39;, &#39;attachment&#39;, &#39;map&#39;, &#39;gmap&#39;, &#39;insertframe&#39;, &#39;insertcode&#39;, &#39;webapp&#39;, &#39;pagebreak&#39;, &#39;template&#39;, &#39;background&#39;, &#39;|&#39;,
            &#39;horizontal&#39;, &#39;date&#39;, &#39;time&#39;, &#39;spechars&#39;, &#39;snapscreen&#39;, &#39;wordimage&#39;, &#39;|&#39;,
            &#39;inserttable&#39;, &#39;deletetable&#39;, &#39;insertparagraphbeforetable&#39;, &#39;insertrow&#39;, &#39;deleterow&#39;, &#39;insertcol&#39;, &#39;deletecol&#39;, &#39;mergecells&#39;, &#39;mergeright&#39;, &#39;mergedown&#39;, &#39;splittocells&#39;, &#39;splittorows&#39;, &#39;splittocols&#39;, &#39;charts&#39;, &#39;|&#39;,
            &#39;print&#39;, &#39;preview&#39;, &#39;searchreplace&#39;, &#39;drafts&#39;, &#39;help&#39;
        ]]

Copy after login

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       //允许的最大字符数

Copy after login

// 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!