artEditor 富文本编辑器实际方法

界面效果

 

 

网址：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="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="example/js/jquery-1.11.2.js"></script>
  <script src="artEditor.min.js"></script>
  <script src="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="'+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)]
字段。就可以完成路径的保存了
posted @   SDdemon  阅读(1838)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
点击右上角即可分享
微信分享提示