Ticket T914876
Visible to All Users

RichEdit for ASP.NET Core - How to execute font commands

created 5 years ago (modified 5 years ago)

[DevExpress Support Team: CLONED FROM T913730: Rich Text Editor - How to use in an MVC application and use only one External Ribbon button]

I tried to implement an example with your code, but I have too problems:

I am trying to use an external ribbon or custom buttons but I don't know how raise font commands. In server component I used ribbon.commands.changeFontBold.execute(false). If the custom ribbon was faster I could use it, but I needed anyway because I want the paste content is normalized and use only a font name and size. In old component I used:
4. richTextControl.KeyUp.AddHandler((s, e) => {
if (e.htmlEvent.code = "KeyV" && e.htmlEvent.ctrlKey) {
ChangeFontStyle(s);
}
updateToolbar();
});

function ChangeFontStyle(s) {
if (debug) console.log('Normalizando el documento para usar la fuente Arial');
//e.preventDefault && e.preventDefault();
//e.stopPropagation && e.stopPropagation();
var savedPosition = s.selection.intervals;
s.selection.selectAll();
s.commands.changeFontName.execute("Arial");
s.commands.changeFontSize.execute(11);
s.selection.intervals = savedPosition;
}
function updateToolbar() {
if (activeEditor != undefined) {
for (var key in commandsTable) {
if (!commandsTable.hasOwnProperty(key)) continue;
updateToolbarItem(key, commandsTable[key].call(this, activeEditor));
}
}
}
function updateToolbarItem(itemName, command) {
var item = ExternalRibbon.GetItemByName(itemName);
if (activeEditor != undefined) {
var state = command.getState();
item.SetEnabled(state.enabled);
ExternalRibbon.SetItemValueByName(itemName, state.value)
}
}

Answers approved by DevExpress Support

created 5 years ago

Hello,

You can get character properties using the getCharacterProperties method:

JavaScript
var charProps = richEdit.selection.activeSubDocument.getCharacterProperties(richEdit.selection.intervals[0]);

To set character properties, use the setCharacterProperties method. With a ribbon item, you can use, for example, the following code:

JavaScript
richEdit.selection.activeSubDocument.setCharacterProperties(richEdit.selection.intervals[0], {bold: !charProps.bold});

If you wish to change properties after copy-pasting content using the Ctrl + C, Ctrl + V key combinations, you can do this as follows:

JavaScript
options.events.keyUp = function(s, e) { if (e.htmlEvent.code = "KeyV" && e.htmlEvent.ctrlKey) ChangeFontStyle(s); }; function ChangeFontStyle(s) { var charProps = new DevExpress.RichEdit.CharacterProperties(); charProps.fontName = "Arial"; charProps.size = 11; s.selection.activeSubDocument.setCharacterProperties(s.selection.activeSubDocument.interval, charProps); };

Thanks,
Stanley

    Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

    Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.