首页 > 代码库 > artEditor 富文本编辑器实际方法

artEditor 富文本编辑器实际方法

2024-08-13 05:56:10   224人阅读

界面效果技术分享

 

 

网址：https://github.com/baixuexiyang/artEditor

 

引入文件：

技术分享

界面代码

 

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>artEditor</title>
 <meta http-equiv="Access-Control-Allow-Origin" content="*">
 <!-- 强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览 -->
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, minimal-ui">
 <!-- iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览 -->
 <meta name="apple-mobile-web-app-capable" content="yes">
 <link rel="stylesheet" href="http://www.mamicode.com/example/css/style.css">
 </head>
 <body>
 <div style="width:320px;margin: 0 auto;">
 <div class="publish-article-title">
 <div class="title-tips">标题</div>
 <input type="text" id="title" class="w100" placeholder="文章标题">
 </div>
 <div class="publish-article-content">
 <div class="title-tips">正文</div>
 <input type="hidden" id="target">
 <div class="article-content" id="content">
 </div>
 <div class="footer-btn g-image-upload-box">
 <div class="upload-button">
 <span class="upload"><i class="upload-img"></i>插入图片</span>
 <input class="input-file" id="imageUpload" type="file" name="fileInput" capture="camera" accept="image/*" style="position:absolute;left:0;opacity:0;width:100%;">
 </div>
 </div>
 </div>
 </div>
 <script src="http://www.mamicode.com/example/js/jquery-1.11.2.js"></script>
 <script src="http://www.mamicode.com/artEditor.min.js"></script>
 <script src="http://www.mamicode.com/example/js/index.js"></script>
 </body>
 </html>
 

 

 

JS代码

js:

$(‘#content‘).artEditor({    imgTar: ‘#imageUpload‘,    limitSize: 5,   // 兆    showServer: false, --此处要修改成true    uploadUrl: ‘‘,--此处是上传图片的方法    data: {},    uploadField: ‘image‘,    placeholader: ‘<p>请输入文章正文内容</p>‘,    validHtml: ["br"],    uploadSuccess: function(res) {      
      $("#demon").apppend("<img src="http://www.mamicode.com/‘+res.Date.Url+‘">")   此处作为接收路径
            },    uploadError: function(res) {        // something error        console.log(res);    }});




function demon01(){


 获取到路径传到SQL里面
  Url= $(‘#demon‘).getValue();//详细内容 获取图片方法
$.post(‘../../../路径位置‘),{

   Url:Url

}

}.function(data)
{

}


估计很多人跟我差不多在传入CS层的时候会发现穿不进去，报错，等，或者是危险代码，
这时候介意在CS层的上方加入
  [ValidateInput(false)]
字段。就可以完成路径的保存了

artEditor 富文本编辑器实际方法


联系
我们