UEditor富文本編輯器的簡單入門

時間 2020-06-08

標籤 ueditor 文本編輯器簡單入門简体版

原文原文鏈接

UEditor富文本編輯器的簡單入門

首先既然咱們要用UEditor插件，咱們就須要引入對應的文件，在UEditor官網下載，而後將static文件夾拷貝到咱們項目的根目錄下，接下來就是引用：

* 引入配置文件
   <script src="static/UE/ueditor.config.js"></script>
* 引入all.js
   <script src="static/UE/ueditor.all.min.js"></script>
* 引入parse.js
   <script src="static/UE/ueditor.parse.min.js"></script>

UEditor的盒子

<script id="editor" type="text/plain"></script>

實例UEditor

//實例化編輯器,自定義toolbar實例
var ue = UE.getEditor( 'editor', {
    //設置工具欄按鈕：全屏，源代碼，撤銷，重作，加粗，斜體，下劃線，刪除線，字符邊框
    toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold','italic','underline','test','strikethrough','fontborder']],
    //初始化編輯器的內容！
    initialContent: '歡迎訪問:https://rattenking.github.io/demo/editor/index.html',
    //初始化時，是否讓編輯器得到焦點true或false
    focus:false,
    //focus時自動清空初始化時的內容
    autoClearinitialContent:true,
    //編輯器層級的基數,能夠用來改變字體等
    initialStyle:'p{line-height:1em}',
    //提交到後臺的數據是否包含整個html字符串
    allHtmlEnabled:false,
    //默認的編輯區域寬度
    initialFrameWidth: null,
    //默認的編輯區域高度
    initialFrameHeight:250

});

完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>UEditor富文本編輯器</title>
    <script src="static/UE/ueditor.config.js"></script>
    <script src="static/UE/ueditor.all.min.js"></script>
    <script src="static/UE/ueditor.parse.min.js"></script>
</head>
<body>
    <h1>自定義toolbar實例</h1>
    <div><script id="editor" type="text/plain"></script></div>
    <p><button onclick="getContent(0)">獲取UE內容</button></p>
    <h1>完整toolbar實例</h1>
    <div><script id="editor1" type="text/plain"></script></div>
    <p><button onclick="getContent(1)">獲取UE內容</button></p>
    <script type="text/javascript"> //實例化編輯器,自定義toolbar實例 var ue = UE.getEditor( 'editor', { //設置工具欄按鈕：全屏，源代碼，撤銷，重作，加粗，斜體，下劃線，刪除線，字符邊框 toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold','italic','underline','test','strikethrough','fontborder']], //初始化編輯器的內容！ initialContent: '歡迎訪問:https://rattenking.github.io/demo/editor/index.html', //初始化時，是否讓編輯器得到焦點true或false focus:false, //focus時自動清空初始化時的內容 autoClearinitialContent:true, //編輯器層級的基數,能夠用來改變字體等 initialStyle:'p{line-height:1em}', //提交到後臺的數據是否包含整個html字符串 allHtmlEnabled:false, //默認的編輯區域寬度 initialFrameWidth: null, //默認的編輯區域高度 initialFrameHeight:250 }); //完整toolbar實例 //實例化一個不帶ui的編輯器,注意此處的實例化對象是baidu.editor下的Editor，而非baidu.editor.ui下的Editor var myeditor = UE.getEditor('editor1',{ initialContent: '歡迎訪問:https://rattenking.github.io/demo/editor/index.html',//初始化編輯器的內容 initialFrameWidth: null, initialFrameHeight: 250 }); //獲取UE內容 function getContent(num){ var obj = null; if(num === 0){ obj = ue; }else if(num === 1){ obj = myeditor; } var str = obj.getContent(); alert(str); } </script>    
</body>
</html>