kindeditor和ueditor編輯器使用方法總結
阿新 • • 發佈：2019-01-07
1.編輯器的使用套路
- 使用編輯器，首先要引入編輯器的js檔案和css檔案.
- 使用內建的方法例項化物件，在例項化物件的時候，需要傳入編輯器佔位的id，也可以傳遞引數，或事件繫結.
- 傳遞引數會以json的形式傳遞進去，包括各種控制元件的自定義和某些特性的禁用.
2.kindeditor編輯器的使用
2-1.引入編輯器所需的資原始檔
<link rel="stylesheet" href="../themes/default/default.css" />
<script charset="utf-8" src="../kindeditor-min.js"></script 2-2.在html程式碼中放入編輯器的佔位符
<textarea name="content" style="width:700px;height:200px;visibility:hidden;">KindEditor</textarea>2-3.建立簡單的編輯器並繫結一個事件
<script language="javascript">
var editor;
KindEditor.ready(function 2-4.建立一個簡單的編輯器，並自定義控制元件
<script language="javascript" 2-5.生成三個不同的編輯器，使用三種不同的粘帖配置
<script language='javascript'>
KindEditor.ready(function(K) {
K.create('#content1', {
pasteType : 0
}); //為0表示不能向編輯器紅粘帖
K.create('#content2', {
pasteType : 1
}); //為1表示會把貼上板中的樣式過慮，保留純文字進行黏貼
K.create('#content3', {
pasteType : 2
}); //為2表示粘帖的時候，會把html樣式一起粘帖進去
});
</script>3.ueditor編輯器的使用
3-1.建立一個預設的ue編輯器
<!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="ueditor.config.js"></script>
<!-- 編輯器原始碼檔案 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 例項化編輯器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
</body>
</html>3-2.修改配置
1.直接改配置檔案(修改“ueditor.config.js”檔案，)
取消280行的註釋
//,autoHeightEnabled:true2.例項化物件的時候傳引數
var ue = UE.getEditor('container', {
autoHeight: false
});4.對比和總結
4-1.ue編輯器和ke編輯器的容器是不同的
一個是textarea標籤，一個是script標籤，如果是ke的textarea標籤的話，表單的引數名可以那麼name指定，而ue提交表單的預設引數名是editorValue，可以通過建立物件的時候傳入textarea引數解決。
ke的
<textarea name="content"></textarea>ue的
var ue = UE.getEditor('editor',{toolbars: [
['fullscreen', 'source', 'undo', 'redo'],
['bold', 'italic']
],textarea:"content"});