Baidu リッチテキストエディター ueditor に HTML を挿入する方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Baidu リッチテキストエディター ueditor に HTML を挿入する方法

little bottle

Apr 24, 2019 pm 03:20 PM

html

この記事の主な内容は、Baidu リッチテキストエディターを Html に挿入する方法を説明することです。興味のある友人はそれについて学ぶことができます。お役に立てれば幸いです。

日常業務では、必ずリッチテキストエディターが必要になります。リッチテキストエディターは強力で使いやすいです。Baidu リッチテキストエディターを使用する場合は、まず Baidu エディターのデモをダウンロードする必要があります。次に、ueditor.html ファイルを作成し、Baidu エディタを導入し、それを HTML ファイルに導入し、js を使用してエディタをインスタンス化します。コードは次のとおりです。

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

ログイン後にコピー

ここに移動し、ブラウザで上記の ueditor.html ファイルを開くと、次の図が表示されます。

This初期エディターには多くの機能があり、その中にはまったく使用できないものもあります。カスタマイズしたい場合はどうすればよいですか?心配しないでください。Baidu にはカスタマイズ可能な機能が用意されています。インスタンス化する js を使用するだけです。コードを次のコードに変更します:

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

ログイン後にコピー

ueditor.html ページを更新すると、変更が表示されます:

機能をカスタマイズするには、上記を参照してください。ダウンロードしたエディターデモの ueditor.config.js ファイルで、対応する文字列を toolbars 属性に追加します:

        //工具栏上的所有的功能按钮和下拉框，可以在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 ファイルはエディターをカスタマイズできます。多くの関数では、対応する属性の前にある '//' を削除するだけで済みます。True はオンを意味し、False はオフを意味します。例:

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

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

ログイン後にコピー

//自動的に身長を伸ばすかどうか。デフォルトは true
,autoHeightEnabled:false

上記のコードに従って ueditor.config.js ファイルを変更した後、ページを更新すると、違いがわかります:

以下、要素パスと文字数が消えていますが、もっと綺麗になっていませんか?O(∩_∩)O~

実際の応用では、 Baidu 編集者が編集したコンテンツをドメイン名でアップロードすることもできます (例: 写真はドメイン名 www.52lnamp.com でアップロードされました)。要件は、このドメイン名でコンテンツを表示するだけでなく、コンテンツを表示することも必要です。この場合、画像は存在しません。

これは、Baidu Editor 設定ファイルのデフォルトのアップロードパスが相対パスであるためです。つまり、上にアップロードされた画像のアドレスは、現在のドメイン名を基準にしてアップロードされており、アップロードしたドメイン名でのみ表示できます。他のドメイン名は表示できません。

別のドメイン名で表示したい場合は、構成ファイルを絶対パスに指定します。上記でダウンロードしたデモを開き、php/config.json ファイルを見つけて開きます。そうすると、属性 imageUrlPrefix が指定できる

が表示されます。ドメイン名に追加する必要があります: "imageUrlPrefix": "http://www.xxx.com", /* 画像アクセスパスのプレフィックス */

ドメイン名を追加するときは、次のことを行う必要があることに注意してください。 include http or https. このように記述した場合のみ正常に表示されます。そうでない場合は正常に表示されます。引用する場合、ドメインを追加することを繰り返しますこれらの基本を理解していれば、日々のニーズを満たすのに十分です。他の代替ニーズがある場合は、Baidu エディタのドキュメントを参照してください。また、お互いに補足したり学習したりすることも歓迎します。

関連チュートリアル: JavaScript ビデオチュートリアル

以上がBaidu リッチテキストエディター ueditor に HTML を挿入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。