artEditor 富文本编辑器实际方法

Posted SDdemon

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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)]
字段。就可以完成路径的保存了

以上是关于artEditor 富文本编辑器实际方法的主要内容，如果未能解决你的问题，请参考以下文章

android 记一次富文本加载之路

android 记一次富文本加载之路

轻量级富文本编辑器quill editor结合iview的使用

TinyMCE（富文本编辑器）

为啥在div里面做富文本编辑没有作用

javascript中的富文本编辑