cari

Rumah >hujung hadapan web >tutorial js >jquery boleh disesuaikan dalam talian UEditor editor_jquery

jquery boleh disesuaikan dalam talian UEditor editor_jquery

WBOY
WBOYasal
2016-05-16 15:31:491561semak imbas

UMeditor, yang merupakan versi mini editor web teks kaya WYSIWYG UEditor yang dibangunkan oleh jabatan R&D bahagian hadapan web Baidu, ringan, boleh disesuaikan, memfokus pada pengalaman pengguna dan membenarkan penggunaan dan pengubahsuaian kod percuma, sesuai untuk bahagian hadapan -tamat kotak balasan cepat dan ringkas atau editor kandungan bahagian belakang.

Penggunaan:

Oleh kerana pemalam ini dibangunkan oleh "Pasukan R&D FEX Front-end" Baidu, ia mempunyai dokumen rasmi bahasa Cina yang kukuh dan terperinci Tujuan artikel ini hanya untuk memberitahu rakan-rakan bahawa terdapat palam yang begitu baik. dalam, jadi manual dokumentasi, muat turun dan contoh semuanya Pautan ke rasmi.
Muat turun versi bahasa yang anda perlukan, kemudian nyahzipnya, dan buat fail html bernama demo dalam direktori yang dinyahzip Kodnya adalah seperti berikut 

<!DOCTYPE HTML>
<html>
 
<head>
 <meta charset="UTF-8">
 <title>ueditor demo</title>
</head>
 
<body>
 <!-- 加载编辑器的容器 -->
 <script id="container" name="content" type="text/plain">
 这里写你的初始化内容
 </script>
 <!-- 配置文件 -->
 <script type="text/javascript" src="ueditor.config.js"></script>
 <!-- 编辑器源码文件 -->
 <script type="text/javascript" src="ueditor.all.js"></script>
 <!-- 实例化编辑器 -->
 <script type="text/javascript">
 var ue = UE.getEditor('container');
 </script>
</body> 
</html>

OK, selepas menyelesaikan kerja di atas, buka demo.html dengan penyemak imbas Jika anda melihat skrin berikut, tahniah, penggunaan pertama telah berjaya!

Bagaimana untuk menggunakan? Satu lagi penggunaan terperinci:
Buat fail demo.html Mula-mula, tambahkan kod berikut di mana anda perlu menambah editor. 

<script type="text/plain" id="myEditor" style="width:98%;height:240px;"> 
 <p>内容区域</p> 
</script>

Kemudian, muatkan fail js dan css berkaitan UMeditor. Fail yang berkaitan boleh dimuat turun dari laman web ini atau pergi terus ke laman web rasmi UMeditor untuk memuat turun versi terkini. 

<script src="http://libs.useso.com/js/jquery/2.1.0/jquery.min.js"></script> 
<script type="text/javascript" charset="utf-8" src="umeditor.config.js"></script> 
<script type="text/javascript" charset="utf-8" src="umeditor.min.js"></script> 
<link href="themes/default/css/umeditor.min.css" type="text/css" rel="stylesheet">

Seterusnya, kami mula memanggil editor: 

<script type="text/javascript"> 
 var um = UM.getEditor('myEditor'); 
</script>

Kini kita boleh membuka penyemak imbas untuk pratonton kesan editor.
Pilihan penyesuaian
UMeditor menyediakan banyak tetapan pilihan yang pengguna boleh menyesuaikan mengikut keperluan projek mereka sendiri.
Anda boleh menggunakan kod berikut untuk mendapatkan kandungan dalam editor Anda juga boleh mendapatkan kandungan teks biasa. 

UM.getEditor('myEditor').getContent();

Untuk menentukan sama ada editor mempunyai kandungan, anda boleh menggunakan kod berikut: 

 var cont = UM.getEditor('myEditor').hasContents(); 
 if(cont==true){ 
 alert('有内容。'); 
 }else{ 
 alert('无内容。'); 
 }

Jika anda meletakkan editor ke dalam borang dan menetapkan laluan tindakan, anda boleh menyerahkan borang untuk menghantar kandungan dalam editor. Seperti: 

<form action="server.php" method="post"> 
 <script id="container" name="content" type="text/plain" style="width:98%;height:240px;">这里写你的初始化内容</script> 
 <button type="submit" class="btn">提交</button> 
</form>

Kami boleh menetapkan ikon alat yang dibenarkan dalam bar alat Contohnya, berikut ialah penyesuaian mudah beberapa ikon alat yang biasa digunakan: 

var editor = UM.getEditor('container',{ 
 toolbar: 
 ['bold italic underline fullscreen', 'link unlink','| justifyleft justifycenter justifyright justifyjustify |', 'emotion image video | map'] 
 
});

UMeditor menyediakan banyak alat yang boleh disesuaikan mengikut keperluan, seperti penyuntingan jadual, susun atur senarai, sisipan multimedia, muat naik imej, panggilan peta, dll. UMeditor menyediakan beberapa versi bahasa pelayan, terutamanya digunakan untuk memproses imej yang dimuat naik. Pengguna boleh menetapkan laluan muat naik, muat naik had jenis fail, had saiz dan banyak lagi. Hanya sediakan dan gunakan.

Kesan penggunaan:

Di atas adalah keseluruhan kandungan artikel ini saya harap ia dapat membantu semua orang menggunakan editor UMeditor dengan lebih baik.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Ringkasan pembelajaran javascript harian (objek RegExp)_kemahiran javascriptArtikel seterusnya：Ringkasan pembelajaran javascript harian (objek RegExp)_kemahiran javascript

Artikel berkaitan

Lihat lagi