OWLet2.2新機能 ピース編集って?
10月よりガーディアンに入社しました児玉尚哉です!
現在はワーキングコーチ班でOWLetマスターになるべく修行中です!
今回はOWLet新バージョン機能を紹介します。
編集したい要素をクリックで編集できる!
OWLet2.2では画期的な機能が追加されました。
その名も…ピース編集!!!
ピース編集??✌️?
✌️ではありませんが使えればピースになるのは間違い無しな機能です!
今まで入稿するときはパーツの鉛筆ボタンから入稿していましたが
ピース編集ではテキストのみならず画像もクリックして直接入稿できるという機能になります!
実装方法は?
どうやったらピース編集にできるかというと
ウィジェット作成時に入力項目内のコード生成ボタンを押すと単純出力かピース編集かを選べるようになってます!
記述例(テキスト)
ピース編集時
{t98:editable_text(
'data'=>'parts'
,'key'=>'text'
,'mode'=>'richtext'
,'placeholder'=>'テキスト入力'
,'output_empty_only_edit'=>true
)}<div class="-w-text"{=@t98:click_target=}{=@t98:target_text=}>{=@t98:value=}</div>{/t98:editable_text}
単純出力時
{=@text=}
記述例(画像)
ピース編集時
{i95:editable_image(
'data'=>'parts'
,'key'=>'image'
,'src_format'=>'/_img/'.GLang::current().'/{img_src_string}/_/'
,'mode'=>'img'
,'alt'=>true
)}<img src="{=@i95:src=}?{=date(@i95:last_update,'U')=}"{=@i95:click_target=}{=@i95:target_img=} alt="{=(strlen(@parts:image_alt)?htmlspecialchars(@parts:image_alt):preg_replace('/(.*)\..*$/','$1',@parts:image))=}" />{/i95:editable_image}
単純出力時
{img95:if(strlen(@parts:image))}<img src="/_img/{=current_lang()=}/{=@parts:datastore=}/{=@parts:id=}/image/100_100_1_000000/{=@parts:sess=}" alt="{=(strlen(@parts:image_alt)?htmlspecialchars(@parts:image_alt):preg_replace('/(.*)\..*$/','$1',@parts:image))=}" />{/img95:if}
書いてある内容が難しいと思う人もいるもいるかもしませんが、
ワンクリックで出てくるので貼り付けるだけです!
これによりエンドユーザーの方も見たまま編集が可能になり今まで以上に編集が簡単になりました!
まさに✌️です!