wangEditor 3リッチテキストエディタの簡単な使用
5344 ワード
wangEditorはjavascriptとcssに基づいて開発されたWebリッチテキストエディタで、軽量、簡潔、使いやすく、オープンソースが無料です.ブロガー個人はこのリッチテキストエディタが使いやすいと思っています.簡単で、手が速くて、機能はまあまあです.
一、wangEditorのダウンロード
wangEditor公式サイト:http://www.wangeditor.com/公式オンライン開発文書:https://www.kancloud.cn/wangfupeng/wangeditor3/332599まず公式サイトでwangEditorをダウンロードできます
二、wangEditorの作成
公式サイトでwangEditorの圧縮パッケージをダウンロードした後、release/ディレクトリのwangEditor.jsまたはwangEditor.min.jsという2つのファイルを出せばいいです.
三、wangEditor 3エディタの内容の提出
wangEditor 3エディタにはvalue属性値がなく、フォームを直接コミットできないため、エディタの内容のコミットはinput入力ボックスと組み合わせて使用する必要があります.wangEditorの上にinput入力ボックスを追加し、typeをhiddenに設定して隠します.このようにするのも実際の開発のためです.
次はjsコードです.wangEditor 3が提供する方法でエディタの内容を取得した後、inputに値を割り当てて、フォームを正常に提出することができます.
最後にwangEditor 3エディタの図を添付します.個人的にはいい感じです.興味のある方は
を試してみてください
一、wangEditorのダウンロード
wangEditor公式サイト:http://www.wangeditor.com/公式オンライン開発文書:https://www.kancloud.cn/wangfupeng/wangeditor3/332599まず公式サイトでwangEditorをダウンロードできます
二、wangEditorの作成
公式サイトでwangEditorの圧縮パッケージをダウンロードした後、release/ディレクトリのwangEditor.jsまたはwangEditor.min.jsという2つのファイルを出せばいいです.
<html>
<head>
<meta charset="UTF-8">
<title>wangEditor demotitle>
head>
<body>
<div id="editor">
<p> <b>wangEditorb> p>
div>
<script type="text/javascript" src="/wangEditor.min.js">script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
// var editor = new E( document.getElementById('editor') )
editor.create()
script>
body>
html>三、wangEditor 3エディタの内容の提出
wangEditor 3エディタにはvalue属性値がなく、フォームを直接コミットできないため、エディタの内容のコミットはinput入力ボックスと組み合わせて使用する必要があります.wangEditorの上にinput入力ボックスを追加し、typeをhiddenに設定して隠します.このようにするのも実際の開発のためです.
type="hidden" name="content" id="editor_txt">次はjsコードです.wangEditor 3が提供する方法でエディタの内容を取得した後、inputに値を割り当てて、フォームを正常に提出することができます.
<script type="text/javascript" src="js/wangEditor.js">script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
editor.create()
document.getElementById('btn1').addEventListener('click', function () {
// html
var editor_txt=editor.txt.html();
document.getElementById('editor_txt').value=editor_txt;
}, false)
script>最後にwangEditor 3エディタの図を添付します.個人的にはいい感じです.興味のある方は
を試してみてください