見る

vue-ueditor-wrap統合135エディター



Vue Ueditor Wrap Integrated 135 Editor



ニーズの声明

このプロジェクトでは、Baiduリッチテキストエディターは主にWeChat公式アカウントページのコンテンツを編集するために使用されます。操作作業を容易にするために、135エディターを（独自のテンプレート、画像などと）統合することが決定されました。

最初のステップのクローンコンポーネントコード

最初にvue-ueditor-wrapソースコードのインストール依存関係をダウンロードし（githubプロジェクトのホームページには使用方法があります）、次に以下をダウンロードします。



  1. 135editorフォルダーとコンテンツをueditor / dialogの下に追加します。
  2. 135editor.jsファイルをueditorフォルダーに追加します。
ueditor |--dialogs |--|--135editor |--|--|--135EditorDialogPage.html |--135editor.js

これらの2つのステップは、135エディターのドキュメントを参照しています。

2番目のステップのコンポーネント拡張

vue-ueditor-wrap.vueファイルのコードを次のように変更します



_checkDependencies () { return new Promise((resolve, reject) => { // Determine whether ueditor.config.js and ueditor.all.js are both loaded (only when ueditor.config.js is loaded, the UE object and UEDITOR_CONFIG object exist, only when ueditor.all.js is loaded, the UEDITOR_CONFIG object exists, but it is Empty object) let scriptsLoaded = !!window.UE135 && !!window.UE && !!window.UEDITOR_CONFIG && Object.keys(window.UEDITOR_CONFIG).length !== 0 && !!window.UE.getEditor if (scriptsLoaded) { resolve() } else if (window['$loadEnv']) { // Use subscription to publish to ensure that script tags will not be created repeatedly when multiple components are rendered at the same time window['$loadEnv'].on('scriptsLoaded', () => { resolve() }) } else { window['$loadEnv'] = new LoadEvent() // If you only reference ueditor.all.min.js elsewhere, you still need to reload ueditor.all.min.js after loading ueditor.config.js, so you must ensure that ueditor.config.js is loaded this._loadConfig().then(() => this._loadCore()).then(()=> this._load135()).then(() => { resolve() window['$loadEnv'].emit('scriptsLoaded') }) } }) } //New method _load135 () { return new Promise((resolve, reject) => { if (window.UE && window.UE135) { resolve() return } let coreScript = document.createElement('script') coreScript.type = 'text/javascript' coreScript.src = this.mixedConfig.UEDITOR_HOME_URL + '135editor.js' document.getElementsByTagName('head')[0].appendChild(coreScript) coreScript.onload = function () { if (window.UE && window.UE135) { resolve() } else { console.error('Failed to load 135editor.js, please check if your configuration address UEDITOR_HOME_URL is filled in correctly! ', coreScript.src) } } }) }

建設の第3ステップ

npm run buildがプロジェクトをビルドした後、libフォルダーをコピーします。プロジェクトのnode_modulesフォルダーにあるvue-ueditor-wrapのlibフォルダーを上書きします。 （もちろん、サードパーティのモジュールコードをビルドして置き換える必要はありません。後の展開を無視するのは簡単です。npmパッケージを自分でアップロードできます）

ステップ4スタイルカバレッジ

次のスタイルをプロジェクトに追加します

.edui-button.edui-for-135editor .edui-button-wrap .edui-button-body .edui-icon{ background-image: url('http://static.135editor.com/img/icons/editor-135-icon.png') !important background-size: 85% background-position: center background-repeat: no-repeat }

ステップ5：プロジェクトにファイルを追加する

  1. 135editorフォルダーとコンテンツをueditor / dialogの下に追加します。
  2. 135editor.jsファイルをueditorフォルダーに追加します。
ueditor |--dialogs |--|--135editor |--|--|--135EditorDialogPage.html |--135editor.js

注：5番目のステップは、プロジェクトにファイルすることです。最初のステップは、vue-ueditor-wrapコンポーネントプロジェクトです。



6番目のステップが完了しました

プロジェクトを実行すると、リッチテキストエディターに135アイコンが表示されます。クリックして、135エディターを開きます。
画像

画像