apply different format bar for RichText/Markdown

This commit is contained in:
houxg
2016-11-24 15:47:18 +08:00
parent c8b5006e5e
commit 3f85cbe759
11 changed files with 172 additions and 56 deletions

View File

@@ -57,6 +57,10 @@ public abstract class Editor {
public abstract void toggleItalic();
public abstract void toggleQuote();
public abstract void toggleHeading();
public interface EditorListener {
void onPageLoaded();
void onClickedLink(String title, String url);

View File

@@ -115,4 +115,14 @@ public class MarkdownEditor extends Editor {
public void toggleItalic() {
execJs("ZSSEditor.setItalic();");
}
@Override
public void toggleQuote() {
execJs("ZSSEditor.setBlockquote();");
}
@Override
public void toggleHeading() {
execJs("ZSSEditor.setHeading();");
}
}

View File

@@ -128,6 +128,16 @@ public class RichTextEditor extends Editor implements OnJsEditorStateChangedList
execJs("ZSSEditor.setItalic();");
}
@Override
public void toggleQuote() {
execJs("ZSSEditor.setBlockquote();");
}
@Override
public void toggleHeading() {
execJs("ZSSEditor.setHeading();");
}
private String appendPTag(String source) {
String[] segments = source.split("\n\n");
StringBuilder contentBuilder = new StringBuilder();

View File

@@ -32,6 +32,7 @@ import java.util.List;
import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;
import butterknife.Optional;
public class EditorFragment extends Fragment implements Editor.EditorListener {
@@ -44,13 +45,22 @@ public class EditorFragment extends Fragment implements Editor.EditorListener {
private EditorFragmentListener mListener;
private Editor mEditor;
@BindView(R.id.fl_tools)
@BindView(R.id.fl_container)
View mToolContainer;
@Nullable
@BindView(R.id.btn_bold)
ToggleImageButton mBoldBtn;
@Nullable
@BindView(R.id.btn_italic)
ToggleImageButton mItalicBtn;
@Nullable
@BindView(R.id.btn_heading)
ToggleImageButton mHeadingBtn;
@Nullable
@BindView(R.id.btn_quote)
ToggleImageButton mQuoteBtn;
@BindView(R.id.btn_order_list)
ToggleImageButton mOrderListBtn;
@BindView(R.id.btn_unorder_list)
@@ -92,19 +102,25 @@ public class EditorFragment extends Fragment implements Editor.EditorListener {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_editor, container, false);
ButterKnife.bind(this, view);
Bundle arguments = savedInstanceState == null ? getArguments() : savedInstanceState;
mIsEditingEnabled = arguments.getBoolean(ARG_ENABLE_EDIT, false);
boolean isMarkdown = arguments.getBoolean(ARG_IS_MARKDOWN, true);
mToolContainer.setVisibility(mIsEditingEnabled ? View.VISIBLE : View.GONE);
int formatRestId;
if (isMarkdown) {
mEditor = new MarkdownEditor(this);
formatRestId = R.layout.format_bar_markdown;
} else {
mEditor = new RichTextEditor(this);
formatRestId = R.layout.format_bar_richtext;
}
ViewGroup formatBarContainer = (ViewGroup) view.findViewById(R.id.fl_container);
View formatBar = inflater.inflate(formatRestId, formatBarContainer, false);
formatBarContainer.addView(formatBar, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
ButterKnife.bind(this, view);
mToolContainer.setVisibility(mIsEditingEnabled ? View.VISIBLE : View.GONE);
mEditor.init(mWebView);
return view;
}
@@ -191,16 +207,30 @@ public class EditorFragment extends Fragment implements Editor.EditorListener {
mEditor.toggleUnorderList();
}
@Optional
@OnClick(R.id.btn_bold)
void toggleBold() {
mEditor.toggleBold();
}
@Optional
@OnClick(R.id.btn_italic)
void toggleItalic() {
mEditor.toggleItalic();
}
@Optional
@OnClick(R.id.btn_heading)
void toggleHeading() {
mEditor.toggleHeading();
}
@Optional
@OnClick(R.id.btn_quote)
void toggleQuote() {
mEditor.toggleQuote();
}
@OnClick(R.id.btn_undo)
void undo() {
mEditor.undo();

View File

Before

Width:  |  Height:  |  Size: 302 B

After

Width:  |  Height:  |  Size: 302 B

View File

Before

Width:  |  Height:  |  Size: 300 B

After

Width:  |  Height:  |  Size: 300 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@@ -0,0 +1,55 @@
<org.houxg.flexlayout.FlexLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/fl_tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#EEEEEE"
app:justify_content="space_between">
<ImageView
android:id="@+id/btn_undo"
style="@style/FormatButton"
android:src="@drawable/ic_undo_black_disable" />
<ImageView
android:id="@+id/btn_redo"
style="@style/FormatButton"
android:src="@drawable/ic_redo_black_disable" />
<org.houxg.leamonax.widget.ToggleImageButton
android:id="@+id/btn_heading"
style="@style/FormatButton"
app:checkedDrawable="@drawable/ic_heading_enable"
app:uncheckedDrawable="@drawable/ic_heading_disable" />
<org.houxg.leamonax.widget.ToggleImageButton
android:id="@+id/btn_quote"
style="@style/FormatButton"
app:checkedDrawable="@drawable/ic_format_quote_enable"
app:uncheckedDrawable="@drawable/ic_format_quote_disable" />
<org.houxg.leamonax.widget.ToggleImageButton
android:id="@+id/btn_unorder_list"
style="@style/FormatButton"
app:checkedDrawable="@drawable/ic_format_list_bulleted_black_enable"
app:uncheckedDrawable="@drawable/ic_format_list_bulleted_black_disable" />
<org.houxg.leamonax.widget.ToggleImageButton
android:id="@+id/btn_order_list"
style="@style/FormatButton"
app:checkedDrawable="@drawable/ic_format_list_numbered_black_enable"
app:uncheckedDrawable="@drawable/ic_format_list_numbered_black_disable" />
<ImageView
android:id="@+id/btn_img"
style="@style/FormatButton"
android:src="@drawable/ic_insert_photo_black_disable" />
<org.houxg.leamonax.widget.ToggleImageButton
android:id="@+id/btn_link"
style="@style/FormatButton"
android:src="@drawable/ic_insert_link_black_disable" />
</org.houxg.flexlayout.FlexLayout>

View File

@@ -0,0 +1,55 @@
<org.houxg.flexlayout.FlexLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/fl_tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#EEEEEE"
app:justify_content="space_between">
<ImageView
android:id="@+id/btn_undo"
style="@style/FormatButton"
android:src="@drawable/ic_undo_black_disable" />
<ImageView
android:id="@+id/btn_redo"
style="@style/FormatButton"
android:src="@drawable/ic_redo_black_disable" />
<org.houxg.leamonax.widget.ToggleImageButton
android:id="@+id/btn_bold"
style="@style/FormatButton"
app:checkedDrawable="@drawable/ic_format_bold_black_enable"
app:uncheckedDrawable="@drawable/ic_format_bold_black_disable" />
<org.houxg.leamonax.widget.ToggleImageButton
android:id="@+id/btn_italic"
style="@style/FormatButton"
app:checkedDrawable="@drawable/ic_format_italic_black_enable"
app:uncheckedDrawable="@drawable/ic_format_italic_black_disable" />
<org.houxg.leamonax.widget.ToggleImageButton
android:id="@+id/btn_unorder_list"
style="@style/FormatButton"
app:checkedDrawable="@drawable/ic_format_list_bulleted_black_enable"
app:uncheckedDrawable="@drawable/ic_format_list_bulleted_black_disable" />
<org.houxg.leamonax.widget.ToggleImageButton
android:id="@+id/btn_order_list"
style="@style/FormatButton"
app:checkedDrawable="@drawable/ic_format_list_numbered_black_enable"
app:uncheckedDrawable="@drawable/ic_format_list_numbered_black_disable" />
<ImageView
android:id="@+id/btn_img"
style="@style/FormatButton"
android:src="@drawable/ic_insert_photo_black_disable" />
<org.houxg.leamonax.widget.ToggleImageButton
android:id="@+id/btn_link"
style="@style/FormatButton"
android:src="@drawable/ic_insert_link_black_disable" />
</org.houxg.flexlayout.FlexLayout>

View File

@@ -1,65 +1,17 @@
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<org.houxg.flexlayout.FlexLayout
android:id="@+id/fl_tools"
<FrameLayout
android:id="@+id/fl_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:justify_content="space_between"
android:background="#EEEEEE">
<ImageView
android:id="@+id/btn_img"
style="@style/FormatButton"
android:src="@drawable/ic_insert_photo_black_disable" />
<org.houxg.leamonax.widget.ToggleImageButton
android:id="@+id/btn_link"
style="@style/FormatButton"
android:src="@drawable/ic_insert_link_black_disable" />
<org.houxg.leamonax.widget.ToggleImageButton
android:id="@+id/btn_order_list"
style="@style/FormatButton"
app:checkedDrawable="@drawable/ic_format_list_bulleted_black_enable"
app:uncheckedDrawable="@drawable/ic_format_list_bulleted_black_disable" />
<org.houxg.leamonax.widget.ToggleImageButton
android:id="@+id/btn_unorder_list"
style="@style/FormatButton"
app:checkedDrawable="@drawable/ic_format_list_numbered_black_enable"
app:uncheckedDrawable="@drawable/ic_format_list_numbered_black_disable" />
<org.houxg.leamonax.widget.ToggleImageButton
android:id="@+id/btn_bold"
style="@style/FormatButton"
app:checkedDrawable="@drawable/ic_format_bold_black_enable"
app:uncheckedDrawable="@drawable/ic_format_bold_black_disable" />
<org.houxg.leamonax.widget.ToggleImageButton
android:id="@+id/btn_italic"
style="@style/FormatButton"
app:checkedDrawable="@drawable/ic_format_italic_black_enable"
app:uncheckedDrawable="@drawable/ic_format_italic_black_disable" />
<ImageView
android:id="@+id/btn_undo"
style="@style/FormatButton"
android:src="@drawable/ic_undo_black_disable" />
<ImageView
android:id="@+id/btn_redo"
style="@style/FormatButton"
android:src="@drawable/ic_redo_black_disable" />
</org.houxg.flexlayout.FlexLayout>
android:layout_alignParentBottom="true" />
<org.houxg.leamonax.widget.LeaWebView
android:id="@+id/web_editor"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/fl_tools" />
android:layout_above="@id/fl_container" />
</RelativeLayout>