집 >웹 프론트엔드 >JS 튜토리얼 >Baidu 리치 텍스트 편집기 Ueditor에 HTML을 삽입하는 방법

Baidu 리치 텍스트 편집기 Ueditor에 HTML을 삽입하는 방법

little bottle앞으로: 2019-04-24 15:20:354694검색

이 글의 주요 내용은 Baidu Rich Text Editor를 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 파일을 브라우저에서 열면 다음 그림을 볼 수 있습니다.

인스턴스화 후의 초기 편집기입니다. 그중 일부는 우리가 전혀 사용하지 않을 수도 있습니다. 걱정하지 마세요. Baidu는 사용자 정의 가능한 기능을 제공합니다. 위의 인스턴스화된 편집기의 js 코드를 다음 코드로 변경하세요.

ueditor.html 페이지를 새로 고치면 변경 사항이 표시됩니다.

기능을 사용자 정의하려면 다운로드한 편집기 데모에 있는 ueditor.config.js 파일의

toolbars 속성만 참조하면 됩니다. 위에서 해당 문자열을 추가하세요. :

    <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.config.js 파일에서 해당 속성 앞에 있는 '//'만 제거하면 됩니다. 예를 들면 다음과 같습니다.

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

　　　 // 자동으로 키가 커지는지 여부, 기본값은 true

, autoHeightEnabled: false

위 코드에 따라 ueditor.config.js 파일을 수정한 후 페이지를 새로 고치면 표시됩니다. 차이점:

다음 요소 경로와 단어 수 통계는 사라졌습니다. 더 아름답습니까? O(∩_∩)O~

실제 응용 프로그램에서는 Baidu 편집자가 편집한 콘텐츠를 a로 업로드할 수도 있습니다. 도메인 이름(예: www.52lnamp.com 도메인 이름으로 업로드된 사진)은 이 도메인 이름 아래에 표시될 뿐만 아니라 이때 사진이 다른 도메인 이름에도 표시되어야 합니다.

바이두 에디터의 기본 구성 파일이 상대 경로이기 때문입니다. 즉, 위에 업로드한 이미지의 주소는 현재 도메인 이름 아래에만 표시될 수 있습니다. 업로드한 도메인 이름과 다른 도메인 이름은 표시할 수 없습니다.

다른 이름으로 업로드하려는 경우 도메인 이름에 표시하려면 구성 파일을 절대 경로로 수정하면 됩니다. 위에서 다운로드하여 php/config.json 파일을 찾으면

이 표시됩니다. 여기서 imageUrlPrefix 속성과 도메인 이름을 사용할 수 있습니다: "imageUrlPrefix": "http://www.xxx.com ", /* 이미지 액세스 경로 접두사*/

도메인 이름 추가시 반드시

http 또는 https를 가져와야 하며, 이렇게만 써야만 정상적으로 표시될 수 있으니 주의하세요. 추가하지 않으면 인용할 때 도메인 이름이 앞에 반복적으로 추가됩니다. 이에 대한 기본적인 이해만으로도 일상적인 요구 사항을 충족할 수 있으므로 Baidu 편집기 문서를 참조하세요. 서로 보완하고 배우는 것도 환영합니다.

Baidu 리치 텍스트 편집기 Ueditor에 HTML을 삽입하는 방법

관련 기사