公式提供のエディタは機能が少なすぎる
フォントの色がありません。写真、ビデオ、その他の拡張子をアップロードできません
公式ドキュメントでは、layui を使用したシンプルなリッチ テキストが確かに非常に便利であることを明確に示していますが、不足している要素も多数あります。単純なタイトルや要素などはありません。編集者さん、最初は悩みました。一時的にリッチ テキストに切り替えるコストは高すぎます。幸いなことに、私はダニエルがlayeditに基づいて編集したリッチテキストを発見しました。
1. 公式文書によるレイエディットによる
layui.use('layedit', function(){
var layedit = layui.layedit;
/**
*layedit的上传图片
*/
layedit.set({
uploadImage: {
url: '/upload/layuiUploadOne' //接口url
,type: 'post' //默认post
}
});
layedit.build('demo', {
height: 500 //设置编辑器高度
});
});おおよその効果は以下の通りリッチテキストエディタ - オンラインデモ - Layui
<div style="width:100%;">
<textarea id="txtaContentGuDing" style="display: none;"></textarea>
</div>
<div id="hdContentGuDing" style="display: none;"><%=strTemplContentGuDing %></div>//赋值的时候后台取到的值临时放在这里
layui.use(['form', 'layedit', 'upload', 'laydate'], function () {
var form = layui.form;
var layedit = layui.layedit;
var laydate = layui.laydate;
var $ = layui.$;
var upload = layui.upload;
layedit.set({
uploadImage: {
url: '/layeditUPIMG.ashx', //接口url
type: 'post' //默认post
}
});
//layedit配置开始（固定备注）
//layedit.set一定要放在 layedit.build 前面，否则配置全局接口将无效。
indexsGuDing = layedit.build('txtaContentGuDing', {//'html', 'code',
tool: ['colorpicker', 'fontBackColor', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontfomatt', 'colorpicker', 'face', '|', 'left', 'center', 'right', '|', 'link', 'unlink'],
height: 300, // 设置编辑器高度
});
//layedit配置结束（固定备注）
//layedit赋值开始（固定备注）
var strContentGuDing = $("#hdContentGuDing").html(); //这里用DIV来临时存值，是因为内容有图片，所以不能用hidden控件
if (strContentGuDing != "") {
layedit.setContent(indexsGuDing, strContentGuDing, false);//flag是true，是追加模式，flag是false，赋值模式
}
//layedit赋值结束（固定备注）
});元の参照コード
<script type="text/javascript">
layui.use(['form', 'layedit', 'upload', 'laydate'], function () {
var form = layui.form;
var layedit = layui.layedit;
var laydate = layui.laydate;
var $ = layui.$;
var upload = layui.upload;
//普通图片上传
var uploadInst = upload.render({
elem: '#uploadImage'
, url: '/upload/layuiUploadOne'
, before: function (obj) {
//预读本地文件示例，不支持ie8
obj.preview(function (index, file, result) {
$('#showImage').attr('src', result); //图片链接（base64）
});
}
, done: function (res) {
//如果上传失败
if (res.code > 0) {
return layer.msg('上传失败');
}
$("#activeLogo").val(res.data.src);
//上传成功
return layer.msg('图片上传成功！');
}
, error: function () {
//演示失败状态，并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
});
//自定义日期格式
var myDate = new Date();
laydate.render({
elem: '#startTime',
type: 'datetime'
});
laydate.render({
elem: '#overTime',
type: 'datetime'
});
//上传图片
layedit.set({
uploadImage: {
url: '/upload/layuiUploadOne'
, type: 'post' //默认post
}
,
devmode: true
//是否自动同步到textarea
, autoSync: true
//内容改变监听事件
, onchange: function (content) {
console.log(content);
}
//插入代码设置 --hide:false 等同于不配置codeConfig
, codeConfig: {
hide: true, //是否隐藏编码语言选择框
default: 'javascript', //hide为true时的默认语言格式
encode: true //是否转义
, class: 'layui-code' //默认样式
}
, facePath: 'http://knifez.gitee.io/kz.layedit/Content/Layui-KnifeZ/'
, devmode: true
, videoAttr: ' preload="none" '
, tool: [
'html', //显示富文本源码
'undo', //撤销
'redo',//重做
'code', //代码
'strong',//加粗
'italic', //斜体
'underline', //下划线
'del', //删除线
'addhr', //水平线
'|',
'removeformat', //清楚文字样式
'fontFomatt',//段落格式
'fontfamily',//字体
'fontSize', //字体大小
'fontBackColor',//字体背景色
'colorpicker',//字体颜色
'face',//表情
'|',
'left', //左对齐
'center', //居中
'right', //右对齐
'|',
// 'link', //链接
// 'unlink', //清除链接
// 'images', //多图上传
'image_alt', //图片alt
// 'video',//视频
// 'attachment',//插入附件
// 'anchors'//添加锚点
, '|'
, 'table',//表格
'customlink'//自定义链接
, 'fullScreen',//全屏
'preview'//预览
]
});
var index = layedit.build('demo', {
height: 300 //设置编辑器高度，
});//建立编辑器
//将编辑器内容同步到textarea中
layedit.sync(index);
form.verify({
content: function (value) {
return layedit.sync(index);
}
});
form.on('submit(addActive)', function (data) {
console.log(data.field);//当前容器的全部表单字段，名值对形式：{name: value}
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
});
</script>GITソースコードKz.layedit:layui v2.4.3をベースとしたlayui.layeditの拡張 HTMLソースコードモード、テーブル挿入、画像一括アップロード、画像挿入、ハイパーリンク挿入機能最適化、ビデオ挿入機能、フルスクリーン機能を追加、段落、フォントカラー、背景色の設定、アンカーポイントの設定などの機能があります。 Kz.layedit パッケージのリソース アドレス: https://download.csdn.net/download/wybshyy/88314305
0点