正文
vue+ckEditor5
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1.安装依赖
"@ckeditor/ckeditor5-build-balloon": "^10.1.0",
"@ckeditor/ckeditor5-build-classic": "^10.1.0",
"@ckeditor/ckeditor5-build-inline": "^10.1.0",
"vue-ckeditor5": "^0.1.5",
2.html
<div id="ckEditor">
<vue-ckeditor type="balloon" v-model="content" :editors="editors1" :config='config' ></vue-ckeditor>
</div>
3.引入文件
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import BalloonEditor from '@ckeditor/ckeditor5-build-balloon'
import InlineEditor from '@ckeditor/ckeditor5-build-inline'
import VueCkeditor from 'vue-ckeditor5'
4.js
data(){
return {
content: '',
editors1: {
// classic: ClassicEditor,
balloon: BalloonEditor
},
config:{
language:'en',
ckfinder: {
uploadUrl: $.getCookie('prefixUrl') +'/file/uploads'
},
image:{
toolbar: [ 'imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:alignRight' ],
styles: [
// This option is equal to a situation where no style is applied.
'full',
// This represents an image aligned to the left.
'alignLeft',
// This represents an image aligned to the right.
'alignRight'
]
},
fontSize: {
options: [
'tiny',
'small',
'big',
'huge'
]
},
fontFamily: {
options: [
'default',
'Ubuntu, Arial, sans-serif',
'Ubuntu Mono, Courier New, Courier, monospace'
]
},
toolbar: [
'heading',
'|',
'alignment',// <--- ADDED
'bold',
'italic',
'link',
'fontFamily',
'fontSize',
// 'bulletedList',
// 'numberedList',
'imageUpload',
// 'blockQuote',
'undo',
'redo'
]
}
}
},
components:{
'vue-ckeditor': VueCkeditor.component
}
5.处理数据
ctbrife(str){
// str = str.replace(/\<c:if\b[^>]*>([\s\S]*?)</c:if>/g,'')
str = str.replace(/<\/?[^>]*>/g,''); //去除HTML tag
str = str.replace(/[ | ]*\n/g,'\n'); //去除行尾空白
//str = str.replace(/\n[\s| | ]*\r/g,'\n'); //去除多余空行
str=str.replace(/ /ig,'');//去掉
return str.substring(0,40);
}
