ホームページ > 記事 > ウェブフロントエンド > Vue2.0でリッチテキストエディタを実装する方法
今回は、Vue2.0でリッチテキストエディタを実装する方法を説明します。Vue2.0でリッチテキストエディタを実装するための注意点とは何ですか?
Vue プロジェクトでは、リッチ テキスト エディターを使用する必要があることに気づき、GitHub で Vue でカプセル化されたエディター プラグインをたくさん調べましたが、その多くは画像のアップロードとビデオのアップロードをあまりサポートしていませんでした。 UEditor を使用することにしました。
インターネット上にはそのような記事がたくさんありますので、それらを調べて手書きコードをまとめ、植字してこの記事を作成しました。
対応する UEditor ソース コードをダウンロードします
まず、公式 Web サイトにアクセスして UEditor のソース コードをダウンロードし、バックグラウンド言語に応じて対応するバージョン (PHP、Asp、.Net、Jsp) をダウンロードします。
http://ueditor.baidu.com/website/download.html
ダウンロード後、リソースを /<code>/<a href="http://www.php.cn/wiki/188.html" target="_blank">static</a>/ue/
static/ue/ static
static
静态目录下面,这里的文件不会被webpack
(私は UEditor を
UEditorエディターの編集設定ファイル
ueditor.config.js
,修改其中的window.UEDITOR_HOME_UR
次のように
window.UEDITOR_HOME_URL = "/static/UE/"; //指定编辑器资源文件根目录 var URL = window.UEDITOR_HOME_URL || getUEBasePath();
ueditor.config.js
このファイルには多くの設定が含まれており、エディターのデフォルトの幅や高さなど、いくつかの初期化されたグローバル設定をここで行うことができます:
,initialFrameWidth:1000 //初始化编辑器宽度,默认1000 ,initialFrameHeight:320 //初始化编辑器高度,默认320他のパラメータ設定はこのファイルに詳細にリストされています。または公式ドキュメント http://fex.baidu.com/ueditor/
を参照してください。 エディタをシステムに統合する
/src/main.js ファイルを開き、次のコードを挿入します://ueditor import '../static/UE/ueditor.config.js' import '../static/UE/ueditor.all.min.js' import '../static/UE/lang/zh-cn/zh-cn.js' import '../static/UE/ueditor.parse.min.js'パブリックコンポーネント UE.vue を開発する
/src/components/
目录下创建 UE.vue
エディタコンポーネントファイルとして
りー
このコンポーネントは 2 つのインターフェースを公開します:value
config
<template> <p> <script type="text/plain"></script> </p> </template> <script> export default { name: 'ue', data () { return { editor: null } }, props: { value: '', config: {} }, mounted () { this.editor = window.UE.getEditor('editor', this.config); this.editor.addListener('ready', () => { this.editor.setContent(this.value) }) }, methods: { getUEContent () { return this.editor.getContent() } }, destroyed () { this.editor.destroy() } } </script>
<template> <p> <Uediter :value="ueditor.value" :config="ueditor.config" ref="ue"></Uediter> <button @click="returnContent">显示编辑器内容</el-button> <p>{{dat.content}}</p> </p> </template> <script> import Uediter from '@/components/UE.vue'; export default { data () { return { dat: { content: '' }, ueditor: { value: '编辑器默认文字', config: { initialFrameWidth: 800, initialFrameHeight: 320 } } } }, methods: { returnContent () { this.dat.content = this.$refs.ue.getUEContent() } }, components: { Uediter }, } </script>この記事の事例を読んだ後は、この方法を習得したと思います。情報については、PHP 中国語 Web サイトの他の関連記事にも注目してください。 推奨読書:
vue プロジェクトをパッケージ化して Baidu にアップロードするための BAE 手順の詳細な説明
@HostBinding() と @HostListener の違い() AngularJS
以上がVue2.0でリッチテキストエディタを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。