artEditor 富文本編輯器實際方法

本文轉載自查看原文 2016-09-13 17:34 1574

界面效果

網址：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)] 字段。就可以完成路徑的保存了`

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 移動端富文本編輯器artEditor 富文本編輯器wangEditor以及使用方法富文本編輯器TinyMCE 5大富文本編輯器比較 kindEditor富文本編輯器富文本編輯器TinyMCE angular 富文本編輯器 django之富文本編輯器富文本編輯器(wangEditor) vue富文本編輯器