回答编辑框增加各种内容样式

This commit is contained in:
kehaoyuan
2019-03-21 15:25:31 +08:00
parent cbd2d8ed6c
commit fd4f32bb3c
39 changed files with 385 additions and 24 deletions

View File

@ -445,6 +445,9 @@ public class RichEditor extends WebView {
exec("javascript:RE.setUnderline();");
}
public void formatBlock() {
exec("javascript:RE.formatBlock();");
}
public String getText() {
return AskUtils.stripHtml(mContents);

View File

@ -28,6 +28,7 @@ import com.gh.gamecenter.qa.answer.detail.AnswerDetailActivity
import com.halo.assistant.HaloApp
import com.lightgame.config.CommonDebug
import com.lightgame.utils.Utils
import com.lightgame.view.CheckableImageView
import com.zhihu.matisse.Matisse
import com.zhihu.matisse.MimeType
import com.zhihu.matisse.engine.impl.PicassoEngine
@ -38,9 +39,25 @@ class AnswerEditFragment : NormalFragment() {
private val mTitle by bindView<TextView>(R.id.answer_edit_title)
private val mEditContent by bindView<RichEditor>(R.id.answer_edit_content)
private val mImgIcon by bindView<ImageView>(R.id.answer_edit_img_icon)
private val mImgIcon by bindView<ImageView>(R.id.editor_image)
private val mEditPlaceholder by bindView<View>(R.id.answer_placeholder)
private val mEditorFont by bindView<CheckableImageView>(R.id.editor_font)
private val mEditorLink by bindView<CheckableImageView>(R.id.editor_link)
private val mEditorParagraph by bindView<CheckableImageView>(R.id.editor_paragraph)
private val mEditorFontBold by bindView<CheckableImageView>(R.id.editor_font_bold)
private val mEditorFontItalic by bindView<CheckableImageView>(R.id.editor_font_italic)
private val mEditorFontStrikeThrough by bindView<CheckableImageView>(R.id.editor_font_strikethrough)
private val mEditorParagraphH1 by bindView<CheckableImageView>(R.id.editor_paragraph_h1)
private val mEditorParagraphH2 by bindView<CheckableImageView>(R.id.editor_paragraph_h2)
private val mEditorParagraphH3 by bindView<CheckableImageView>(R.id.editor_paragraph_h3)
private val mEditorParagraphH4 by bindView<CheckableImageView>(R.id.editor_paragraph_h4)
private val mEditorParagraphQuote by bindView<CheckableImageView>(R.id.editor_paragraph_quote)
private val mEditorFontContainer by bindView<View>(R.id.editor_font_container)
private val mEditorParagraphContainer by bindView<View>(R.id.editor_paragraph_container)
private val mEditorLinkContainer by bindView<View>(R.id.editor_link_container)
private val mEditorInsertDetail by bindView<View>(R.id.editor_insert_detail)
private var mProcessingDialog: WaitingDialogFragment? = null
private var mUploadImageCancelDialog: Dialog? = null
private var postDialog: WaitingDialogFragment? = null
@ -341,21 +358,105 @@ class AnswerEditFragment : NormalFragment() {
mViewModel?.saveAnswerDrafts(editContent, isExit)
}
@OnClick(R.id.answer_edit_img_icon)
@OnClick(R.id.editor_image, R.id.editor_font, R.id.editor_link, R.id.editor_paragraph,
R.id.editor_font_bold, R.id.editor_font_italic, R.id.editor_font_strikethrough,
R.id.editor_paragraph_h1, R.id.editor_paragraph_h2, R.id.editor_paragraph_h3,
R.id.editor_paragraph_h4, R.id.editor_font_container, R.id.editor_paragraph_container,
R.id.editor_paragraph_quote)
override fun onClick(view: View) {
if (view.id == R.id.answer_edit_img_icon) {
MtaHelper.onEvent("发表答案", "上传图片", mCommunityName)
if (!mAgreePostPic && !NetworkUtils.isWifiOr4GOr3GConnected(context)) {
mAgreePostPic = true
DialogUtils.showAlertDialog(context,
"警告",
"当前使用移动网络,上传图片会消耗手机流量",
"我知道了", "", { startMediaStore() }, null)
MtaHelper.onEvent("发表答案", "上传图片-移动网络提示", mCommunityName)
return
when (view.id) {
R.id.editor_image -> {
MtaHelper.onEvent("发表答案", "上传图片", mCommunityName)
if (!mAgreePostPic && !NetworkUtils.isWifiOr4GOr3GConnected(context)) {
mAgreePostPic = true
DialogUtils.showAlertDialog(context,
"警告",
"当前使用移动网络,上传图片会消耗手机流量",
"我知道了", "", { startMediaStore() }, null)
MtaHelper.onEvent("发表答案", "上传图片-移动网络提示", mCommunityName)
return
}
startMediaStore()
}
R.id.editor_font -> {
mEditorFont.isChecked = !mEditorFont.isChecked
mEditorParagraph.isChecked = false
mEditorLink.isChecked = false
mEditorFontContainer.visibility = if (mEditorFont.isChecked) View.VISIBLE else View.GONE
mEditorParagraphContainer.visibility = if (!mEditorFont.isChecked) View.VISIBLE else View.GONE
mEditorLinkContainer.visibility = if (!mEditorFont.isChecked) View.VISIBLE else View.GONE
mEditorInsertDetail.visibility = mEditorFontContainer.visibility
}
R.id.editor_paragraph -> {
mEditorParagraph.isChecked = !mEditorParagraph.isChecked
mEditorFont.isChecked = false
mEditorLink.isChecked = false
mEditorParagraphContainer.visibility = if (mEditorParagraph.isChecked) View.VISIBLE else View.GONE
mEditorFontContainer.visibility = if (!mEditorParagraph.isChecked) View.VISIBLE else View.GONE
mEditorLinkContainer.visibility = if (!mEditorParagraph.isChecked) View.VISIBLE else View.GONE
mEditorInsertDetail.visibility = mEditorParagraphContainer.visibility
}
R.id.editor_link -> {
mEditorLink.isChecked = !mEditorLink.isChecked
mEditorFont.isChecked = false
mEditorParagraph.isChecked = false
mEditorLinkContainer.visibility = if (mEditorLink.isChecked) View.VISIBLE else View.GONE
mEditorParagraphContainer.visibility = if (!mEditorLink.isChecked) View.VISIBLE else View.GONE
mEditorFontContainer.visibility = if (!mEditorLink.isChecked) View.VISIBLE else View.GONE
mEditorInsertDetail.visibility = mEditorLinkContainer.visibility
}
R.id.editor_font_bold -> {
mEditorFontBold.isChecked = !mEditorFontBold.isChecked
mEditContent.setBold()
}
R.id.editor_font_italic -> {
mEditorFontItalic.isChecked = !mEditorFontItalic.isChecked
mEditContent.setItalic()
}
R.id.editor_font_strikethrough -> {
mEditorFontStrikeThrough.isChecked = !mEditorFontStrikeThrough.isChecked
mEditContent.setStrikeThrough()
}
R.id.editor_paragraph_h1 -> {
if (mEditorParagraphH1.isChecked) {
mEditContent.formatBlock()
} else {
mEditContent.setHeading(1)
}
mEditorParagraphH1.isChecked = !mEditorParagraphH1.isChecked
}
R.id.editor_paragraph_h2 -> {
if (mEditorParagraphH2.isChecked) {
mEditContent.formatBlock()
} else {
mEditContent.setHeading(2)
}
mEditorParagraphH2.isChecked = !mEditorParagraphH2.isChecked
}
R.id.editor_paragraph_h3 -> {
if (mEditorParagraphH3.isChecked) {
mEditContent.formatBlock()
} else {
mEditContent.setHeading(3)
}
mEditorParagraphH3.isChecked = !mEditorParagraphH3.isChecked
}
R.id.editor_paragraph_h4 -> {
if (mEditorParagraphH4.isChecked) {
mEditContent.formatBlock()
} else {
mEditContent.setHeading(4)
}
mEditorParagraphH4.isChecked = !mEditorParagraphH4.isChecked
}
R.id.editor_paragraph_quote -> {
if (mEditorParagraphQuote.isChecked) {
mEditContent.formatBlock()
} else {
mEditContent.setBlockquote()
}
mEditorParagraphQuote.isChecked = !mEditorParagraphQuote.isChecked
}
startMediaStore()
}
}
@ -382,7 +483,21 @@ class AnswerEditFragment : NormalFragment() {
private inner class OnCursorChangeListener {
@JavascriptInterface
fun onElements(elements: String) {
Utils.log("-----------------------")
Utils.log(elements)
Utils.log(mEditContent.html)
Utils.log("-----------------------")
mBaseHandler.post {
mEditorFontBold.isChecked = elements.contains(ELEMENT_NAME_BOLD)
mEditorFontItalic.isChecked = elements.contains(ELEMENT_NAME_ITALIC)
mEditorFontStrikeThrough.isChecked = elements.contains(ELEMENT_NAME_STRIKE)
mEditorParagraphH1.isChecked = elements.contains(ELEMENT_PARAGRAPH_H1)
mEditorParagraphH2.isChecked = elements.contains(ELEMENT_PARAGRAPH_H2)
mEditorParagraphH3.isChecked = elements.contains(ELEMENT_PARAGRAPH_H3)
mEditorParagraphH4.isChecked = elements.contains(ELEMENT_PARAGRAPH_H4)
mEditorParagraphQuote.isChecked = elements.contains(ELEMENT_PARAGRAPH_QUOTE)
}
}
}
@ -409,5 +524,14 @@ class AnswerEditFragment : NormalFragment() {
const val SAVE_DRAFTS_TOAST_COUNT = 3
const val MIN_ANSWER_TEXT_LENGTH = 6
const val MAX_ANSWER_TEXT_LENGTH = 10000
const val ELEMENT_NAME_BOLD = " b "
const val ELEMENT_NAME_ITALIC = " i "
const val ELEMENT_NAME_STRIKE = " strike "
const val ELEMENT_PARAGRAPH_H1 = " h1 "
const val ELEMENT_PARAGRAPH_H2 = " h2 "
const val ELEMENT_PARAGRAPH_H3 = " h3 "
const val ELEMENT_PARAGRAPH_H4 = " h4 "
const val ELEMENT_PARAGRAPH_QUOTE = " blockquote "
}
}