質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Q&A

0回答

1191閲覧

編集画面にて要素の間に挿入したい

stampdoor

総合スコア483

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

0グッド

0クリップ

投稿2018/03/22 08:48

前提・実現したいこと

AngularJSについての質問です。

現在wordpressのエディタ機能を拡張するために
SPECTRUMというプラグインを導入しています。
▼配布元サイト
https://spectrumengine.jp/

このプラグインのメインの機能がAngularJSで作られており、
基本機能としては申し分ないのですが下記の機能を追加実装したいと考えています。

【現在】
※分かりづらくて恐縮ですが記事編集画面と思って下さい
※下記の要素とはInstagramやtwitter埋め込みなどの塊を挿入できる要素です

///////////////////////////////////////////////////////
// 編集機能ボックスA                //
// [上に新しい要素を追加] [移動] [修正] [削除]     //
// ・ここに[見出し]などの追加ボタン要素が並んでいる //
//////////////////////////////////////////////////////
!Aを押すとここに追加される
・追加した要素がならんでいる
・追加した要素がならんでいる
←ここに要素を追加できる編集機能Cを実装したい
・追加した要素がならんでいる
!Bを押すとここに追加される
///////////////////////////////////////////////////////
// 編集機能ボックスB                //
// [下に新しい要素を追加] [移動] [修正] [削除]     //
// ・ここに[見出し]などの追加ボタン要素が並んでいる //
//////////////////////////////////////////////////////

拙い知識しかなく申し訳ありませんが、どうぞよろしくお願いします。

発生している問題・エラーメッセージ

恐らく直前の要素を掴んでspliceで入れ込む感じだと思うのですが・・・。 sortableな要素なので要素の挿入順を数えようとしてもバラバラになってしまいます。

該当のソースコード

$scope.add = function(type, position) { var w; if (position == null) { position = false; } if (entry = EntryCollectionClass.hasNonFrozen($scope.entries)) { w = window.confirm("まだ保存されていない記事があります。追加するとその記事は消えてしまいますが構いませんか?"); if (!w) { return; } $scope["delete"](entry); } entry = { type: type, status: { frozen: false } }; if (type === 'text') { entry.size = 'medium'; } EntryClass.init(entry); $scope.last_id++; entry.id = $scope.last_id; if (position === false) { $scope.entries.unshift(entry); } if (position === true) { return $scope.entries.push(entry); } };

試したこと

$scope.addShift = function(type, position) { var w; if (entry = EntryCollectionClass.hasNonFrozen($scope.entries)) { w = window.confirm("まだ保存されていない記事があります。追加するとその記事は消えてしまいますが構いませんか?"); if (!w) { return; } $scope["delete"](entry); } entry = { type: type, status: { frozen: false } }; if (type === 'text') { entry.size = 'medium'; } EntryClass.init(entry); $scope.last_id++; entry.id = $scope.last_id; return $scope.entries.splice(2,0,entry); };

補足情報(FW/ツールのバージョンなど)

AngularJS v1.4.8
WordPress v4.9.4
SPECTRUM v0.2.6

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問