Neditor 基於Ueditor的現代化編輯器

時間 2019-11-09

標籤 neditor 基於 ueditor 現代化編輯器简体版

原文原文鏈接

Neditor富文本編輯器介紹

Neditor 是咱們團隊基於 Ueditor 的一款富文本編輯器。
不論從功能仍是從其它各方面來說， Ueditor 都是一款無以替代的編輯器產品。
只是已經不符合現代化樣式的需求，因而咱們修改它的樣式，實現了這樣的效果：javascript

Demo: https://demo.neditor.notadd.com/html

入門部署和體驗

第一步：下載編輯器

下載 Neditor 最新版前端

或從源碼編譯：java

git clone 倉庫地址
npm install
grunt notadd

第二步：建立 demo 文件

解壓下載的包，在解壓後的目錄建立 demo.html 文件，填入下面的 html 代碼git

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>ueditor demo</title>
</head>
<body>
    <!-- 加載編輯器的容器 -->
    <script id="container" name="content" type="text/plain">這裏寫你的初始化內容</script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="neditor.config.js"></script>
    <!-- 編輯器源碼文件 -->
    <script type="text/javascript" src="ueditor.all.js"></script>
    <!-- 實例化編輯器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>
</body>
</html>

第三步：在瀏覽器打開demo.html

若是看到了下面這樣的編輯器，恭喜你，初次部署成功！github

自定義的參數

編輯器有不少可自定義的參數項，在實例化的時候能夠傳入給編輯器：shell

var ue = UE.getEditor('container', {
    autoHeight: false
});

配置項也能夠經過 neditor.config.js 文件修改，具體的配置方法請看前端配置項說明npm

設置和讀取編輯器的內容

通 getContent 和 setContent 方法能夠設置和讀取編輯器的內容瀏覽器

var ue = UE.getContent();
ue.ready(function(){
    //設置編輯器的內容
    ue.setContent('hello');
    //獲取html內容，返回: <p>hello</p>
    var html = ue.getContent();
    //獲取純文本內容，返回: hello
    var txt = ue.getContentTxt();
});

Ueditor 的更多API請看API 文檔編輯器