HTML編輯器
一、頁面效果
image.png
二赛不、引入JS、CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>編輯器</title>
<script th:src="@{/plugins/editor/tinymce.min.js}"></script>
<link rel="stylesheet" type="text/css" th:href="@{/plugins/layui/css/layui.css}"/>
</head>
<body>
<div class="layui-container" style="width: 100%;">
<div class="layui-row">
<div class="layui-col-md12">
<!-- 模塊名 -->
<blockquote class="layui-elem-quote" style="border-left: 5px solid #3385FF;">編輯器</blockquote>
<div id="content"></div>
<div class="layui-btn-container" style="margin-top: 10px">
<button type="button" class="layui-btn layui-btn-primary" onclick="setcontent()">填入數據</button>
<button type="button" class="layui-btn" onclick="getcontent()">讀取數據</button>
<button type="button" class="layui-btn layui-btn-normal" onclick="getbody()">獲取純文本</button>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" th:src="@{/plugins/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/javascript/jquery-2.1.4.js}"></script>
<script>
$(function () {
/**
* 編輯器初始化
*/
tinymce.init({
selector: '#content', //容器，可使用css選擇器
language: 'zh_CN', //調用放在langs文件夾內的語言包
toolbar: true, //工具欄
menubar: true, //菜單欄
branding: false, //右下角技術支持
inline: false, //開啟內聯(lián)模式
elementpath: false,
min_height: 400, //最小高度
height: 800, //高度
skin: 'oxide',
toolbar_sticky: true,
visualchars_default_state: true, //顯示不可見字符
image_caption: true,
paste_data_images: true,
relative_urls: false,
// remove_script_host : false,
removed_menuitems: 'newdocument', //清除“文件”菜單
plugins: "lists,hr, advlist,anchor,autolink,autoresize,charmap,code,codesample,emoticons,fullscreen,image,media,insertdatetime,link,pagebreak,paste,preview,print,searchreplace,table,textcolor,toc,visualchars,wordcount", //依賴lists插件
toolbar: 'bullist numlist anchor charmap emoticons fullscreen hr image insertdatetime link media pagebreak paste preview print searchreplace textcolor wordcount',
//選中時出現(xiàn)的快捷工具纹笼，與插件有依賴關系
images_upload_url: '/upload/uploadFile', /*后圖片上傳接口*/ /*返回值為json類型 {'location':'uploads/jpg'}*/
setup: function (editor) {
editor.on('change', function () {
editor.save();
});
}
});
})
</script>
三、數據操作
3.1 填入數據
/*填入初始數據*/
//tinyMCE.activeEditor.setContent("<h1>測試</h1><hr><h2>這是測試的數據<h2>");
/*
1苟跪、如果當前頁面只有一個編輯器：
獲取內容：tinyMCE.activeEditor.getContent()
設置內容：tinyMCE.activeEditor.setContent(“需要設置的編輯器內容”)
2廷痘、如果當前頁面有多個編輯器（下面的“[0]”表示第一個編輯器，以此類推）：
獲取內容：tinyMCE.editors[0].getContent()
設置內容：tinyMCE.editors[0].setContent(“需要設置的編輯器內容”)
*/
function setcontent() {
tinyMCE.activeEditor.setContent("<h1>設置內容1</h1>");
}
3.2 讀取數據
function getcontent() {
alert(tinyMCE.activeEditor.getContent());
}
3.3 獲取純文本
/*3件已、獲取不帶HTML標記的純文本內容：
var activeEditor = tinymce.activeEditor;
var editBody = activeEditor.getBody();
activeEditor.selection.select(editBody);
var text = activeEditor.selection.getContent( {'format' : 'text' } );*/
function getbody() {
var activeEditor = tinymce.activeEditor;
var editBody = activeEditor.getBody();
activeEditor.selection.select(editBody);
var text = activeEditor.selection.getContent({'format': 'text'});
alert(text);
}
3.4 上傳圖片
需要注意：修改 images_upload_url: 'xxxx/xxx' 為你的接口地址笋额； 返回格式
{
'location': 'uploads/jpg'
}
效果
image.png
鏈接地址
