layui富文本

最新推荐文章于 2024-05-01 04:36:25 发布

weixin_42538504

最新推荐文章于 2024-05-01 04:36:25 发布

阅读量279

点赞数

分类专栏： layui富文本文章标签：前端layui富文本Demo

本文链接：https://blog.csdn.net/weixin_42538504/article/details/102901103

版权

layui富文本专栏收录该内容

1 篇文章 0 订阅

订阅专栏

上源码

<!DOCTYPE html>
<html>
<head>
  <title>layui富文本</title>
  <link rel="stylesheet" type="text/css" href="./dist/css/layui.css">
  <style type="text/css">
  /*附件上传样式*/
  .layui-icon.layedit-tool-attachment input{
    position: absolute;
    font-size: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .01;
    filter: Alpha(opacity=1);
    cursor: pointer;
  }
    .layui-icon.layui-colorpicker-trigger-i.layui-icon-down,.layui-icon.layui-colorpicker-trigger-i.layui-icon-close{
      display: none;
    }
  </style>
</head>
<body>
  <div class="layui-form">
    <textarea id="editor" name="content" required lay-verify="" placeholder="详细描述" class="layui-textarea" autofocus></textarea>
  </div>
<script type="text/javascript" src="./dist/layui.all.js"></script>
<script type="text/javascript" src="./js/layedit.js"></script>
<script type="text/javascript">
    // 富文本
    layui.use(['layedit', 'layer', 'jquery'], function () {
          var $ = layui.jquery
              , layer = layui.layer
              , layedit = layui.layedit;
          layedit.set({
              //暴露layupload参数设置接口 --详细查看layupload参数说明
              uploadImage: {
                  url: '你的上传图片接口',
                  accept: 'image',
                  acceptMime: 'image/*',
                  exts: 'jpg|png|gif|bmp|jpeg',
                  size: 1024 * 10,
                  done: function (data) {
                      $('#LAY_layedit_1').contents().find('body').append('<img style="max-width:100%;" src="'+data.file_path+'">')
                  }
              }
              , uploadFiles: {
                  url: '你的上传接口',
                  accept: 'file',
                  acceptMime: 'file/*',
                  size: '20480',
                  autoInsert: true , //自动插入编辑器设置
                  done: function (data) {
                    console.log(data)
                      $('#LAY_layedit_1').contents().find('body').append('<a href="'+data.file_path+'">'+data.name+'</a>')
                  }
              }
              //测试参数
              , backDelImg: true
              //开发者模式 --默认为false
              , devmode: false
              //是否自动同步到textarea
              , autoSync: true
              //内容改变监听事件
              , onchange: function (content) {
                  // console.log(content);
              }
              //插入代码设置 --hide:false 等同于不配置codeConfig
              , codeConfig: {
                  hide: true,  //是否隐藏编码语言选择框
                  default: 'javascript', //hide为true时的默认语言格式
                  encode: true //是否转义
                  ,class:'layui-code' //默认样式
              }
              //新增iframe外置样式和js
              , quote:{
                  style: ['Content/css.css'],
                  //js: ['/Content/Layui-KnifeZ/lay/modules/jquery.js']
              }
              //自定义样式-暂只支持video添加
              //, customTheme: {
              //    video: {
              //        title: ['原版', 'custom_1', 'custom_2']
              //        , content: ['', 'theme1', 'theme2']
              //        , preview: ['', '/images/prive.jpg', '/images/prive2.jpg']
              //    }
              //}
              //插入自定义链接
              , customlink:{
                  title: ''
                  , href: 'https://www.layui.com'
                  ,onmouseup:''
              }
              , facePath: 'http://knifez.gitee.io/kz.layedit/Content/Layui-KnifeZ/'
              , devmode: true
              , videoAttr: ' preload="none" ' 
              //预览样式设置，等同layer的offset和area规则，暂时只支持offset ,area两个参数
              //默认为 offset:['r'],area:['50%','100%']
              //, previewAttr: {
              //    offset: 'r'
              //    ,area:['50%','100%']
              //}
              , tool: ['undo', 'redo', 'strong', 'italic', 'underline', 'del', 'addhr', '|','removeformat','colorpicker','fontBackColor', 'fontFomatt', 'fontfamily','fontSize', 'face', '|', 'left', 'center', 'right', '|', 'image','attachment','link'
                  
              ]
              , height: '500px' 
          });
          var ieditor = layedit.build('editor');
          //设置编辑器内容
          layedit.setContent(ieditor, "", false);
          $("#openlayer").click(function () {
              layer.open({
                  type: 2,
                  area: ['700px', '500px'],
                  fix: false, //不固定
                  maxmin: true,
                  shadeClose: true,
                  shade: 0.5,
                  title: "title",
                  content: 'add.html'
              });
          })
    })
</script>
</body>
</html>

Demo地址

weixin_42538504

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
layui富文本

上源码<!DOCTYPE html><html><head> <title>layui富文本</title> <link rel="stylesheet" type="text/css" href="./dist/css/layui.css"> <style type="text/css"> ...
复制链接

扫一扫