asp.net 在线编辑器（CKEDITOR）的内容显示问题

Posted 2023-04-12

在一个页面上我弄了个在线编辑器（CKEDITOR），我想在该页面运行时，这个在线编辑器里显示内容，内容是从数据库中取出来的，显示内容这一步，我可以，但是我在这个内容上修改了之后，再保存到数据库中，没有成功，还是载入时的内容，请高手解救，谢谢。
我的问题跟
http://zhidao.baidu.com/question/213757998.html?si=8
这个是一样的

请仔细查检一下程序,是否取错值了~然后再跟踪一下保存时控件的内容再进行相应处理!一般应该不存在你说的那种情况,如果这个编辑器不支持后台取值你话,你添加的时候应该就保存不了!还有,你赋值的语句写在Page_Load事件中,请写在下面的代码里面:
if(!IsPostBack)

//赋值,

不然取值会取到你初始化的值! 参考技术A 我以前也使用过。。 一样问题。。不过我自己解决了~~~
楼主应该也是做那种发帖的功能吧。。

我没用过你的那种CKEDITOR编辑器。。不过应该都是架构在textbox的基础上的是吧
那么就是用js 获取到该textBox 内部的HTML 然后保存到一个js定义的字段内部 比如说是 myTxt
Asp 做的时候 JS 代码 调用后台代码 让后台代码帮你 处理 保存到myTxt 的字段
设置一下 数据库内部字段 让它类型为text 这样子才能保存 够多的字符。
最后注意一下 你的那个myTxt 字段内部的数据 asp 后台捕获的时候 要处理一下内容
里面占位符会很多就是空格 你要循环一下 将里面的空字符的 全部去掉，，不然保存到数据库内部的时候 会非常浪费空间

初始化要使用楼上那种方法。。 asp 页面操作时候都要添加。。
f(!IsPostBack)

//赋值,
参考技术B Page_load
中加
f(!IsPostBack)

//赋值,
参考技术C 也许成功了，但是可能是浏览器缓存的原因，你要刷新一下。
先在地址栏上按回车，再点刷新才有效。

如何在 CKEditor 5 中使用 asp.net core razor Pages 上传图片

【中文标题】如何在 CKEditor 5 中使用 asp.net core razor Pages 上传图片

【英文标题】：How upload image in CKEditor 5 With asp.net core razor Pages

【发布时间】：2021-01-06 16:31:08

【问题描述】：

ClassicEditor.create(document.querySelector('#News_Body'),

  language: 'fa',
  ckfinder: 
    uploadUrl: 'URL'
  
).catch(error =>
  
    console.error(error);
  );

我有一个 Razor 页面需要这个页面 通过 CKEditor 将图像上传到服务器给我一个示例

【参考方案1】：

CKEditor 5中如何使用asp.net core razor Pages上传图片

您可以参考以下示例来实现上述要求。

JS 代码

@section scripts
    <script src="https://cdn.ckeditor.com/ckeditor5/22.0.0/classic/ckeditor.js"></script>

    <script>
        ClassicEditor
            .create(document.querySelector('#News_Body'),
                
                    language: 'fa',
                    ckfinder:  uploadUrl: '/index/UploadImage' 
                )
            .catch(error =>  console.error(error); ); 
    </script>

页面模型类和处理程序

[IgnoreAntiforgeryToken]
public class IndexModel : PageModel

    private readonly ILogger<IndexModel> _logger;

    public IndexModel(ILogger<IndexModel> logger)
    
        _logger = logger;
    

    public void OnGet()
    

    

    public async Task<JsonResult> OnPostUploadImage([FromForm]IFormFile upload)
    
        if (upload.Length <= 0) return null;

        //your custom code logic here

        //1)check if the file is image

        //2)check if the file is too large

        //etc

        var fileName = Guid.NewGuid() + Path.GetExtension(upload.FileName).ToLower();

        //save file under wwwroot/CKEditorImages folder

        var filePath = Path.Combine(
            Directory.GetCurrentDirectory(), "wwwroot/CKEditorImages",
            fileName);

        using (var stream = System.IO.File.Create(filePath))
        
            await upload.CopyToAsync(stream);
        

        var url = $""/CKEditorImages/"fileName";

        var success = new uploadsuccess
        
            Uploaded = 1,
            FileName = fileName,
            Url = url
        ;

        return new JsonResult(success);
    


public class uploadsuccess

    public int Uploaded  get; set;  
    public string FileName  get; set; 
    public string Url  get; set; 

测试结果

【讨论】：

您好，我是按照您的代码操作的，但是当我点击确定按钮时，显示错误cannot upload file。我该如何解决这个问题？@Fei Han

【参考方案2】：

上述解决方案对我有用。我只是在 ckFinder 中更改了 PATH

@section scripts
    <script src="https://cdn.ckeditor.com/ckeditor5/22.0.0/classic/ckeditor.js"></script>

    <script>
        ClassicEditor
            .create(document.querySelector('#News_Body'),
                
                    language: 'fa',
                    ckfinder:  uploadUrl: '/index/?handler=UploadImage' 
                )
            .catch(error =>  console.error(error); ); 
    </script>