CKEditor的使用
1.引入js库
<script src="https://cdn.ckeditor.com/4.6.1/standard-all/ckeditor.js"></script>
2.定义一个textarea标签
<textarea id="editor"> </textarea>
3.用CkEditor替换textarea即可使用基本功能
CKEDITOR.replace(''editor'');
4.配置CkEditor
添加图片上传，代码插入工具
CKEDITOR.replace(''editor-box'', {
//GitHub地址：https://github.com/ckeditor
toolbar: [
{ name: ''document'', items: [''Source''] },
{ name: ''basicstyles'', items: [''Bold'', ''Italic''] },
{ name: ''paragraph'', items: [''NumberedList'', ''BulletedList'', ''-'', ''Outdent'', ''Indent'', ''-'', ''Blockquote''] },
{ name: ''links'', items: [''Link'', ''Unlink''] },
{ name: ''insert'', items: [''Image'',''CodeSnippet''] },
{ name: ''styles'', items: [''Format'', ''Styles''] }
],
filebrowserImageUploadUrl: ''/Blogs/UploadImageUrl'', //配置图片上传后台Url
customConfig: '''',
extraPlugins: ''codesnippet,image2,uploadimage'',
removePlugins: ''image'',
//mathJaxLib: ''https://cdn.mathjax.org/mathjax/2.6-latest/MathJax.js?config=TeX-AMS_HTML'',
codeSnippet_theme: ''ir_black'',
height: 450,
contentsCss: [''https://cdn.ckeditor.com/4.6.1/standard-all/contents.css''],
format_tags: ''p;h1;h2;h3;pre'',
removeDialogTabs: ''image:advanced;link:advanced;link:target'',
stylesSet: [
/* Inline Styles */
{ name: ''Marker'', element: ''span'', attributes: { ''class'': ''marker'' } },
{ name: ''Cited Work'', element: ''cite'' },
{ name: ''Inline Quotation'', element: ''q'' },
/* Object Styles */
{
name: ''Special Container'',
element: ''div'',
styles: {
padding: ''5px 10px'',
background: ''#eee'',
border: ''1px solid #ccc''
}
},
{
name: ''Compact table'',
element: ''table'',
attributes: {
cellpadding: ''5'',
cellspacing: ''0'',
border: ''1'',
bordercolor: ''#ccc''
},
styles: {
''border-collapse'': ''collapse''
}
},
{ name: ''Borderless Table'', element: ''table'', styles: { ''border-style'': ''hidden'', ''background-color'': ''#E6E6FA'' } },
{ name: ''Square Bulleted List'', element: ''ul'', styles: { ''list-style-type'': ''square'' } },
/* Widget Styles */
{ name: ''Illustration'', type: ''widget'', widget: ''image'', attributes: { ''class'': ''image-illustration'' } },
{ name: ''Featured snippet'', type: ''widget'', widget: ''codeSnippet'', attributes: { ''class'': ''code-featured'' } },
{ name: ''Featured formula'', type: ''widget'', widget: ''mathjax'', attributes: { ''class'': ''math-featured'' } }
]
});
5.后台接收图片
/// <summary>
/// 图片上传
/// </summary>
/// <param name="env"></param>
/// <returns></returns>
public async Task<IActionResult> UploadImageUrl([FromServices]IHostingEnvironment env)
{
// CKEditor提交的很重要的一个参数
string callback = Request.Query["CKEditorFuncNum"];
var form = Request.Form;
var img = form.Files[0]; //获取图片
string fileName = img.FileName;
var openReadStream = img.OpenReadStream();
byte[] buff = new byte[openReadStream.Length];
await openReadStream.ReadAsync(buff, 0, buff.Length);
string filenameGuid = Guid.NewGuid().ToString();
var bowerPath = PathUtils.GetSavePath(filenameGuid, true) + ".jpg";//获取到图片保存的路径，这边根据自己的实现
var savePath = Path.Combine(env.WebRootPath, bowerPath);
using (FileStream fs = new FileStream(savePath, FileMode.Create))
{
await fs.WriteAsync(buff, 0, buff.Length);
//服务器返回JavaScript脚本
string result = $"<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction(\"{callback}\", \"{"/"+bowerPath}\", \"\");</script>";
Response.ContentType = "text/html;charset=UTF-8";
return Content(result);
}
}
6.注意
服务器返回需要加上这个，否则会遇到前端页面不执行返回的JavaScript脚本的问题
Response.ContentType = "text/html;charset=UTF-8";
|