2. 程式人生 > 其它 >百度編輯器的使用

百度編輯器的使用

阿新 • • 發佈：2020-12-16

技術標籤：phpthinkphp

拿自己需要的程式碼即可，

{extend name="public/public"}
{block name="mains"}
<style>
	.edui-editor.edui-default{
		width: 99% !important;
	}
</style>
    <link rel="stylesheet" type="text/css" href="__STATIC__/public/css/webuploader.css"
 
>
	<nav aria-label="breadcrumb">
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="{:url('tongshop/shop_list_tong')}">通用產品列表</a></li>
			<li class="breadcrumb-item active" aria-current="page"
 
>新增產品</li>
		</ol>
	</nav>
	<form method="post" action="{:url('tongshop/shop_add')}" enctype="multipart/form-data" style="padding-bottom: 100px;">
		<div class="form-group">
			<label for="title">產品名稱</label>
 

			<input type="text" class="form-control" id="title" name="title">
		</div>
		<div class="form-group">
			<label for="title_en">英文產品名稱</label>
			<input type="text" class="form-control" id="title_en" name="title_en">
		</div>
		
		
		<div class="form-group">
			<label for="order">排序</label>
			<input type="number" value="10" class="form-control" id="order" value="10" name="order">
			<small id="emailHelp" class="form-text text-muted">值越大排在越前面，可不填（預設排序）</small>
		</div>
		<!-- <div class="form-group">
			<label for="order">產品類別</label><br>
			<select id="inputState" onchange="list_classshop(this.value)" name="classify" class="form-control">
				<option selected value="1">通用產品</option>
				<option value="2">行業定製</option>
			</select>
		</div> -->
		<div class="form-group">
			<label for="order">產品分類</label><br>
			<select id="inputStates" name="class_id" class="form-control">
				{volist name="class" id="dat" key="key"}
					<option value="{$dat.id}">{$dat.name}</option>
				{/volist}
			</select>
		</div>
		<div class="form-group">
			<label>中文描述</label><br>
			<textarea rows="" cols="" name="describe" id="describe" style="display: none;"></textarea>
			<script id="describe_a" name="describe" type="text/plain">
			</script>
		</div>
		<div class="form-group">
			<label>英文描述</label><br>
			<textarea rows="" cols="" name="describe_en" id="describe_en" style="display: none;"></textarea>
			<script id="describe_b" name="describe_en" type="text/plain">
			</script>
		</div>
		<!-- <div class="form-group">
			<label>產品縮率圖</label><br>
			<input type="file" onchange="fun1(this,1)" name="img_ico" id="uploadaa" style="display: none;">
			<svg width="1em" height="1em" id="uploadbb" viewBox="0 0 16 16" class="bi bi-cloud-upload cursoryhj uploadyhj" fill="currentColor"
			 xmlns="http://www.w3.org/2000/svg">
				<path fill-rule="evenodd" d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z" />
				<path fill-rule="evenodd" d="M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3z" />
			</svg>
			<img style="border-radius: unset;margin-left: 20px;" height="66" src="" id="up1" class="img-circle elevation-2">
		</div> -->
		<div class="form-group">
			<label>產品圖片</label><br>
			<input type="file" onchange="fun1(this,2)" name="img" id="uploadcc" style="display: none;">
			<!--dom結構部分-->
			<svg width="1em" height="1em" id="uploaddd" viewBox="0 0 16 16" class="bi bi-cloud-upload cursoryhj uploadyhj" fill="currentColor"
			 xmlns="http://www.w3.org/2000/svg">
				<path fill-rule="evenodd" d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z" />
				<path fill-rule="evenodd" d="M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3z" />
			</svg>
			<img style="border-radius: unset;margin-left: 20px;" height="66" src="" id="up2" class="img-circle elevation-2">
		</div>
		<!-- <div class="form-group">
			<label>設計圖</label><br>
			<input type="file" onchange="fun1(this,3)" name="design_img" id="uploadee" style="display: none;">
			<svg width="1em" height="1em" id="uploadff" viewBox="0 0 16 16" class="bi bi-cloud-upload cursoryhj uploadyhj" fill="currentColor"
			 xmlns="http://www.w3.org/2000/svg">
				<path fill-rule="evenodd" d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z" />
				<path fill-rule="evenodd" d="M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3z" />
			</svg>
			<img style="border-radius: unset;margin-left: 20px;" height="66" src="" id="up3" class="img-circle elevation-2">
		</div> -->
		<div class="form-group">
			<label for="order">狀態</label><br>
			<div class="form-check form-check-inline">
				<input class="form-check-input" type="radio" name="static" checked="checked" id="inlineRadio1" value="1">
				<label class="form-check-label" for="inlineRadio1">正常</label>
			</div>
			<div class="form-check form-check-inline">
				<input class="form-check-input" type="radio" name="static" id="inlineRadio2" value="0">
				<label class="form-check-label" for="inlineRadio2">禁用</label>
			</div>
		</div>
		<button type="submit" class="btn btn-primary" onclick="getstring()">提交</button>
	</form>
	<script type="text/javascript" src="__STATIC__/public/js/jquery.min.js"></script>
	<script type="text/javascript" src="__STATIC__/public/js/webuploader.js"></script>
	<!-- 配置檔案 -->
	<script type="text/javascript" src="__STATIC__/ueditor/ueditor.config.js"></script>
	<!-- 編輯器原始碼檔案 -->
	<script type="text/javascript" src="__STATIC__/ueditor/ueditor.all.js"></script>
	<!-- 例項化編輯器 -->
	<script type="text/javascript">
		var ue = UE.getEditor('describe_a');
		var ue = UE.getEditor('describe_b');
	</script>
	<script type="text/javascript">
		function getstring() {
			document.getElementById('describe').value = UE.getEditor('describe_a').getContent();
			document.getElementById('describe_en').value = UE.getEditor('describe_b').getContent();
		}
		function fun1(obj,index) {
			var file=$(obj)[0].files[0];    //獲取檔案資訊
			var imgdata='';
			if(file)
			{
				var reader=new FileReader();  //呼叫FileReader
				reader.readAsDataURL(file); //將檔案讀取為 DataURL(base64)
				reader.onload=function(evt){   //讀取操作完成時觸發。
					// $("#img").attr('src',evt.target.result)  //將img標籤的src繫結為DataURL
					$('#up'+index).attr('src',evt.target.result);
				};
			}
			else{
				alert("上傳失敗");
			}
		}
		function list_classshop(obj){
			var str='';
			$.get("{:url('tongshop/class_lists')}",{classify:obj},function(data){
				data=eval(data);
				// console.log(data[0]['id']);
				for(i=0;i<data.length;i++){
					str +="<option selected value='"+data[i]['id']+"'>"+data[i]['name']+"</option>";
				}
				$('#inputStates').html(str);
			})
		}
	</script>
{/block}

相關推薦

jfinal 整合百度編輯器ueditor

>>> 先來張效果圖 一，準備工作搭建好的jfinal 專案，百度編輯器官網下載ueditor和相應的java包

百度編輯器的使用

技術標籤：phpthinkphp 拿自己需要的程式碼即可， {extend name="public/public"}

從word中複製內容包含圖片到百度編輯器中

​ 由於工作需要必須將word文件內容貼上到編輯器中使用 但發現word中的圖片粘貼後變成了file:///xxxx.jpg這種內容，如果上傳到伺服器後其他人也訪問不了，網上找了很多編輯器發現沒有一個能直接解決這個問題

從word中複製圖片到百度編輯器中

​ 圖片的複製無非有兩種方法，一種是圖片直接上傳到伺服器，另外一種轉換成二進位制流的base64碼

百度編輯器實現WORD貼上公式自動上傳

​ 由於工作需要必須將word文件內容貼上到編輯器中使用 但發現word中的圖片粘貼後變成了file:///xxxx.jpg這種內容，如果上傳到伺服器後其他人也訪問不了，網上找了很多編輯器發現沒有一個能直接解決這個問題

如何複製word的圖文到百度編輯器中自動上傳

​ 圖片的複製無非有兩種方法，一種是圖片直接上傳到伺服器，另外一種轉換成二進位制流的base64碼

百度編輯器在編輯視訊時src丟失的問題

這個問題困擾很久 ，上網查詢 發現也有遇到這一同一問題 ueditor 上傳成功 預覽成功 檢視html 程式碼如下：

百度編輯器可以如何直接複製word的圖文內容到編輯器中?

​ 圖片的複製無非有兩種方法，一種是圖片直接上傳到伺服器，另外一種轉換成二進位制流的base64碼

百度編輯器 圖片貼上上傳，實現圖文貼上，圖片自動上傳

​ 由於工作需要必須將word文件內容貼上到編輯器中使用 但發現word中的圖片粘貼後變成了file:///xxxx.jpg這種內容，如果上傳到伺服器後其他人也訪問不了，網上找了很多編輯器發現沒有一個能直接解決這個問題

百度編輯器(UEditor)上傳圖片word

​ Chrome+IE預設支援貼上剪下板中的圖片，但是我要釋出的文章存在word裡面，圖片多達數十張，我總不能一張一張複製吧？

word文件的圖片怎麼儲存到百度編輯器上

​ 這種方法是servlet，編寫好在web.xml裡配置servlet-class和servlet-mapping即可使用 後臺（服務端）java服務程式碼：（上傳至ROOT/lqxcPics資料夾下）

百度編輯器在https中插入地圖不顯示的解決方法

1.將引入的介面更改為： 更改之前： <script type=\"text/javascript\" src=\"http://api.map.baidu.com/api?v=1.1&services=true\"></script>

百度編輯器貼上圖片自動上傳到伺服器(Java版)

​ 1.4.2之後官方並沒有做功能的改動，1.4.2在word複製這塊沒有bug，其他版本會出現手動無法轉存的情況

thinkphp5.1中適配百度富文字編輯器ueditor

百度富文字編輯器ueditor雖然很老，但是功能齊全，我近期需要能批量貼上圖片的功能，但是找不到，很無奈。然後現在就分享一下如何把ueditor適配到thinkphp5.1，有知道如何批量上傳圖片的艾特我啊，謝謝分享

百度ueditor編輯器

官網地址：http://ueditor.baidu.com/website/ 下載地址：http://ueditor.baidu.com/website/download.html

小tips：vue結合百度UEditor富文字編輯器實現vue-ueditor-wrap

1.下載vue-ueditor-wrap cnpm i vue-ueditor-wrap -S 下載最新的 UEditor 資原始檔放入你專案的靜態資源目錄中（比如 static 或者 public，這取決於你專案的配置）。

文章模組——文章新增百度富文字編輯器

1.下載百度富文字編輯器 下載地址 http://ueditor.baidu.com/website/download.html 2.把下載包移動到指定位置

百度富文字編輯器的使用

問題描述： 使用富文字時，需要做到使用公司自己的自定義表情，於是研究一番百度富文字，記錄一下百度富文字的使用方法（基於Vue）

edui 富文字編輯_百度umeditor富文字編輯器外掛擴充套件

技術標籤：edui 富文字編輯 富文字編輯器在WEB開發中經常用到,個人比較喜歡用百度出的ueditor這款,ueditor這款本身支援外掛擴充套件的,但是ueditor的mini版本 umeditor 就沒有那麼方便了,不過找了很多資料根據這

vue專案中使用百度富文字編輯器ueditor

第一步，安裝依賴，並且把ueditor整個資料夾放入public裡邊 第二步，在你需要編輯的地方引入，或者main.js中全域性引入