suchen

Heim >Web-Frontend >js-Tutorial >So fügen Sie HTML in den Baidu-Rich-Text-Editor ueditor ein

So fügen Sie HTML in den Baidu-Rich-Text-Editor ueditor ein

little bottle
little bottlenach vorne
2019-04-24 15:20:354688Durchsuche

Der Hauptinhalt dieses Artikels besteht darin, Ihnen beizubringen, wie Sie den Baidu Rich Text Editor in HTML einfügen. Ich hoffe, dass er Ihnen weiterhilft.

Bei der täglichen Arbeit benötigen Sie auf jeden Fall einen Rich-Text-Editor. Der Rich-Text-Editor ist leistungsstark und einfach zu verwenden. Wenn Sie den Baidu-Rich-Text-Editor verwenden, müssen Sie zunächst die Demo des Baidu-Editors herunterladen Erstellen Sie dann die Datei ueditor.html, führen Sie den Baidu-Editor ein, führen Sie ihn dann in die HTML-Datei ein und verwenden Sie dann js, um den Editor zu instanziieren. Der Code lautet wie folgt: 

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

Gehen Sie hierher und öffnen Sie die Datei ueditor.html oben im Browser. Sie sehen das folgende Bild:

Dies ist eine Instanziierung. Es gibt viele Funktionen im ursprünglichen Editor, von denen einige möglicherweise überhaupt nicht verwendet werden. Machen Sie sich keine Sorgen, Baidu bietet einfach anpassbare Funktionen Instanziiert den obigen Editor. Ändern Sie den Code in den folgenden 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>

Aktualisieren Sie die Seite ueditor.html und Sie werden die Änderungen sehen:

Welche Funktion Sie anpassen möchten, beziehen Sie sich einfach auf das obige. Fügen Sie in der Datei ueditor.config.js in der heruntergeladenen Editor-Demo die entsprechende Zeichenfolge zum Attribut toolbars hinzu: 

        //工具栏上的所有的功能按钮和下拉框，可以在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;
        ]]

ueditor.config. js-Datei kann den Editor anpassen. Für viele Funktionen müssen Sie nur das „//“ vor dem entsprechenden Attribut entfernen, „True“ bedeutet „An“, „False“ bedeutet „Aus“ und es festlegen. Ob automatisch größer werden soll, die Standardeinstellung ist true

,autoHeightEnabled:false


Nachdem Sie die Datei ueditor.config.js gemäß dem obigen Code geändert haben, aktualisieren Sie die Seite und Sie werden den Unterschied sehen:

Das Folgende Der Elementpfad und die Wortanzahl sind nicht verschwunden. O(∩_∩)O~

In der tatsächlichen Anwendung kann auch von Baidu Editor bearbeitete Inhalte unter einem Domainnamen hochladen (z. B. ein Bild wurde unter dem Domainnamen www.52lnamp.com hochgeladen), und die Anforderung besteht nicht nur darin, es unter diesem Domainnamen anzuzeigen, sondern auch darin, es anzuzeigen In diesem Fall ist das Bild nicht vorhanden.

Dies liegt daran, dass der Standard-Upload-Pfad in der Konfigurationsdatei von Baidu Editor ein relativer Pfad ist, was bedeutet, dass die Adresse des oben hochgeladenen Bildes ist wird relativ zum aktuellen Domänennamen hochgeladen und kann nur unter dem von Ihnen hochgeladenen Domänennamen angezeigt werden.

Wenn Sie ihn unter einem anderen Domänennamen anzeigen möchten, müssen Sie ihn nur ändern Fügen Sie der Konfigurationsdatei einen absoluten Pfad hinzu. Öffnen Sie die oben heruntergeladene Demo, suchen Sie die Datei php/config.json und öffnen Sie sie. Dann sehen Sie

mit dem Attribut imageUrlPrefix kann mit dem Domainnamen hinzugefügt werden: „imageUrlPrefix“: „http://www.xxx.com“, /* Bildzugriffspfad-Präfix */

Es ist zu beachten, dass Sie beim Hinzufügen eines Domainnamens muss

http

oder https enthalten. Nur wenn es auf diese Weise geschrieben ist, wird es normal angezeigt Ein grundlegendes Verständnis davon reicht aus, um den täglichen Bedarf zu decken. Sie können sich auch gerne an die Dokumentation des Baidu-Editors wenden Verwandte Tutorials:

Javascript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo fügen Sie HTML in den Baidu-Rich-Text-Editor ueditor ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript json html 字符串 JS http https
Stellungnahme：
Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Eine kurze Diskussion über die Sortiermethode von ListNächster Artikel：Eine kurze Diskussion über die Sortiermethode von List

In Verbindung stehende Artikel

Mehr sehen