当前位置:首页>开发>正文

ckeditor可以用到vue中吗怎么用 ckeditor 使用方法

2023-04-23 17:22:41 互联网 未知 开发

 ckeditor可以用到vue中吗怎么用 ckeditor 使用方法

ckeditor可以用到vue中吗?怎么用

参考ckeditor的samplesjqueryadapter.html
加载js:

如果直接用可以这样:
var ckeditor = $(#jquery_ckeditor).data( ckeditorInstance )
ckeditor.setData( newValue )
editor.getData()
如果将CKEDITOR.config.jqueryOverrideVal设为true重定义val,则可以直接通过$(#jquery_ckeditor).val( [newValue] )赋值取值。

其实你看一下_sourceadaptersjquery.js和_samplesjqueryadapter.html就什么都明白了。

ckeditor 使用方法

cheditor与ckfinder的集成使用
1,将ckeditor解压打开,打开_Samples,将ckeditor文件夹拷贝项目中的根目录下,把bin放在根目录下

2,将ckfinder解压,ckfinder文件夹拷贝项目中的根目录下,把bin放在根目录下,把_sample,_source,help文件夹删除掉,(注:没有用)

3,在ckeditor文件下找到config.js 打开,找到
在CKEDITOR.editorCongig=function(config)
{
//填写以下内容,图片,flash路径
config.uiColor = #F7F8F9
config.scayt_autoStartup = false
config.language = zh-cn //中文
config.filebrowserBrowseUrl = ckfinder/ckfinder.html
config.filebrowserImageBrowseUrl = ckfinder/ckfinder.html?Type=Images
config.filebrowserFlashBrowseUrl = ckfinder/ckfinder.html?Type=Flash
config.filebrowserUploadUrl = ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files
config.filebrowserImageUploadUrl = ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images
config.filebrowserFlashUploadUrl = ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash
};

4,在ckfinder文件下找到config.ascx文件,打开
1)把public overrider bool ChekcAuthentication(){return false改为:return true}
2)public overrider void SetConfig(){BaseUrl = "~/ckfinder/userfiles/"}

5,在页面中head标签内写入:
<script type="text/javascript" src="ckeditor/ckeditor.js" ></script>
<script type="text/javascript" src="ckfinder/ckfinder.js"></script>
如果有母版页,在母版页中写
--注:单纯的配置,6,7可以不要,但是一旦要入数据库中,就要配置6.7步骤

6,在Default.aspx页面中,写入<%@Page ValidateRequest="false"%>

7,在web.config文件中,在system.web下写 <httpRuntime requestValidationMode="2.0"/>

8,在Default.aspx页面中添加<asp:TextBox ID="txtcontent" runat="server" TextMode="MultiLine" Height="503px" Width="100%" class="ckeditor" ></asp:TextBox>
<script type="text/javascript">
CKEDITOR.replace(<%= txtcontent.ClientID %>, { skin: kama })
</script>(用ckfinder文件下skins文件下kama文件下的,skin.js,样式)