使用tinymac、富文本插件的时候 给文本框输入文字后选择加粗和斜体 文本框内文字显示加粗和斜体 但是绑定的值内没有添加上对应的标签 但是多进行一步操作 例如 填写了一段文字后 选择加粗 再继续添加文字 或空格 此时绑定的值 就会有标签 不知道是不是初始化插件的时候出了问题
initTinymce(e='') {
const _this = this
window.tinymce.init({
selector: `#${_this.tinymceId}`,
language: 'zh_CN',
convert_urls: false,
plugins: ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount','article'],
toolbar: ['searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen',e],
images_upload_handler: function(blobInfo, success, failure) {
const formData = new FormData()
formData.append('file', blobInfo.blob())
uploadPath(
formData
).then(
res => {
if (res.data.errno === 0) {
// success(readPath + res.data.data.url.substring(res.data.data.url.lastIndexOf('/')))
success(res.data.data.url)
}
}
).catch(() => {
failure('上传失败,请重新上传')
})
},
init_instance_callback: editor => {
if (_this.value) {
editor.setContent(_this.value)
}
/** **改成了只绑定keyup事件 要不然编辑的时候一进来就走这个方法了*/
editor.on('KeyUp', () => {
console.log(editor.getContent())
_this.$emit('input', editor.getContent())
})
},
})
}
题主是编辑器中内容没加粗吗还是vue绑定编辑器的内容块v-html未更新?看代码题主更新数据通过编辑器keyup事件传递的,这个是键盘事件,不在编辑器中输入不会触发的,应该改为change事件进行同步
editor.on('change', function () {
_this.$emit('input', editor.getContent())
})